Common Mistakes Beginners Make with HTML Semantics

Even though it may seem like just a technical detail, HTML semantics is what gives real meaning to every part of your page. It guides browsers, search engines, and assistive technologies to understand the structure of your content — directly influencing accessibility, SEO, crawler interpretation, contextual understanding, and even the experience of developers maintaining the project.

When semantics is ignored, problems appear quietly at first but become damaging over time. Many beginners end up creating real "div soups," mix heading levels out of order, skip essential tags like main, nav, article, and section, or use these tags only for visual purposes — without considering their structural role. This results in pages that are confusing for users and crawlers, lowering indexing quality and harming accessibility.

In addition, elements such as lists, tables, and figures are often ignored or used incorrectly, which reduces clarity, makes content harder to understand, and removes opportunities to build meaningful semantic blocks. Small mistakes accumulate over time until the entire page becomes hard to navigate, difficult to maintain, and poorly evaluated by search engines.

In this article, you will learn — in a simple and straightforward way — the most common mistakes made by beginners and how to fix them using modern, conscious, and strategic semantics. We will break down each flaw and show how to transform fragile and confusing pages into clean, clear, and well-structured layouts.

❌ 1. Using divs for everything (div soup)

One of the most well-known mistakes: turning the entire page into a bowl of <div>. The code works, but it completely loses meaning.

<!-- WRONG -->
<div>
  <div>
    <div>My title</div>
  </div>
</div>

<!-- CORRECT -->
<header>
  <h1>My title</h1>
</header>

❌ 2. Using heading tags out of order (jumping from h1 to h4)

Headings create the logical hierarchy of the page. When you "skip levels," screen readers and search engines interpret that the structure is broken.

<h1>Main title</h1>
<h4>Important subsection</h4>

<h1>Main title</h1>
<h2>Important subsection</h2>

❌ 3. Ignoring essential tags like main, nav, article, section

These tags don't just organize visually — they declare the role of each block on the page. They’re the map Google uses to understand context.

<!-- RIGHT -->
<main>
  <article>
    <h1>Complete guide to HTML semantics</h1>
  </article>
</main>

❌ 4. Using section just to "visually divide" content

A section is not a “styled div.” It needs a clear purpose, usually starting with a heading that represents its content.

<!-- WRONG -->
<section class="mb-10">
  <div>Random text without a title</div>
</section>

<!-- RIGHT -->
<section>
  <h2>About the project</h2>
  <p>This block has real meaning.</p>
</section>

❌ 5. Misusing lists, tables, and images

Many people use lists just to create indentation, tables for layout, or images without alternative text.

• Lists are for related items.
• Tables structure tabular data.
• Images without alt harm accessibility.

<!-- WRONG -->
<img src="/banner.png">

<!-- RIGHT -->
<img src="/banner.png" alt="Promotional banner for XPTO event">