In this article · 7 sections
You can build a whole page with <div> tags, and it will look fine. But semantic HTML (tags that describe what content is) helps search engines understand your page, makes it usable with screen readers, and keeps code easier to maintain.
Before and after
Non-semantic:
<div class="top">
<div class="logo">Joboo Taxi</div>
<div class="menu">...</div>
</div>
<div class="content">
<div class="title">Ludhiana to Delhi Taxi</div>
</div>
Semantic:
<header>
<a href="/" class="logo">Joboo Taxi</a>
<nav aria-label="Main">...</nav>
</header>
<main>
<article>
<h1>Ludhiana to Delhi Taxi</h1>
</article>
</main>
<footer>...</footer>
Key tags and when to use them
| Tag | Use for |
|---|---|
<header> |
Site or section header (logo, intro) |
<nav> |
Main navigation menus |
<main> |
The unique main content; one per page |
<article> |
Self-contained content: a blog post, product card, review |
<section> |
A themed group of content with a heading |
<aside> |
Related side content: sidebars, callouts |
<footer> |
Footer of the page or a section |
<figure> + <figcaption> |
Images with captions |
<time datetime="2026-10-29"> |
Dates |
<address> |
Contact information |
Headings: the most important part
- One
<h1>describing the page <h2>for main sections,<h3>inside them; don't skip levels for styling- Never use headings just to make text big; use CSS instead
Buttons vs links
<a href>navigates to another page<button>does something on the page (submit, open menu)
Using a <div onclick> instead of a button breaks keyboard access. See web accessibility basics.
Forms
Always connect labels to inputs:
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" required>
SEO benefits
Search engines can better identify main content, navigation and headings, which supports featured snippets and AI answers. Combine semantic HTML with good titles and schema. See title tags and meta descriptions.
FAQs
Does semantic HTML directly improve rankings?
It's not a magic ranking factor, but it helps Google understand content and improves accessibility and UX, which matter.
Can I still use div?
Yes, for layout wrappers with no special meaning.
Was this article helpful?
Your answer helps us improve our guides