What Is Semantic HTML? Tags, Examples, and Why It Matters4 min read

Semantic HTML uses elements that describe what content means, such as <nav> for navigation and <article> for a self-contained piece of content. A <div> can group the same content visually, but it does not convey that purpose. In this article, we’ll cover what semantic HTML is, how it differs from regular HTML, and why it’s so important for frontend developers.

What is semantic HTML?

Semantic HTML is ordinary HTML used for its intended meaning. Elements such as <main>, <nav>, <button>, and <form> describe the role of content or controls. Generic <div> and <span> elements have no built-in meaning; they are still useful when no more specific element fits.

Semantics are not limited to page-layout tags. Headings establish a hierarchy, lists identify related items, and a real <button> provides built-in keyboard behavior that a clickable <div> does not.

Semantic HTML tags and elements: common examples

• <header>: introductory content for a page or section; it does not always mean the site-wide header.
• <nav>: a major group of navigation links.
• <main>: the dominant content of the document. A page should generally have one visible main landmark.
• <article>: a self-contained item, such as a blog post or news story.
• <section>: a thematic section, typically with a heading. Do not replace every <div> with a <section>.
• <aside>: related but secondary content.
• <footer>: footer information for a page or section.
• <button>: an action; use <a href="..."> instead when the user navigates to another URL.

Semantic vs. non-semantic HTML: a practical example

Both snippets can be styled as a navigation bar, but only the second exposes a navigation landmark and a real list of links. The element describes the job; CSS still controls the look.

Generic markup

<div class="site-navigation">
  <div><a href="/guides">Guides</a></div>
  <div><a href="/examples">Examples</a></div>
</div>

Semantic markup

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/guides">Guides</a></li>
    <li><a href="/examples">Examples</a></li>
  </ul>
</nav>

Choose <nav> for a significant navigation group, not every set of links. If a page has several navigation landmarks, give each a distinct accessible label.

Why is semantic HTML important?

1. Accessibility: Native elements expose useful roles, landmarks, and behaviors to assistive technology. A heading hierarchy and meaningful controls help people navigate. Semantic elements do not replace accessible names, alt text, labels, focus management, or testing.
2. Search understanding: Clear headings, readable text, descriptive links, and appropriate HTML help search engines interpret a page. Semantic tags alone are not a ranking shortcut. Google advises developers to use semantic HTML, but relevance and overall page quality still matter.
3. Maintainability: A teammate can read <nav> or <article> and understand its purpose faster than an anonymous wrapper.
4. Browser behavior: Native elements such as buttons, forms, and links provide familiar keyboard and interaction behavior without rebuilding it from scratch.

How to use semantic HTML in React

React component names do not determine the HTML a browser receives. A component called Header might render a <div>, while a component called Layout can render an actual <header>. Check the output in the browser, not just the JSX component name.

function ArticleCard({ title, href }) {
  return (
    <article>
      <h2><a href={href}>{title}</a></h2>
    </article>
  );
}

Use native HTML first, then add ARIA where it supplies information the native element does not. For example, <nav aria-label="Main navigation"> distinguishes one navigation area from another; role="navigation" is unnecessary on <nav>.

Check semantic HTML in AI-generated code

Whether you write markup by hand or generate it with AI, inspect the rendered HTML before shipping. Look for one clear main content area, a logical heading order, genuine links and buttons, labeled forms, and images with appropriate alternative text. Keep generic wrappers for styling when they are the right tool.

You can start a page in Anima Playground and review or refine its code. For a deeper reference on choosing page-structure elements, see MDN’s guide to structuring documents.

Semantic HTML checklist

• Choose an element for its meaning, not its default appearance.
• Use headings in a logical order and <section> for genuine sections.
• Use links for navigation and buttons for actions.
• Inspect the browser’s rendered DOM and test keyboard and screen-reader navigation.
• Use <div> or <span> when no semantic element fits.