HTML Semantic Tags: How to Use Semantic Markup

Semantic markup is a part of the HTML5 update to HTML that allows you to change your underlying site code so that tag names relate to the function or content that the tag is being associated with. Adding semantic tags will help modernize your pages. As an example, in older versions of HTML, you might identify a footer on a page using a div tag with an id attribute as such:

<div id="article">My article</div>

While this worked, semantic markup makes this much cleaner. In HTML5, you could do this with the following code:

<article>My Article</article>

A typical web page in HTML might include the following semantic tag structure.

Figure 1. Semantic tag structure

The use of semantic tags such as header, section, article, and footer make for cleaner code without the use of div tags with varying IDs. HTML5 provides many standard tags that can be used, which include the header and footer tags mentioned above. The header tag can be associated to a web page, an article, or other elements that a user tends to see when they come to a web page. On the other hand, a footer tag typically defines items that are located at the bottom of a page. Footers can include things such as a copyright, publish date, and possibly links to site information such as contacts, licensing, and more.

You can also use standard semantic tags for articles and sections of a page. A section  tag can be used for identifying sections of a web page or article. In some cases, a more specific tag can be used such as the article or aside tags.

The article tag should be used when you have a block of content that stands on its own and is not really related to the other content on the page. The article tag is also good to use if you have content on a page that you plan to syndicate. If you have a sidebar on a web page, then you can enclose its content with an aside tag. If you have content on a page that is no related to other areas of the page, then you should most likely stick with a div tag.

Many pages have navigation that can also be identified with a semantic tag. Using the nav tag, you can surround the navigation area on your page. This might be within with a header tag or other location on your page. In general, you should use the nav tag around the overall navigation on a page, not around each item within the navigation. For example, on the HTMLGoodies page, the opening nav tag would be displayed before the “INTRODUCTION” navigation text that you can see to the right, and the closing tag would be after the “mentors” link:

<nav>
<ul>
  <li><a href="/introduction">Introduction</a></li>
  <li><a href="/">home</a></li>
  <li><a href="/getting-started/">about</a></li>
  <li><a href="/javascript/intro-to-javascript-template-engines/">non-technical introduction</a></li>
…
  <li><a href="#">Need Help?</a></li>
  <li><a href="http://www.webdeveloper.com/forum">discussion boards</a></li>
  <li><a href="/getting-started/htmlgoodies-community-mentors-mentor-faq/">mentors</a></li>
</ul> 
</nav>

There are several additional semantic tags that can be used to help structure your HTML markup. These include address, details, hgroup and summary.

The address tag can be used for identifying address information such as contact information:

<address> 
Bradley Jones<br />
123 Some St. <br />
My Town, IN 12345-1234<br />
b.radj.ones@gmail.com
</address>

The details tag can identify a section of code for providing additional details related to the other text around it. A summary tag can be used to create a heading for the details tag. When used together, clicking the details tag. The following code shows the detail and summary tags:

<details>
<summary>John Doe</summary>
<p>This could be a biography for John Doe that is displayed (or hidden) when the summary tag is clicked. </p> 
</details>

When this code is displayed in a browser that supports HTML5 fully, you’ll see the summary text displayed as shown in the following figure that is using the Chrome browser:

Figure 2. Summary text

When you click on John Doe, the details expand as shown in the following image:

Figure 3. Expanded details

Summary

With HTML5, semantic tags have been added to help make your HTML markup cleaner and clearer. In this article, you were presented with the core structural tags that help organize the section sand layout areas of your web pages. In general, using semantic markup to better identify your code will not only help in making the underlying code easier to follow, it will also help indicate to the search engines that your code is more modern.