Why Use Semantic HTML?

What Is Semantic HTML and How Should You Use It

What Is Semantic HTML

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs are and browsers know how to display them. In HTML4, tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any additional meaning.

Examples of semantic HTML tags include the header tags <h1> through <h6>, <blockquote>, <code> and <em>. There are many more semantic HTML tags.

Why Care About Semantics

The benefit of writing semantic HTML stems from the goal of a web page—to communicate. By adding semantic tags to your document, you provide additional information about the document, which aids in communication.

Semantic HTML tags provide information about the contents of those tags that goes beyond just how they look on a page. Text that is enclosed in the <code> tag is immediately recognized by the browser as some type of coding language. It is entirely possible that some user agent could create an entire code library just by reading a website's <code> snippets.

In a less futuristic scenario, using semantic tags gives you many more hooks for styling your content. Perhaps today you prefer to have your code samples display in the default browser style, but tomorrow, you want to call them out with a gray background color, and later you want to define the precise mono-spaced font family or font stack to use for your samples.

If you have all your code samples defined with the semantic <code> tag, this is easy to do.

Use Semantic Tags Correctly

When you use semantic tags to convey meaning rather than presentation, you need to be careful that you don't use them incorrectly simply for their common display properties. Some of the most commonly misused semantic tags include:

  • blockquote
    Some people use the <blockquote> tag for indenting text that is not a quotation. Use CSS margins instead.
  • p
    Some web editors use <p>&nbsp;</p> to add extra space between page elements, rather than defining actual paragraphs. As with indenting, you should use the <margin> style property to add space.
  • ul
    Like blockquote, enclosing text inside a <ul> tag indents that text in most browsers. This is both semantically incorrect and invalid HTML, as only <li> tags are valid within a <ul> tag. Again, use the <margin> style to indent text.
  • h1–h6
    The header tags can be used to make fonts bigger and bolder, but if the text is not a headline, it should not be inside a headline tag. Use the <font-weight> and <font-size> CSS properties instead.

By using HTML tags that have meaning, you create pages that impart more information than by just surrounding everything with <div> tags. 

Which HTML Tags Are Semantic

While nearly every HTML4 tag and all the HTML5 tags have a semantic meaning, some tags are primarily semantic in nature.

 HTML5 has redefined the meaning of the <b> and <i> tags to be semantic. The <b> tag doesn't convey extra importance, but rather text that is typically rendered in bold. The <i> tag also doesn't convey extra importance or emphasis, but rather defines text that is typically rendered in italics.

Semantic HTML Tags

<abbr>Abbreviation
<acronym>Acronym
<blockquote>Long quotation
<dfn>Definition
<address>Address for author(s) of the document
<cite>Citation
<code>Code reference
<tt>Teletype text
<div>Logical division
<span>Generic inline style container
<del>Deleted text
<ins>Inserted text
<em>Emphasis
<strong>Strong emphasis
<h1>First-level headline
<h2>Second-level headline
<h3>Third-level headline
<h4>Fourth-level headline
<h5>Fifth-level headline
<h6>Sixth-level headline
<hr>Thematic break
<kbd>Text to be entered by the user
<pre>Pre-formatted text
<q>Short inline quotation
<samp>Sample output
<sub>Subscript
<sup>Superscript
<var>Variable or user defined text