10 Semantic Tags Introduced in HTML5

Adrian Jenkins
4 min readMay 20, 2021

--

Every website should use semantic tags to improve accessibility and SEO.

What is a semantic tag?

It is just a tag that has a specific meaning.

Although we commonly use <div> tag, in reality we should only use it whenever no semantic tags are available.

For example, if you are writing the main content of a website, wouldn’t it be more meaningful to wrap it inside a <main> tag over an empty meaningless <div>?

The answer is yes, of course we should use semantic tags!

Use semantic tag and attributes!

Why should I use semantic tags?

There are two major reasons to use semantic tags:

  • Accessibility: We should always strive to make our work accessible for all users. At least most of them.
  • Search Engine Optimization [SEO]: It simplifies the work of the search engine because it enhances communication. Using semantic tags in the right way makes the work easier for theses engines, so they reward you with a better ranking.

Header Tag

Represents a container for introductory content of any section of your section. You can use it as many times as you want as long as it represents the introductory content of something.

Example of header tag

Nav Tag

Represents a section of a page whose purpose is to provide navigation links.

Example of nav tag

Section Tag

Defines the section of documents such as chapters, headers, footers or any other sections. Section tag groups related content together.

Example of section tag

Article Tag

Represents a self-contained composition in a document, page, application, or site, which is independently distributable or reusable. It is valid to have many <article> tags in a single document.

Example of article tag

Aside Tag

Represents a portion of a document that is not directly related to the document’s main content.

Example of aside tag

Footer Tag

Represents a footer for its nearest sectioning content or sectioning root element. Meaning you can have as many footer as needed in your document.

Example of footer tag

Main Tag

Represents the dominant content of the <body> of a document. There should only be one <main> tag per document.

Example of main tag

Figure Tag

It is used to add self-contained content like illustrations, diagrams, photos or codes listing in a document. The figure, its caption, and its contents are referenced as a single unit.

Example of figure tag

Dialog Tag

Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or sub-window.

Example of dialog tag

Details Tag

Creates a disclosure widget in which information is visible only when the user clicks the “arrow”. Within this tag you can specify the text that the user will see before activating the “open” state.

Example of details tag

Bringing All Together

Code:

Code Snippet

Output:

Output

Of course you will need to add CSS rules to style it, but now we have semantic tags!

Final Thoughts

Although it is impossible to make a website 100% accessible, I think we have the responsibility to make our work accessible to most people.

This is just one of the first steps. There is so much more that we need to think in order to achieve this requirement.

In conclusion, you need semantic tags for accessibility and SEO reasons.

Hopefully, in that order.

:)

Resources

https://www.cssportal.com/html-tags/tag-figure.php

--

--