How to Write Semantic HTML That Stays Useful
Choose elements for their meaning, build a clear document outline, and make your page easier to navigate, edit, and reuse.
The short version
Use the element that describes the job of the content before reaching for a generic div.
Start with meaning, not appearance
Semantic HTML describes what a piece of content is. A heading is a heading, a navigation block is navigation, and a self-contained story is an article. CSS can change how any of those elements look; the markup should keep describing the content when the styles are removed.
That separation pays off everywhere. Screen readers can expose useful landmarks, search engines can understand the page more reliably, and future editors can change a section without reverse-engineering a wall of generic containers.
- Use header, main, nav, aside, and footer for major page regions.
- Use article for content that could stand on its own.
- Use section when the group has a meaningful heading.
- Use button for actions and a for navigation.
Build the smallest honest structure
Do not replace every div with a semantic element. A div is correct when a wrapper has no meaning beyond layout or styling. The goal is an honest outline, not the maximum possible number of named elements.
<header>
<nav aria-label="Primary">…</nav>
</header>
<main>
<article>
<h1>Quarterly product review</h1>
<section aria-labelledby="results">
<h2 id="results">Results</h2>
…
</section>
</article>
</main>
<footer>…</footer>Review the page without CSS
A useful final check is to disable styles or inspect the accessibility tree. The reading order should still make sense, every region should have a clear purpose, and interactive controls should still identify what they do.
HTML Docs preserves this kind of structure when a page is imported, which makes region-level editing and review much easier than working with one opaque HTML blob.