• Toll-free: 1-800-514-5796
  • In Montreal: 514-400-0852

Glossary Definition: Semantic HTML

An ever-growing glossary of SEO Jargon

What is Semantic HTML?

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.

Text-level HTML Semantics

In HTML, text-level elements such a <strong>, <em>, and <cite>, add semantic information within phrasing content, to explicitly indicate stress emphasis, strong importance, and citations, to name only a few examples.

Basic Markup Example

Semantic HTML
<p>There are five main benefits of using semantic HTML:</p>
    <li>Lighter code</li>
    <li>Maintainable code</li>
    <li>Search visibility</li> 

There are five main benefits of using semantic HTML:

  • Lighter code
  • Maintainable code
  • Accessibility
  • Search visibility
  • Future-proofing
Fig 1. A heading, a paragraph, and a list
Non-semantic HTML
There are five main benefits of using semantic HTML:
<img src="o.jpg">Lighter code<br>
<img src="o.jpg">Maintenance<br>
<img src="o.jpg">Accessibility<br>
<img src="o.jpg">SEO<br>
<img src="o.jpg">Future-proofing


There are five main benefits of using semantic HTML:

Lighter code
Maintainable code
Search visibility

Fig 2. Bold text, paragraphs, and line-breaks

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:

  • The heading is represented with an appropriate heading element (<h5>), instead of a (<b>) element, which conveys no importance
  • The paragraph (There are five main benefits of using semantic HTML) is represented with a paragraph element (<p>)
  • The related list items are grouped using (<li>) elements surrounded by an unordered list (<ul>), instead of line breaks (<br>) and bullet images (<img src="o.jpg">)

Sectioning HTML Semantics

With the recent progress of HTML5, several new elements are now available that add semantic meaning to entire sections of web pages, including <header>, <nav>, <footer>, and <aside>.

Semantic HTML5 layout, with structural HTML elements
Fig 3. Semantic HTML, using structural elements
Non-semantic HTML layout, with generic divs
Fig 4. Non-semantic HTML, using generic divs

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.

Another notorious page layout error is the use of HTML Tables—meant for tabular data—to define sections of a web page. Visual presentation should be controlled by CSS only, not HTML.

Beyond Semantic HTML: Structured Metadata

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
Share this:
Like this:
Back to Springboard SEO's glossary
Get a QuoteOr call us: 1-800-514-5796