Introduction

By definition, semantics is the study of meaning. The concept of semantic HTML builds upon this principle by requiring that the structural tags, or elements, within an HTML document accurately and appropriately describe the meaning of their contents.

Once referred to as "table-less" design, a semantically correct HTML document has nothing to do with the number of <table> elements included on a given page. In fact, a truly semantic HTML document may contain any number of <table> elements, so long as they each accurately describe the content stored within them.

Example

Structuring HTML in this manner separates the presentation layer of a document from its contents. This is an incredibly powerful native feature of HTML that helps to reduce the amount of markup, encourage accessibility, and improve Search Engine Optimization (SEO). Let's use a real world example to demonstrate the advantages of semantic HTML:

<!-- Semantic -->
<h1 class="pageHeader">Page Header</h1>

<!-- Not so much -->
<div class="pageHeader"> 
  <b>
    <i>Page Header</i>
  </b>
</div>
  • Lighter Footprint -
  • Accessibility -
  • SEO -

When the Markup falls short

While most tags follow semantic principles, there are a handful of elements as in the example above, such as <b> for bold and <i> for italic, that are purely presentational in nature. Despite their existinece, tags such as this should not be used. The perception of bold and italic may hold significance for the average web user, however, they mean absolutely nothing to search engine bots, and even less to a blind person that has never seen text, let alone bold and italic text.