When I first started writing HTML, I used <div> for almost everything.

I needed a header? I used a <div>.

I needed a navigation area? Another <div>.

I needed an article? More <div> elements.

At the time, this seemed perfectly normal to me because the page looked exactly how I wanted it to look after adding CSS.

But as I started working on larger websites, I learned that HTML is not only about making content appear on a screen. HTML should also describe what the content actually means.

This is where semantic HTML becomes important.

Instead of creating a page using dozens of generic <div> elements, I can use elements such as:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

These elements tell the browser, developers, search engines, and assistive technologies more about the structure and purpose of the content.

In this article, I will explain semantic HTML from the beginning, show you the most commonly used semantic elements, and explain how I decide which element to use when building a web page.

What Is Semantic HTML?

The word semantic basically means related to meaning.

In HTML, semantic elements are elements that clearly describe the meaning or purpose of the content they contain.

For example:

<header>
    <h1>My Website</h1>
</header>

The <header> element tells us that this content represents a header.

Similarly:

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
</nav>

The <nav> element tells us that this area contains navigation links.

Compare that with:

<div class="header">
    <h1>My Website</h1>
</div>

<div class="navigation">
    <a href="/">Home</a>
    <a href="/about">About</a>
</div>

The second example can look exactly the same in a browser.

However, the first example communicates more meaning through the HTML itself.

That’s the main idea behind semantic HTML.

Semantic vs Non-Semantic Elements

A simple way to understand the difference is to compare semantic and non-semantic elements.

Non-Semantic Elements

The two most common generic elements are:

<div>

and:

<span>

They don’t tell us much about the meaning of their content.

For example:

<div>
    My Blog
</div>

We know there is some content inside the <div>, but we don’t know what role that content plays just by looking at the HTML.

Semantic Elements

Now consider:

<header>
    My Blog
</header>

The <header> element gives us additional information.

We can immediately understand that this content represents a header.

Similarly:

<article>
    <h2>How to Learn JavaScript</h2>
    <p>...</p>
</article>

The <article> element tells us that this is a self-contained piece of content.

Why Should I Use Semantic HTML?

There are several reasons I prefer semantic HTML when building websites.

1. It Makes the Code Easier to Understand

Imagine opening a page containing this:

<div class="container">
    <div class="top">
        ...
    </div>

    <div class="menu">
        ...
    </div>

    <div class="content">
        ...
    </div>

    <div class="bottom">
        ...
    </div>
</div>

I have to inspect the class names to understand what each section represents.

Now compare it with:

<header>
    ...
</header>

<nav>
    ...
</nav>

<main>
    ...
</main>

<footer>
    ...
</footer>

I can understand the basic page structure almost immediately.

This becomes especially useful when working on large projects with other developers.

2. It Helps With Accessibility

Semantic HTML can make it easier for assistive technologies to understand the structure of a page.

Screen readers and other accessibility tools can make use of semantic landmarks such as:

<header>
<nav>
<main>
<aside>
<footer>

This can help users navigate a page more efficiently.

Semantic HTML doesn’t automatically make a website fully accessible, but it provides a much better structural foundation.

3. It Helps Search Engines Understand Content

Search engines need to understand the structure and meaning of web pages.

Semantic HTML can provide useful context about different parts of a document.

For example:

<article>
    <h1>What Is HTML?</h1>
    <p>HTML is a markup language...</p>
</article>

The <article> element communicates that the content represents an article.

Semantic HTML is not a magic SEO trick, and simply replacing every <div> with semantic elements won’t automatically improve rankings.

However, creating a clear, meaningful document structure is a good practice for search-friendly websites.

4. It Makes Maintenance Easier

I have worked on codebases where the HTML structure became difficult to understand because almost everything was a <div>.

Semantic elements can make the structure much easier to maintain.

When I come back to the project months later, this:

<main>
    <article>
        ...
    </article>

    <aside>
        ...
    </aside>
</main>

is much easier to understand than a collection of generic containers.

Important HTML Semantic Elements

There are many semantic HTML elements, but some are particularly important for beginners.

Let’s go through the ones I use most frequently.

1. <header>

The <header> element represents introductory content for a page or section.

For example:

<header>
    <h1>My Blog</h1>
    <p>Articles about web development</p>
</header>

A website header might contain:

• Logo
• Website title
• Navigation
• Introduction
• Search
• Other introductory content

However, there is an important point to understand.

A <header> is not necessarily only the website’s top header.

It can also belong to an individual section or article.

For example:

<article>

    <header>
        <h2>Understanding JavaScript Functions</h2>
        <p>Published on September 5, 2026</p>
    </header>

    <p>
        JavaScript functions allow us to...
    </p>

</article>

Here, the <header> belongs to the article.

2. <nav>

The <nav> element represents a section containing navigation links.

For example:

<nav>
    <a href="/">Home</a>
    <a href="/articles">Articles</a>
    <a href="/projects">Projects</a>
    <a href="/contact">Contact</a>
</nav>

The important thing I remember is that <nav> is intended for significant navigation.

You don’t need to wrap every individual link on a page inside <nav>.

For example, a random link inside an article doesn’t automatically need a <nav> element.

3. <main>

The <main> element represents the primary content of the page.

For example:

<main>

    <h1>HTML Semantic Elements</h1>

    <p>
        This article explains semantic HTML.
    </p>

</main>

A page should generally have one main content area.

I think of <main> as the answer to this question:

“What is the primary content the user came to this page to see?”

For a blog article, the article content would normally be part of <main>.

For a product page, the main product information would be part of <main>.

4. <section>

The <section> element represents a thematic grouping of content.

For example:

<section>
    <h2>HTML Basics</h2>

    <p>
        HTML is used to structure web pages.
    </p>
</section>

Another section could be:

<section>
    <h2>CSS Basics</h2>

    <p>
        CSS is used to style web pages.
    </p>
</section>

I generally use <section> when a group of content represents a distinct topic or section of the page.

A section will often have a heading.

5. <article>

The <article> element represents a self-contained piece of content that could potentially stand on its own.

Examples include:

• Blog posts
• News articles
• Forum posts
• Product reviews
• Comments
• Other independent pieces of content

For a blog, I might write:

<article>

    <h1>What Is HTML?</h1>

    <p>
        HTML stands for HyperText Markup Language.
    </p>

    <p>
        It is used to structure content on the web.
    </p>

</article>

The article can be understood independently from the rest of the page.

<article> vs <section>

This is one of the areas that confuses beginners.

Both elements can group content, but they have different purposes.

I think about it this way:

<article> = A self-contained piece of content

<section> = A thematic section of content

For example, imagine a blog page.

<main>

    <article>

        <h1>Learning HTML</h1>

        <section>
            <h2>What Is HTML?</h2>
            <p>...</p>
        </section>

        <section>
            <h2>HTML Elements</h2>
            <p>...</p>
        </section>

    </article>

</main>

Here:

• The <article> represents the complete blog post.
• Each <section> represents a major topic within that article.

The two elements can therefore be used together.

6. <aside>

The <aside> element represents content that is related to the surrounding content but isn’t part of its main flow.

For example, a blog might have:

<aside>
    <h2>Related Articles</h2>

    <ul>
        <li><a href="/html-basics">HTML Basics</a></li>
        <li><a href="/css-basics">CSS Basics</a></li>
    </ul>
</aside>

Other examples include:

• Related articles
• Sidebars
• Author information
• Advertisements
• Additional information
• Related links

For example:

<main>

    <article>
        <h1>What Is JavaScript?</h1>
        <p>...</p>
    </article>

    <aside>
        <h2>Related Articles</h2>
        <a href="/html">Learn HTML</a>
    </aside>

</main>

7. <footer>

The <footer> represents footer information for a page or section.

For example:

<footer>
    <p>Copyright 2026 My Website</p>
</footer>

Like <header>, a footer isn’t limited to the entire page.

An article can also have a footer:

<article>

    <h1>My Article</h1>

    <p>
        Article content...
    </p>

    <footer>
        <p>Written by Bishal Biswas</p>
    </footer>

</article>

The footer belongs to the nearest relevant sectioning content.

Other Useful Semantic Elements

The elements above are the ones I recommend learning first, but HTML has several other useful semantic elements.

<figure>

The <figure> element is useful for self-contained content such as an image, diagram, or illustration.

For example:

<figure>

    <img src="html-structure.png" alt="HTML document structure">

    <figcaption>
        Basic structure of an HTML document.
    </figcaption>

</figure>

The <figcaption> provides a caption for the figure.

<time>

The <time> element represents a date or time.

For example:

<time datetime="2026-09-05">
    September 5, 2026
</time>

This can be useful when publishing articles, events, dates, and other time-related information.

<address>

The <address> element can represent contact information for the relevant page or article.

For example:

<address>
    Contact: example@example.com
</address>

It isn’t simply a generic replacement for a <div> containing any physical address.

<details> and <summary>

These elements are useful when I want to create expandable content without relying on JavaScript.

For example:

<details>

    <summary>
        What is HTML?
    </summary>

    <p>
        HTML is the standard markup language
        used to structure web pages.
    </p>

</details>

The user can click the summary to expand or collapse the content.

This can be useful for FAQ sections.

A Complete Semantic HTML Page

Let’s put the concepts together.

Suppose I am creating a simple blog article page.

Instead of creating everything with <div> elements, I could structure it like this:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>My Blog</title>

</head>

<body>

    <header>

        <h1>My Developer Blog</h1>

        <nav>
            <a href="/">Home</a>
            <a href="/articles">Articles</a>
            <a href="/about">About</a>
        </nav>

    </header>

    <main>

        <article>

            <header>
                <h2>HTML Semantic Elements Explained</h2>

                <p>
                    Published on September 5, 2026
                </p>
            </header>

            <section>

                <h3>What Is Semantic HTML?</h3>

                <p>
                    Semantic HTML uses elements that
                    describe the meaning of their content.
                </p>

            </section>

            <section>

                <h3>Why Semantic HTML Matters</h3>

                <p>
                    Semantic elements make HTML easier
                    to understand and maintain.
                </p>

            </section>

            <footer>

                <p>Written by Bishal Biswas</p>

            </footer>

        </article>

        <aside>

            <h2>Related Articles</h2>

            <ul>
                <li>
                    <a href="/what-is-html">
                        What Is HTML?
                    </a>
                </li>

                <li>
                    <a href="/html-elements-vs-attributes">
                        HTML Elements vs Attributes
                    </a>
                </li>
            </ul>

        </aside>

    </main>

    <footer>

        <p>
            Copyright 2026 My Developer Blog
        </p>

    </footer>

</body>

</html>

When I look at this structure, I can understand the page without even seeing the CSS.

That’s one of the biggest benefits of semantic HTML.

Semantic HTML Does Not Automatically Change the Design

This is another important point.

If I write:

<header>
    My Website
</header>

the browser doesn’t automatically create a beautiful website header.

Semantic HTML is primarily about meaning and structure, not visual design.

CSS controls the appearance.

For example:

header {
    padding: 20px;
}

I can style the semantic element just like other HTML elements.

So I separate the responsibilities:

HTML
↓
Structure and meaning

CSS
↓
Appearance

JavaScript
↓
Behavior

Can I Still Use <div>?

Absolutely.

Semantic HTML does not mean that <div> is bad.

I still use <div> when there isn’t a more appropriate semantic element.

For example:

<div class="product-grid">
    ...
</div>

There isn’t necessarily a semantic element specifically meaning “grid container.”

Using <div> in such a situation is completely reasonable.

The problem is not using <div>.

The problem is using <div> for everything when a meaningful semantic element exists.

<div> vs <section>

Another common question is:

“Should I always replace <div> with <section>?”

No.

A <section> has semantic meaning.

A <div> is a generic container.

For example:

<div class="card">
    <h2>Product</h2>
    <p>Description</p>
</div>

If the container doesn’t represent a distinct thematic section, a <div> might be perfectly appropriate.

But if the content represents a distinct section of the document:

<section>
    <h2>Our Services</h2>

    <p>
        We provide web development services.
    </p>
</section>

then <section> can communicate the purpose more clearly.

Don’t Choose Semantic Elements Just for Styling

This is a mistake I made when learning HTML.

I sometimes chose elements based on how they looked rather than what they meant.

For example, I might think:

“I want a large heading, so I’ll use <h1>.”

That’s not the right reason to use <h1>.

I should choose the heading based on the document hierarchy.

CSS can make any heading look the way I want.

Similarly, I shouldn’t use <section> simply because I want a container with spacing.

Semantic elements should describe the content’s purpose.

Semantic HTML and Accessibility

One of the biggest reasons I recommend semantic HTML is accessibility.

Consider these two examples.

Example 1

<div class="navigation">
    <a href="/">Home</a>
    <a href="/about">About</a>
</div>

Example 2

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
</nav>

A human developer can understand both.

But the second example communicates the navigation role directly through the HTML.

Similarly:

<main>
    ...
</main>

communicates that the content represents the primary content of the page.

This gives assistive technologies useful structural information.

However, semantic HTML is only one part of accessibility. Proper labels, keyboard navigation, color contrast, focus management, meaningful link text, and many other practices also matter.

Semantic HTML and SEO

I often see people say that semantic HTML is an SEO trick.

I wouldn’t describe it that way.

Using semantic elements won’t magically push a website to the first page of Google.

However, a well-structured HTML document helps communicate the organization and meaning of the content.

For example:

<main>

    <article>

        <h1>What Is HTML?</h1>

        <section>
            <h2>HTML Basics</h2>
            <p>...</p>
        </section>

        <section>
            <h2>HTML Elements</h2>
            <p>...</p>
        </section>

    </article>

</main>

This gives the document a clear hierarchy.

For content-focused websites such as blogs and documentation websites, I consider this good practice.

Common Semantic HTML Mistakes

Here are some mistakes I recommend avoiding.

Using <div> for Everything

This is probably the most common one.

Instead of:

<div class="header">

consider whether:

<header>

is more appropriate.

Instead of:

<div class="footer">

consider:

<footer>

Use semantic elements where they actually make sense.

Using <section> Without a Purpose

Don’t replace every <div> with <section>.

This:

<section>
    <span>Hello</span>
</section>

doesn’t necessarily make the HTML more semantic.

A section should represent a meaningful thematic grouping.

Using <article> for Every Container

An <article> is intended for self-contained content.

A random layout container isn’t automatically an article.

For example, a product card might or might not be an <article> depending on the context and whether it represents an independent piece of content.

Choose based on meaning.

Multiple <main> Elements

For a typical document, I use one <main> element for the page’s primary content.

If you’re building more complicated interfaces, understanding the HTML specification and accessibility guidance becomes important rather than simply adding multiple <main> elements whenever convenient.

Forgetting Headings

Semantic structure works particularly well when the content also has a logical heading hierarchy.

For example:

<main>

    <h1>HTML Guide</h1>

    <section>
        <h2>HTML Elements</h2>

        <section>
            <h3>Semantic Elements</h3>
        </section>

    </section>

</main>

The headings help communicate the structure of the content.

A Simple Semantic HTML Cheat Sheet

When I’m deciding which element to use, this quick reference is useful:

Element	Purpose
<header>	Introductory content for a page or section
<nav>	Navigation links
<main>	Primary content of the page
<section>	Thematic section of content
<article>	Self-contained content
<aside>	Related or secondary content
<footer>	Footer information for a page or section
<figure>	Self-contained media or illustration
<figcaption>	Caption for a figure
<time>	Date or time
<address>	Contact information
<details>	Expandable content
<summary>	Summary or label for <details>
<div>	Generic container when no semantic element fits

How I Think About Semantic HTML

I don’t try to memorize semantic HTML elements as a list.

Instead, I ask myself what the content actually represents.

If it is introductory content:

<header>

If it contains important navigation:

<nav>

If it contains the primary page content:

<main>

If it represents a distinct topic:

<section>

If it represents a self-contained piece of content:

<article>

If it contains related or secondary information:

<aside>

If it contains footer information:

<footer>

And if none of those descriptions fit:

<div>

This approach is much easier than trying to memorize when every element should be used.

Final Thoughts

When I look back at my early HTML code, I can see how heavily I relied on <div>.

There was nothing technically wrong with many of those pages. They worked, and the browser displayed them correctly.

But as I learned more about HTML, I realized that good HTML should communicate more than just how a page should be displayed.

It should communicate what the content means.

That’s the real purpose of semantic HTML.

Instead of:

<div class="header">

I can use:

<header>

Instead of:

<div class="navigation">

I can use:

<nav>

Instead of:

<div class="content">

I can use:

<main>

And instead of creating a page full of anonymous containers, I can build a structure that another developer can understand just by reading the HTML.

The main semantic elements I recommend learning first are:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Once you understand what these elements mean, start using them in your own projects.

Don’t try to eliminate <div> completely. Use semantic elements when they genuinely describe the content, and use generic elements when they don’t.

That balance is what I consider good HTML.