Semantic HTML: what it is, tags and how it improves SEO

Semantic HTML is writing HTML (HyperText Markup Language) with tags of inherent meaning — such as <header>, <nav>, <main>, <article> and <footer> — that describe the role of each block. This clarity improves accessibility, guides screen readers and helps search engines index the page.

• What is HTML?
• What is semantic HTML?
• Why does semantic HTML improve SEO and accessibility?
• What are the main semantic structure tags?
• How to mark emphasis and quotes with semantic text tags?
• What does a complete semantic HTML page look like?

What is HTML?

HTML (HyperText Markup Language) is the foundation of most web pages. It is a markup language that structures internet content through elements, or "tags", that define text, images, links and media.

Each tag describes the function of an element on the page and how the browser should interpret it. It is HTML that organizes online content and makes it readable and accessible within the browser. It forms, together with CSS and JavaScript, the triad of modern web development.

What is semantic HTML?

Semantic HTML is the markup that attributes meaning to elements, not just appearance. Instead of using <div> for everything, you choose tags that say what the content represents: a header is a <header>, a menu is a <nav>, an article is an <article>.

The emphasis on semantics gained strength with HTML5, which introduced dedicated structural elements. While traditional HTML focuses on how content is visually organized, semantic HTML describes what it means. This benefits two audiences at once: developers, who read the code faster, and machines — screen readers and search engines — that interpret the content more precisely. Just as CSS controls the visual presentation of the frontend, semantic HTML takes care of the structure's meaning.

Why does semantic HTML improve SEO and accessibility?

Semantic HTML improves SEO and accessibility because it makes the page structure explicit. Search engines use the heading hierarchy and region landmarks (<main>, <nav>, <header>) to understand the relative importance of each block, while assistive technologies use these same tags to enable fast navigation.

The numbers confirm the relevance of this structure. According to the Web Almanac 2024, by HTTP Archive, 70% of desktop pages use the <h1> tag and 71% use <h2>, indicating that the semantic heading hierarchy is already a dominant practice. The same report points out that the median of mobile sites has descriptive alternative text (alt) on 58% of images, up from 54% in 2022.

On the accessibility side, the WebAIM Screen Reader User Survey #10 (2024) shows that 88.8% of respondents consider headings useful for navigation, making them the predominant method of locating content. Landmarks (region markers) are used always or frequently by 31.7% of users — an extra reason to mark <main>, <nav> and <header> correctly. Good structure practices connect directly with usability heuristics like Nielsen's.

What are the main semantic structure tags?

The semantic structure tags organize the skeleton of the page. Each one delimits a type of block with a well-defined role, which helps both the developer and browsers and search engines. The table below summarizes the most important ones:

<header> and <section>: headers and sections

The <header> element defines the header of a page or section and may contain titles, images and navigation lists. The <section> element delimits content sections, usually accompanied by a title.

See a simple example of <header> usage:

<header>
  <h1>Título da página</h1>
  <h2>Subtítulo da página</h2>
</header>

See a simple example of <section> usage:

<section>
  <h2>Subtítulo da página</h2>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
    <hr/>
  </div>
</section>

<main> and <article>: main content

<article> is used when you present content that makes sense on its own, such as a blog post. It is a good practice to associate each <article> with a title. The <main> element holds the most relevant content of the page, and ideally there should be only one <main> per document.

See an example of <article> usage:

<article>
  <h2>Título do artigo 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
</article>
<article>
  <h2>Título do artigo 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
</article>

See an example of <main> usage:

<main>
  <h2>Título</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
  <article>
    <h3>Subtítulo</h3>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum...</p>
  </article>
</main>

<nav> and <a>: navigation and links

The <nav> element groups navigation links, improving the user experience and indexing by search engines. Inside <nav>, the <a> element creates the actual links, allowing transit between pages or sections of the site.

See a simple example of <nav> and <a> usage:

<nav>
  <a href="#portfolio">Portfólio</a>
  <a href="#projetos">Projetos</a>
  <a href="#contato">Contato</a>
</nav>

<aside>: complementary content

When you have additional information that enriches the main content but is not essential to understand it, use the <aside> tag. It is useful for suggested complementary reading or ads.

See a simple example of <aside> usage:

<aside>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </nav>
</aside>

<figure> and <figcaption>: images with caption

To add images or graphics semantically, HTML5 introduced the <figure> tag. To describe these images, use <figcaption>, nested inside <figure>.

See a simple example of <figure> usage:

<figure>
  <img src="http://meusite.com.br/assets/imagem.jpg" alt="Imagem">
</figure>

Example of <figure> usage with <figcaption>:

<figure>
  <img src="http://meusite.com.br/assets/imagem.jpg" alt="Imagem">
  <figcaption>Figura 1. Imagem</figcaption>
</figure>

<footer>: footer

<footer> is generally used at the bottom of a page to provide information such as authorship, copyright and additional links. It is an important part for adding credibility and transparency to the content.

Example of <footer> usage:

<footer>
  <p>Escrito por Henrico Piubello</p>
  <p>Publicado em 11/09/2023</p>
</footer>

How to mark emphasis and quotes with semantic text tags?

Beyond structure, semantic HTML also gives meaning to running text. While structure tags organize blocks, text tags communicate intent — emphasis, importance, quotation or date — to screen readers and search engines.

<em> and <strong>

<em> emphasizes a passage, while <strong> indicates importance. They are preferable to <i> and <b>, which deal only with appearance.

<p>Você <em>tem certeza</em> que deseja encerrar a aplicação?</p>

<cite>, <q> and <time>

If you quote an external source, the <cite> tag identifies the origin, usually together with <q>, which presents the quotation. The <time> element, with the datetime attribute, standardizes the representation of dates.

<p>
  <q>Lorem ipsum dolor sit amet, consectetur</q> - <cite>http://br.lipsum.com/</cite>.
</p>

<time datetime="2023-09-11">11/09/2023</time>

What does a complete semantic HTML page look like?

Bringing the previous tags together, you get a page whose structure is self-explanatory. The example below shows CodeCrush using region landmarks from beginning to end, in the typical architecture of a modern web development project:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de HTML Semântico - CodeCrush</title>
</head>
<body>
  <header>
    <h1>CodeCrush</h1>
    <nav>
      <ul>
        <li><a href="/">Página Inicial</a></li>
        <li><a href="/en/sobre">Sobre Nós</a></li>
        <li><a href="/en/contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Artigo Principal</h2>
      <p>Este é o conteúdo principal do CodeCrush.</p>
      <time datetime="2023-09-11">Publicado em 11 de setembro de 2023</time>
    </article>

    <aside>
      <h3>Barra Lateral</h3>
      <p>Informações adicionais podem ser encontradas aqui.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2023 CodeCrush. Todos os direitos reservados.</p>
  </footer>
</body>
</html>

The explanatory comments for each element:

• <header>: document header, usually with logo and navigation.
• <nav>: navigation section.
• <ul>: unordered list to group the navigation items.
• <li>: list item.
• <main>: main content of the document.
• <article>: autonomous and self-explanatory content, such as an article or post.
• <aside>: related content, separate from the main content.
• <time>: date or time, useful for indicating the publication date.
• <footer>: document footer, with copyright and final notes.

Conclusion

Swapping a generic <div> for semantic tags costs no extra effort and pays dividends on three fronts: more readable code, accessible pages for those using screen readers and content easier to index. With AI-powered search valuing clear and machine-readable structure, writing semantic HTML has gone from a best-practice detail to a competitive advantage. Next time you mark up a page, leave <div> for what truly has no meaning — and use the right tag for everything else.