Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance.
Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content. In order to effectively represent the meaning of content, appropriate HTML elements are chosen according to inherent meaning, rather than how they appears visually on a rendered web page.
In HTML, text-level elements such a
<cite>, add semantic information within phrasing content, to explicitly indicate stress emphasis, strong importance, and citations, to name only a few examples.
In this simple example, both blocks of code render the elements the same way, visually. Additionally, both will validate as strict HTML, as there are no illegal elements or syntax errors. However, the content in fig.1 adds machine-understandable context and significance to each individual piece of content:
<h5>), instead of a (
<b>) element, which conveys no importance
There are five main benefits of using semantic HTML) is represented with a paragraph element (
<li>) elements surrounded by an unordered list (
<ul>), instead of line breaks (
<br>) and bullet images (
With the recent progress of HTML5, several new elements are now available that add semantic meaning to entire sections of web pages, including
Figure 3 is an example of a web page mock-up using appropriate semantic elements to represent common sections of the layout.
Figure 4 uses generic
<div> elements to represent the same sections that fig 3 uses structural elements for. Although the two pages have the same look and feel, divs are semantically void containers that add no context to their contents.
To achieve more precise semantics than those possible with HTML alone, several technologies exist that build upon HTML syntax to represent objects, such as organizations, events, people, and products. Formats such as Microdata, RDFa, and Microformats are already used by search engines to extract meaningful data from web pages as part of the next generation of the Web: The Semantic Web.See also: The complete list of HTML elements Back to Springboard SEO's glossary