Semantic HTML means choosing elements for what the content is, not for how it looks. A navigation menu goes in <nav>, a blog post goes in <article>, a button is a <button>. It sounds obvious, but many websites are still built almost entirely from <div> and <span>.
Let us be clear about expectations. Semantic HTML is not a secret ranking trick. What it does is make your content easier for search engines to parse and much easier for assistive technology to use. Good structure, readable content and accessible pages are a solid base for SEO – and the accessibility gains alone make it worth doing.
If the elements are new to you, start with the HTML Semantic Elements lesson.
Who reads your HTML?
- Browsers use it to apply default behaviour – a
<button>is focusable and works with the keyboard; a<div>is not. - Screen readers list headings, landmarks and links so users can jump around the page. A page without them is like a book with no chapters or index.
- Search engine crawlers read the text, headings, links, titles and image alt text to understand what the page covers and which parts are the main content.
- Reader modes and other tools use
<article>and<main>to find the core content and drop the clutter. - Other developers – including you, six months later – read
<footer>far faster than<div class="ftr-wrap-2">.
Before and after
Here is a typical “div soup” layout for a page about a homestay:
<div class="header">
<div class="logo">Coconut Grove Homestay</div>
<div class="menu">
<div onclick="go('/rooms')">Rooms</div>
<div onclick="go('/contact')">Contact</div>
</div>
</div>
<div class="content">
<div class="title">Rooms near Auroville</div>
<div class="text">Quiet rooms ten minutes from the beach...</div>
</div>
<div class="footer">© Coconut Grove Homestay</div>Visually it may look fine. But there is no heading, the menu items are not links (crawlers may not follow them and keyboard users cannot reach them), and nothing marks the main content. Here is the same page with meaningful elements:
<header>
<a href="/" class="logo">Coconut Grove Homestay</a>
<nav aria-label="Main">
<ul>
<li><a href="/rooms/">Rooms</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Rooms near Auroville</h1>
<p>Quiet rooms ten minutes from the beach...</p>
</article>
</main>
<footer>
<p>© Coconut Grove Homestay</p>
</footer>The CSS can produce an identical look. The difference is entirely in what machines and assistive technology can understand.
The semantic HTML elements that matter most
| Element | Use it for | Why it helps |
|---|---|---|
<title> | Unique page title in the head | Often used as the headline in search results and browser tabs |
<h1>–<h6> | Headings in a logical outline | Shows the topic and structure; screen reader users navigate by headings |
<main> | The one main content area | Marks the core content; enables “skip to main content” |
<nav> | Major navigation blocks | Landmark for screen readers |
<article> | Self-contained content such as a post or product | Shows what can stand on its own |
<section> | A themed group with its own heading | Groups related content |
<header> / <footer> | Intro and closing content of the page or an article | Separates boilerplate from content |
<aside> | Related but secondary content | Signals it is supplementary |
<a href> | Navigation to another URL | Crawlable links; descriptive anchor text explains the target |
<button> | Actions on the same page | Keyboard and screen reader support for free |
<img alt> | Images with a text alternative | Describes images to screen readers and search engines |
<time datetime> | Dates and times | Machine-readable dates on posts and events |
Headings: the most important structure
Headings create the outline of your page. Follow these rules:
- Use one
<h1>that describes the page topic – usually matching the page title. - Use
<h2>for main sections and<h3>for sub-sections inside them. - Do not skip levels for styling reasons (an
<h2>followed directly by an<h4>). If you want a smaller heading, change the size with CSS. - Do not use headings just to make text big and bold. A promotional line like “Free Wi-Fi!” is usually a paragraph with a class.
- Write headings that make sense out of context. “Room prices in Puducherry” is better than “Details”.
Tip: Quick test: read only your headings from top to bottom. If they work as a table of contents, your structure is good.
Links and buttons: get these right
Use <a href> for anything that takes the user to another page or URL. Search engines discover pages by following href values; a click handler on a <div> is not a link to them. Use <button> for actions such as opening a menu, submitting a form or adding to a cart.
Write descriptive link text. “Read our cancellation policy” tells both users and crawlers what is on the other side. “Click here” tells them nothing. More in the HTML Links lesson.
Images and alt text
Give every meaningful image an alt attribute that describes what matters in context: alt="Double room with a balcony overlooking the garden". For decorative images, use an empty alt="" so screen readers skip them. Do not stuff alt text with keywords – write for people. Also set width and height attributes so the browser reserves space and avoids layout shift, which helps your Core Web Vitals. See HTML Images.
Lists, tables and forms
- Groups of similar items – features, steps, menu links – belong in
<ul>or<ol>. Screen readers announce “list, 5 items”, which helps orientation. - Use
<table>only for tabular data, with<th>header cells and a<caption>. Never for page layout. - Every form field needs a
<label>connected withforandid. Placeholder text is not a label. See HTML Forms.
The head section
Semantic structure in the body works together with metadata in the head. Each page should have a unique <title>, a helpful <meta name="description">, the correct lang attribute on <html> (for example lang="en-IN" or lang="ta") and a viewport tag. The HTML Head, Meta and SEO lesson covers each one.
Common mistakes
- Wrapping every block in
<section>. A section without a heading usually should be a<div>. - Multiple
<main>elements visible at once – there should be only one. - Adding ARIA roles to elements that already have them, such as
<nav role="navigation">. Native HTML first; ARIA only when no element fits. - Hiding text with CSS to target keywords. Search engines treat hidden keyword text as spam.
- Using
<br>tags to create spacing instead of CSS margins.
A quick audit checklist
- Open the page with CSS turned off (or in reader mode). Does it still read in a sensible order?
- Check headings with a browser extension or the Accessibility panel in DevTools.
- Press Tab through the page. Can you reach every link and button? Can you see where focus is?
- Run Lighthouse in Chrome DevTools and fix the Accessibility and SEO items it reports.
- Validate the HTML with the W3C Markup Validation Service.
Semantic HTML is the foundation for accessible design. Continue with Web Accessibility Basics (WCAG).
Frequently asked questions
Does semantic HTML directly improve Google rankings?
It is not a ranking switch on its own. It helps search engines understand your content and structure, and it improves accessibility and usability, which support SEO overall. Content quality still matters most.
Can a page have more than one h1?
HTML allows it, but one clear h1 per page is the simplest and most widely recommended approach, because it gives users and tools an obvious main topic.
What is the difference between section and article?
An article is self-contained and would make sense on its own, like a blog post or product card. A section is a themed part of something larger and should normally have a heading.
Is semantic HTML the same as structured data?
No. Semantic HTML describes the role of each part of the page using normal elements. Structured data is extra, machine-readable information (often JSON-LD using the schema.org vocabulary) that describes things like a business address, an event date or a recipe. They work well together, but structured data does not replace good HTML, and good HTML is needed even if you never add structured data.
Do I need to rewrite my whole site to be semantic?
No. Start with the parts that give the most value: one main landmark, a clear heading outline, real links and buttons, labelled form fields and alt text on images. These changes are usually small and can be done page template by page template.
Is div bad?
No. Div is the right choice for grouping purely for styling or layout when no semantic element fits. The problem is using div when a better element exists.
