Semantic HTML 5: Sectioning Content

2019-06-14

Semantic HTML (or semantic markup) is an HTML feature that uses descriptive tags to label the HTML document meaningfully. A couple of semantic tags you've probably encountered from HTML 4 are:

  • Inline Level Elements: a, button, strong ...and more!
  • Block Level Elements: blockquote, header, footer ...and more!

These are the obvious ones, but what about the semantic markup focused on the web layout introduced in HTML 5? They do exist and need to be used more often. See section Sectioning Content with Semantic HTML Inside the <body> Tag below.

In a recent Wes Bos' tweet, he linked to a Reddit post about beginner web developers' lack of understanding of HTML and CSS. In my own blog, I decided to write this blog post to record what I've learned about web development so far, including semantic HTML.

In this post:

  • Tools
  • Why & When to Use Semantic Markup
  • Sectioning Content with Semantic HTML Inside the <body> Tag
  • Conclusion

Tools

To check if a website's HTML has good semantic markup, use this W3C Markup Validation Service.

Why & When to Use Semantic Markup

If div tags dominate in your HTML document, then it may be hard to find what you need. The Smashing Magazine article Table Layouts vs. Div Layouts: From Hell to... Hell? does a wonderful job of showing the HTML story of the tags table -> div. These tags are meaningful, but not for layouts.

  • table tags => for tabular data
  • div tags => general purpose use

The obvious benefit is good semantic HTML is good search engine optimization (SEO) for a website. If you want a website to be found, use semantic HTML so the search engine bots can find the website. This is a good article that goes in depth on SEO: Search Engine Land - The SEO Advantages of Machine-Readable HTML5 Semantic Markup.

The world of semantic HTML has breadth and depth. WHATWG - HTML Living Standard, a group that helps create new features in HTML, has a detailed breakdown of many, many semantic HTML, which is still up to us what to include, we should include in our markup:

  • Metadata content
  • Flow content
  • Sectioning content * I'll be focused on Sectioning Content in my post
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

Sectioning Content with Semantic HTML Inside the <body> Tag

When using semantic markup tags, make sure to check whether the semantic tag is supported in the browser you test.

The below should be in between the body tags. Here is a snapshot of selected semantic elements should be ordered in a hierarchy:

<body>
  <header>
    <nav></nav>
    <menu>
      <menuitem></menuitem>
    </menu>
  </header>

  <main>
    <section>
      <aside></aside>
      <article>
        <h2><h2>
        <!-- and other header tags -->
        <details></details>
          <summary></summary>
        <figure></figure>
          <figcaption></figcaption>
        <mark></mark>
        <time></time>
        <!-- ...and a bunch other children tags for article you can include -->
      </article>
    </section>
  </main>

  <!-- ...repeat everything in the <section> tags as needed -->

  <footer></footer>
</body>

Before building the website, it is a good idea to section content first and figure out which semantic markup tags would be useful to a project.

Conclusion

Use semantic HTML / markup for:

  • Accessiblity - Use descriptive, meaningful semantic tags for screen readers.
  • Readability - When you're in your HTML document, you'll know where content exists. Do not use div tags and compensate for this general use, non-descriptive tag with the class attribute.
  • Searchability - If you want your website found in a search engine, use semantic markup.

Sources