What is semantic HTML? Why should we use it? How do you know if you are using semantic HTML and using it correctly? A brief explainer…
Some HTML tags have a more descriptive meaning than others. You could wrap your content in a <div> tag, but the div is generic and doesn’t really communicate anything. Instead, you could wrap your content in an <main> tag to clearly communicate this in the page’s main content.
Here are some common semantic tags:
- <h1> to <h6>: Heading tags establish a clear visual and logical hierarchy for your content.
- <figure> and <figcaption>: Used for images, diagrams, or charts, along with their captions.
- <header>: Represents the introductory content or navigation links of a page.
- <nav>: Defines a set of navigation links.
- <main>: Contains the primary content of the document. This should only be used once per page.
- <article>: Represents a self-contained composition in a page, like a blog post or news article.
- <footer>: Defines a footer for a document or section, typically containing copyright information, contact details, and site maps.
How do you check if you are using semantic HTML tags? There are many ways to do this. One of the simplest methods is to view your website’s source code.
- In Chrome, press the F12 key to open DevTools.
- On DevTools, click “Elements”. This will show you the HTML code used for your website.
- Hit Ctrl+F to search through this code. Search for some of the tags listed above.
- If they are found, hover over that tag so that Chrome highlights that part of the page.
- As you see which part of the page is highlighted, you can evaluate if that is an appropriate usage for this semantic HTML tag.
Okay, but why bother with semantic HTML? You can build out a fully functional site without any of these semantic tags.
- Website accessibility is the biggest and most important benefit. Screen readers, used by people with visual impairments, rely heavily on semantic HTML to navigate and understand a website. When you use semantic tags, you’re helping make it easier for these assistive technologies.
- Agentic AI visitors to your website are forced to figure out how to use the website. They will have an easier time doing so with cleaner HTML structures that explain the website’s structure. You can already see semantic HTML tags coming up in some reasoning chains.
- Semantic HTML provides better context about the content. There is limited but growing evidence that semantic HTML helps search engines and AI platforms understand its relevance to user searches. This has been suspected for years with <h1> tags.
Semantic HTML is not a requirement. It is not a ranking factor. It is not a guaranteed solution to earn citations. That said, what I would recommend is utilizing semantic HTML as you build out new parts of your website. Doing so has no real downside and only potential upside for human, bot, and agentic visitors.