Register now or log in to join your professional community.
According to Dictionary.com, semantics refers to the correct interpretation of the meaning of a word or sentence. To use a word semantically is to use it in a way that is properly aligned with the meaning of the word. When we misuse a word we are not using it semantically. Many HTML tags have semantic meaning. That is, the element itself conveys some information about the type of content contained between the opening and closing tags. For example, when a browser encounters an h1 heading it interprets that tag to mean that the contents of the h1 element constitute the most important heading of the section that contains the element. The semantic meaning of an h1 tag is that it is used to identify the most important header of a specific web page or section.
There are two different practices that must be put into place if we are going to write semantic markup.
When writing semantic markup, we use HTML tags to tell browsers something about the contents of the element. In semantic markup, tags are no longer just a way to get content to show up on a web page in a human-readable format. The tags themselves become a way to tell a machine (whether a browser, a computer, a smartphone, or another smart device) something about the meaning of the content. To write semantic markup, we must use HTML tags correctly so that our markup is both human-readable and machine-readable.
In the past, it was common to use markup to define styles and to control web page layout. Heading levels were selected not based on hierarchy but based on the styles applied by the web browser, tables were used for web page layout rather than to organize tabular data, some HTML tags (such as frameset) were created for the express purpose of defining web page layout, and so forth. When we write semantic markup we can no longer select HTML elements based on visual presentation. Instead, we select HTML elements based on their semantic meaning, and then use CSS to define the visual presentation of our content. When writing semantic markup, the presentation of web page elements is kept completely separate and distinct from the markup of the content itself.
With those two practices in mind, we can define semantic markup in this way: Semantic markup is the use of a markup language such as HTML to convey information about the meaning of each element in a document through proper selection of markup elements, and to maintain complete separation between the markup and the visual presentation of the elements contained in the document.
Why is Semantic Markup Important?Good CSS can make bad markup invisible to the average website visitor. However, no amount of styling will make bad markup more meaningful to a computerized visitor such as a search engine web crawler, browser translation tools, or assistive technologies such as screen readers. According to Bruce Lawson, the semantic use of HTML elements “enhances accessibility, searchability, internationalization, and interoperability.” In other words, writing semantic markup is mandatory if you want your website to be accessible to all visitors, to achieve a high search engine ranking, to be available to visitors from around the world, and to interface effectively with other web services. Writing semantic markup is about creating web content that is both human and computer readable. When the web can be read equally well by both humans and computers, it becomes more accessible since computers are better able to analyze its contents, index it, deliver it, and developers are better able to tie different sources of information together into new web services.
How Do We Write Semantic Markup?We write semantic markup by selecting and using HTML tags properly, and by selecting tags that convey something about the information marked by the tags. There are elements in HTML that are semantic and elements that are non-semantic. Examples of non-semantic elements are div and span. These tags don't tell the computer anything about the meaning of the contents of the element. While useful, and fine to use in some cases, if a semantic tag is available and appropriate for a specific use, use it before resorting to a non-semantic tag. Many semantic tags come from the analysis of web page markup completed by companies like Google and Opera. What these companies have found is that many websites use id and class attributes to hint at the meaning of the contents of non-semantic elements. For example, they found lots of divs that looked like this: <div id="nav">, <div id="header">, and <div id="footer">. Findings like these helped the W3C identify and target new semantic tags to include in HTML5 such as: nav, header, footer, article, and aside. We can group the most common and important semantic elements into four categories:
In the past, the div element was the main way sections of a website were identified and grouped. However, with the release of HTML5, we have several new tags to work with that provide semantic meaning in addition to the grouping attributes offered by the div tag:
Review our Document Tutorial to learn more about using these semantic tags that add structure to a web page.
In the early days of the web it was common to see markup like this:
<style> .italics { font-style: italic; } </style> <p>Some paragraph content including one <span class="italics">italicized</span> word.</p>Today we (hopefully) wouldn't dream of doing something like that since the span element tells the browser and other computerized visitors absolutely nothing about the meaning or purpose of the text nested in the between the opening and closing tags. Rather than use the non-semantic span tag, we'd add em tags around the words that should appear in italics. By using em tags, visitors using screen readers or other computers accessing the content would understand that the tags were applied to add emphasis to the tagged content. The em element is just one example of how HTML tags add semantic meaning to textual content. Other examples include:
Our Fonts and Web Typography Tutorial provides a great deal more detail surrounding the proper use of these tags to assign semantic meaning to textual content.
HTML5 also includes three tags that identify the type of media served up between the tags. These tags serve a dual purpose. First, they signal to the browser the need to queue up a specific technical resource such as a video playback engine. Second, they assign semantic meaning to the content.
You can learn more about embedding audio and video elements in our HTML5 Media Tutorial. In addition, our article on the use of images on the web provides additional information on when to use the picture element and when to stick with the img element.
Several HTML elements are used to signal a correlation between multiple elements. For example, the use of an ordered list (ol) tells the browser that the items on the list are related to eachother and need to appear in a specific order. Other elements that are used to signal correlation between multiple elements include:
I hope this answer will be useful.
Thank you for asking this wonderful question.
The question is asking for the diference between semantic markup and html. Semantic markup is HTML that introduces meaning to a web page rather that just presentation.
But if the question is asking difference between semantic markup elements and non semantic markup elements then I would say
Semantic markup elements are elements that are both presentational and clearly define their contents. For example.
<h1> Tells you this is a heading (Meaning) and changes the look of your text (presentation)
and non semantic markup HTML element examples would be
<div><span> - These tells you nothing about their contents
semantic markup introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph or when use <strong> tag instead of <b> tag
