It is tempting to build an entire page out of <div> tags. They are neutral, they do nothing surprising, and with enough classes you can style them into anything. But leaning on semantic HTML instead — tags that describe what content is, not just how it looks — quietly improves your accessibility, your SEO, and your own sanity when you return to the code months later.
What “semantic” means
A semantic element carries meaning. <nav> says “this is navigation.” <article> says “this is a self-contained piece of content.” <button> says “this is an interactive control.” A <div> says nothing at all. Browsers, screen readers, and search engines all read that meaning, so choosing the right tag hands them information for free.
The structural tags to reach for
Instead of a wall of divs, most pages map cleanly onto a small set of landmark elements:
<header> Site or section header
<nav> Primary navigation
<main> The main content (one per page)
<article> A standalone piece, like a blog post
<section> A thematic grouping of content
<aside> Related but secondary content
<footer> Footer for a page or sectionSwap your outer divs for these and the document practically documents itself. A new developer can read the tag names and understand the page’s shape without touching the CSS.
Why it helps accessibility
This is the part that matters most. Screen-reader users navigate by landmarks — they jump straight to the <nav> or skip to <main>. A page built from generic divs offers them none of those signposts. Using a real <button> instead of a clickable div means it is keyboard-focusable and announces itself correctly, with no extra ARIA attributes needed. Semantics give assistive technology a map.
Why search engines care
Search crawlers use structure to understand your content. A single, clear <h1> followed by a logical <h2>/<h3> outline tells Google what your page is about far better than styled divs ever could. Semantic markup and good SEO are the same discipline viewed from two angles.
The easy habit to build
You do not need to memorize a spec. Just pause before typing <div> and ask, “is there a tag that actually describes this?” Nine times out of ten there is. Adopt that one habit and your semantic HTML will improve steadily, making your pages friendlier to humans, assistive tech, and crawlers alike — all without a single extra line of CSS.
