10 Semantic Tags Introduced in HTML5

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

What is a semantic tag?

Why should I use semantic tags?

There are two major reasons to use semantic tags:

  • 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 Snippet

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.





Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store