What are semantic HTML tags?

Introduction

Greetings! Today we'll discuss some of the semantic tags introduced in HTML5. These tags display content that can be consumed by users with assistive technology and make it easier to maintain websites.

Users with screen readers make up large portion of a website's potential audience, and using HTML5 tags with semantic meaning will ensure that portion of the audience can consume web content. Properly formatted semantic tags also boost a website's SEO ranking.

In addition to the experience of the user is the developer perspective, and semantic tags will make webpages easier to debug and maintain because the code will be more readable.

Before using a <div> tag, consider the content that will be contained within, and determine if there is a more meaningful tag that could be used in its place.

HTML5 Semantic Tags

Here is a list of some of the most useful semantic tags for structuring a webpage:

<nav>
<section>
<article>
<summary>
<details>
<header>
<footer>
<time>

`<nav>`

Use the <nav> tag to enclose a group of links that allow the user to navigate the webpage or website.

<nav>
   <a href="#">Sends the user to one part of the website</a>
   <a href="#">Sends the user to another part of the website</a>
   <a href="#">Sends the user to yet another part of the website</a>
</nav>

`<section>`

It is a general purpose standalone section that can be used to define the webpage structure. Each <section> should contain a heading.

<section>
   <h2>Create a heading here</h2>
   <p>The content that goes here will expand upon the heading</p>
</section>

<section>
   <h3>Create another heading</h2>
   <p>This content will expand upon its heading</p>
</section>

`<article>`

The content within <article> tags is self-contained, meaning it does not require the context of the rest of the web page to be understood. This tag is useful for displaying content such as blog posts or newspaper articles so it should have a heading.

<article>
   <h2>The name of the article</h2>
   <p>The content of the article</p>
</article>

<article>
   <h2>The name of the article</h2>
      <section>
         <h3>Title of the section</h3>
         <p>Article tags may contain section tags</p>
      </section>
      <section>
         <h3>Title of the section</h3>
         <p>Article tags may contain section tags</p>
      </section>
</article>

`<details>`

It creates a disclosure widget that toggles "open" to reveal information. The <details> tag requires a <summary> tag (which we will cover later) to provide a label for the widget.

<details>
   <summary>Label the details widget here</summary>
   <p>This content will not be visible until the user clicks the toggle</p>
</details>

`<summary>`

As previously mentioned, this tag works in conjunction with the content of the <details> tag to summarize. The content within the <summary> tag will show as the label for the disclosure.

<details>
   <summary>This content will be a visible label</summary>
   <p>This content will not be visible until the user clicks the toggle</p>
</details>

`<header>`

This tag is used to display introductory content. <header> may contain headings and navigation, but also title/author content. It can be used within any <section> tag of a webpage.

<header>
   <h1>A heading</h1>
      <p>Some text below the heading</p>
</header>

<header>
   <nav>
      <a href="#">Sends the user to one part of the website</a>
      <a href="#">Sends the user to another part of the website</a>
      <a href="#">Sends the user to yet another part of the website</a>
   </nav>
</header>

`<footer>`

Acts as a footer for section content. Usually contains copyright information and links to related webpages. The <footer> tag can be used at the bottom of a webpage or the bottom of any <section>.

<footer>
   <p>Footer content here</p>
</footer>

<footer>
   <a href="#">Sends the user to another part of the website or another website</a>
</footer>

<section>
   <footer>
      <p>Footer content here</p>
   </footer>
</section>

`<time>`

Useful for displaying a timestamp represented by the 24 hour clock, a specific date, or a duration of time. The <time> tag uses the datetime attribute to translate content to machine readable format, and the value of datetime must be properly formatted in order to be valid.

<p>Today's date is <time datetime="2022-1-16">January 16, 2022</time>.</p>

<p>Lunchtime is usually at <time datetime="13:30">1:30pm</time>.</p>

<h2>Lap Times:</h2>
   <ol>
      <li><time datetime="00:02:38.594">02:38.594</time></li>
      <li><time datetime="00:02:40.263">02:40.263</time></li>
      <li><time datetime="00:02:41.749">02:41.749</time></li>
   </ol>

Conclusion

This list is a sample of about 100 semantic HTML5 tags available. See MDN or W3 Schools for a complete listing and reference.

Thanks for reading!

For more WebDev Concepts, follow me here as well as Twitter and GitHub.

WebDev Concepts