This blog post will show readers the true importance of HTML semantic tags. This could include the types of data you would expect to see within these tags, when and where they should be used, and their importance in a document. But first, a little introduction to these tags.
What Are Semantic Tags?
Semantic tags in HTML are elements that clearly define the content and meaning of a page from both the developer’s and the browser’s perspectives. These tags describe their purpose and what they show on screen, which helps with screen readers. This type of markup improves SEO while also improving code readability and accessibility.
Examples of Semantic (and Non-Semantic) Tags
Semantic Tags
- <header>
- <article>
- <nav>
- <main>
- <section>
- <footer>
- <table>
- <h1>, <h2>…
Non-Semantic Tags
- <div>
- <span>
Why Use Semantic Tags?
If you read this blog thoroughly, you know they improve SEO, accessibility, and code readability. But first, what is SEO? Well, it stands for Search Engine Optimization, which is a way search engines (such as Google, Bing, Yahoo, etc.) find what websites have a good user experience, such as links working properly, images loading with no issues, readability, and semantic tags that help those websites by seeing “Does this website have a header? Does it have a title on each page? Do the text and background colors mix?” But beyond SEO, they help developers define sections of their code. For example, say a developer is creating a website using a flexbox. Instead of using <div> tags with classes and IDs (such as <div class=”footer”>), they could use <section>, <main>, and <header> to distinguish specific parts of the box and style those parts as they choose.
Semantic Tags and Their Uses
- <header>: Clearly defines landing content on a page or navigation
- <nav>: Specific to sets of navigation links
- <main>: Describes the primary content on a page; usually used once per page
- <section>: Clearly describes groups of related content, which can also be defined with <h1>…<h6> tags
- <article>: Defines independent, self-contained content, such as a blog
- <aside>: Describes content from the side of the main content, such as a sidebar
- <figure>: Groups media (such as images and videos) with a caption
- <footer>: Clearly defines a footer for a section or page (ex, Copyright of Company 2026)
- <time>: Clearly defines a time or date
- <table>: Defines a section of the document for tabular data, such as prices
- <h1>, <h2>…: Clearly define headings for specific sections: <h1> for titles, <h2> for sections, and so on