Common Mistakes Beginners Make with HTML Semantics

Although it may seem like a small technical detail, HTML semantics define the true meaning of each part of your page. It helps the browser, Google, and assistive technologies understand the content — and this directly affects accessibility, SEO, and even code maintenance.

The problem is that beginners often repeat confusing patterns, use divs for everything, and ignore essential tags. This results in unstructured pages that are hard to navigate and poorly evaluated by search engines.

In this article, you'll learn clearly the most common mistakes and how to fix them using modern and meaningful semantics.

❌ 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">