HTML Semantic Guide | Nikhil Learn Hub

What is Semantic HTML?

Definition:

Semantic HTML uses elements that describe their meaning and role in the page structure, such as <header>, <nav>, <main>, <article>, and <footer>. Instead of using only generic containers like <div> and <span>, semantic elements make your markup more descriptive, which helps both users and machines understand your content.

Common Semantic Elements

<header> – introductory content or navigation for a page or section.
<nav> – primary navigation links.
<main> – main content unique to the page.
<article> – self-contained piece of content (like a blog post).
<section> – thematically related content group.
<aside> – tangentially related content (like sidebars).
<footer> – footer for a page or section.

<article> vs <section>

Both <article> and <section> group related content, but they have slightly different purposes:

<article> – a self‑contained unit that could stand on its own outside the page (blog post, news story, forum post).
<section> – a thematic grouping of content within a page or article (chapters, tabs, feature blocks).

As a rule of thumb: if the content could be syndicated on its own (for example, in an RSS feed), use <article>; otherwise, <section> is usually more appropriate.

Page Layout Example

Semantic Page Structure

<header>
    <nav>Main navigation</nav>
</header>

<main>
    <article>
        <h1>Article title</h1>
        <section>Section content</section>
    </article>
    <aside>Sidebar content</aside>
</main>

<footer>Footer content</footer>

Benefits of Semantic HTML

Improved accessibility (screen readers understand structure).
Better SEO (search engines understand page sections).
Easier maintenance and clearer code.
More consistent behavior across browsers.

Non-Semantic vs Semantic Example

Before (Non-Semantic):

<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="footer">...</div>

After (Semantic):

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Semantic Accessibility Tips

Use only one <main> per page.
Keep heading order logical: h1 to h2 to h3.
Use <nav> for major navigation blocks, not every link list.
Add landmark roles only when needed; many semantic elements already provide landmarks.
Use <figure> and <figcaption> for images/charts needing captions.