semantic HTML

A semantic element announces its role. An <h1> says “top-level heading,” <nav> says “navigation block,” <article> says “self-contained piece of content.” A styled <div> that only looks like a heading says nothing. MDN puts the rule plainly: HTML should represent the data, and how it looks is the job of CSS.

Why it matters beyond looks

Browsers turn your markup into an accessibility tree that screen readers and other assistive tech read. Landmark elements (<header>, <main>, <nav>, <footer>, <aside>) let those users jump straight to a region instead of tabbing through everything. That same structure gives machines a map of the page.

Be honest about the ranking angle. Google has said headings do not need to be in perfect semantic order to rank, so this is not a magic lever. What clean markup does is make content parseable. Search crawlers and AI answer engines lean on structure to work out what a passage is and whether it answers a query. Ordered headings, real lists (<ul>, <ol>), descriptive link text, and a proper <article> body are easier to extract and quote than a wall of nested divs.

<article>
  <h1>Semantic HTML</h1>
  <nav aria-label="On this page">...</nav>
  <p>...</p>
</article>

Semantic markup is also the base layer for structured data. It is hard to bolt schema onto a page whose HTML has no inherent structure to describe.