Before any framework, there is HTML. And the difference between HTML written by an amateur and by a professional is almost never in what shows up on screen: it's in the structure behind it. Using the right tag for each purpose is the first habit that separates those who just "make it work" from those who deliver something accessible, discoverable and easy to maintain.

The "div soup" problem

When we start out, it's tempting to solve everything with <div>. The result is what's called div soup: pages where everything is a <div> with a class describing what it should be. The browser renders it the same, but you've thrown away all the information about meaning.

<!-- Div soup: works, but says nothing -->
<div class="topo">
  <div class="menu">...</div>
</div>
<div class="conteudo">
  <div class="post">...</div>
</div>

The same HTML, now semantic

Semantic tags describe the role of each block. The screen reader, Google and the next dev who opens the file understand the page without guessing.

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Think of tags as a building's signage

A <div> is a room with no sign: to know what's inside, you have to walk in. Semantic tags are the signs — "Entrance", "Main content", "Exit". Anyone navigating in a wheelchair (or with a screen reader) relies on those signs to avoid getting lost.

Landmarks and screen readers

Tags like <header>, <nav>, <main> and <footer> become accessibility landmarks. A screen reader user can jump straight to <main> without hearing the whole menu every time. That's real navigation, not an aesthetic detail.

A classic case: use <button> for actions and <a> for navigation. A <div onclick> doesn't receive keyboard focus and isn't announced as a button — you'd have to manually rebuild behavior that comes for free.

SEO and maintenance

Search engines read the semantic structure to understand hierarchy and relevance. An <article> with a clear <h1> weighs more than a thousand nested divs. And in maintenance: reading <nav> is instant; reading <div class="nav-wrapper-2"> requires investigation.

ARIA: only when HTML isn't enough

ARIA is a set of attributes (like role and aria-label) that add meaning for assistive technologies. The first rule of ARIA is: don't use ARIA if a native tag solves it. A <button> is already a button; writing <div role="button"> is extra work to reproduce something that already existed.

The best accessibility is usually the kind you don't have to program: pick the right tag and the browser does the rest.

Interviews commonly ask you to explain the difference between <section> and <div>, or why <button> is better than <div onclick>. Day to day, it shows up whenever an accessibility test fails a component that "looked" right on screen.

Conclusion

Semantic HTML is not decoration: it's the foundation that delivers accessibility, SEO and readability at no extra cost. Start by choosing the tag for its meaning, reach for ARIA only when necessary, and you'll already be coding like a professional. The natural next step is mastering CSS to position all of this.