HTML Tags Tutorial for Beginners – Part 6:

Semantic HTML5 Tags

After learning forms and input tags in Part 5, the next important topic is semantic HTML. Semantic HTML helps browsers, developers, search engines, and assistive technologies understand webpage structure more clearly.

In simple words, semantic tags give meaning to webpage content instead of only controlling layout.

What Is Semantic HTML?
Why Semantic HTML Matters
Semantic vs Non-Semantic Tags
Header Tag
Nav Tag
Main Tag
Section Tag
Article Tag
Aside Tag
Footer Tag
Figure and Figcaption
Details and Summary
Mark Tag
Time Tag
Address Tag
Div vs Semantic Tags
Accessibility Benefits
SEO Benefits
Real Website Structure Example
Mini Project Example
Best Practices
Common Beginner Mistakes
Conclusion
FAQ

What Is Semantic HTML?

Semantic HTML means using tags that clearly describe their purpose.

For example:

<header>
<nav>
<main>
<article>
<footer>

These tags tell browsers and developers what content represents.

Instead of using many generic containers, semantic tags provide meaningful structure.

Why Semantic HTML Matters

Semantic HTML is important because it:

Improves website structure
Helps search engines understand content
Improves accessibility
Makes code easier to read
Helps screen readers
Creates cleaner HTML

Semantic vs Non-Semantic Tags

Non-Semantic Example

<div class="header">
</div>

The div tag does not explain meaning.

Semantic Example

<header>
</header>

The browser immediately understands this is page header content.

Header Tag (<header>)

The header tag represents introductory content.

<header>

<h1>My Blog</h1>

</header>

Common content inside header:

Website logo
Title
Navigation
Intro text

Nav Tag (<nav>)

The nav tag defines navigation links.

<nav>

<a href="#">Home</a>

<a href="#">About</a>

</nav>

Usually used for menus.

Main Tag (<main>)

The main tag contains the primary content of the webpage.

<main>

<h2>Latest Posts</h2>

</main>

Important rule:

Only one main tag should exist per webpage.

Section Tag (<section>)

The section tag divides content into sections.

<section>

<h2>About Us</h2>

</section>

Useful for organizing content.

Basic Semantic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
</head>

<body>

    <header>
        <h1>Coding Bihar</h1>
    </header>

    <nav>
        <a href="#">Home</a>
        <a href="#">Tutorials</a>
        <a href="#">Projects</a>
        <a href="#">Contact</a>
    </nav>

    <main>

        <section>
            <h2>Latest Tutorials</h2>

            <article>
                <h3>Learn HTML</h3>
                <p>HTML is the foundation of every website.</p>
            </article>

            <article>
                <h3>Learn CSS</h3>
                <p>CSS makes websites beautiful.</p>
            </article>

        </section>

        <aside>
            <h3>Popular Posts</h3>

            <ul>
                <li>JavaScript Basics</li>
                <li>Python Tutorial</li>
                <li>React Guide</li>
            </ul>

        </aside>

    </main>

    <footer>
        <p>© 2026 Coding Bihar</p>
    </footer>

</body>
</html>

Output:

Basic Semantic HTML Structure Screenshot

Article Tag (<article>)

The article tag represents standalone content.

<article>

<h2>HTML Tutorial</h2>

<p>Learn HTML basics</p>

</article>

Examples:

Blog posts
News articles
Forum posts
Product cards

Aside Tag (<aside>)

The aside tag stores related side content.

<aside>

Popular Posts

</aside>

Often used for:

Sidebars
Advertisements
Related links
Recommendations

Footer Tag (<footer>)

The footer tag represents bottom content.

<footer>

Copyright 2026

</footer>

Common footer content:

Copyright
Privacy policy
Links
Contact information

Figure Tag (<figure>)

The figure tag groups media.

<figure>

<img src="nature.jpg">

</figure>

Figcaption Tag (<figcaption>)

The figcaption tag adds captions.

<figure>

<img src="mountain.jpg">

<figcaption>
Beautiful Mountain
</figcaption>

</figure>

Details Tag (<details>)

The details tag creates expandable content.

<details>

Hidden content

</details>

Summary Tag (<summary>)

The summary tag creates a clickable title.

<details>

<summary>
Read More
</summary>

HTML Tutorial

</details>

Mark Tag (<mark>)

The mark tag highlights text.

<mark>
Important
</mark>

Time Tag (<time>)

The time tag represents dates and time.

<time datetime="2026-01-01">
Jan 1, 2026
</time>

Address Tag (<address>)

The address tag shows contact information.

<address>

hello@example.com

</address>

Div vs Semantic Tags

Using Div

<div class="header">
</div>

Using Semantic Tags

<header>
</header>

Semantic tags are easier to understand and better for SEO.

Accessibility Benefits

Semantic HTML improves accessibility because screen readers understand page structure more easily.

Better navigation
Improved readability
Clear content structure
Accessible websites

SEO Benefits of Semantic HTML

Improves search engine understanding
Better content structure
Improved crawlability
Clear hierarchy

Real Website Structure Example

<header>

<nav>

</nav>

</header>

<main>

<section>

<article>

</article>

</section>

<aside>

</aside>

</main>

<footer>

</footer>

This structure is common in blogs and websites.

Mini Project Example

<header>

<h1>My Blog</h1>

</header>

<nav>

<a href="#">Home</a>

</nav>

<main>

<article>

<h2>HTML Tutorial</h2>

<p>Learn HTML step by step</p>

</article>

</main>

<footer>

Copyright 2026

</footer>

Best Practices

Use semantic tags whenever possible
Use one main tag
Keep structure clean
Avoid unnecessary div tags
Organize sections properly
Write meaningful headings

Common Beginner Mistakes

Using div everywhere
Multiple main tags
Wrong section usage
Messy structure
Ignoring accessibility
Overusing semantic tags

A Complete Real World Semantic HTML Example

A complete, real-world Semantic HTML example combines all major semantic elements into a single page. This example includes header, nav, main, section, article, aside, figure, figcaption, details, summary, mark, time, address, and footer, making it suitable for learning and as a starting point for real projects.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Complete Example</title>

    <style>

        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:Arial, Helvetica, sans-serif;
        }

        body{
            background:#f4f4f4;
            color:#333;
            line-height:1.7;
        }

        header{
            background:#1565C0;
            color:white;
            padding:20px;
        }

        header h1{
            margin-bottom:8px;
        }

        nav{
            background:#0D47A1;
        }

        nav ul{
            display:flex;
            list-style:none;
            justify-content:center;
        }

        nav li{
            margin:0;
        }

        nav a{
            display:block;
            color:white;
            text-decoration:none;
            padding:16px 20px;
        }

        nav a:hover{
            background:#1976D2;
        }

        main{
            max-width:1200px;
            margin:auto;
            display:grid;
            grid-template-columns:3fr 1fr;
            gap:25px;
            padding:30px;
        }

        article{
            background:white;
            padding:25px;
            border-radius:8px;
            margin-bottom:25px;
        }

        article h2{
            margin-bottom:15px;
        }

        article p{
            margin-bottom:15px;
        }

        section{
            margin-bottom:35px;
        }

        aside{
            background:white;
            padding:20px;
            border-radius:8px;
            height:fit-content;
        }

        aside ul{
            margin-left:20px;
        }

        figure{
            margin:20px 0;
        }

        figure img{
            width:100%;
            border-radius:8px;
        }

        figcaption{
            text-align:center;
            color:#666;
            margin-top:10px;
            font-size:14px;
        }

        details{
            background:#EEF5FF;
            padding:15px;
            margin-top:20px;
            border-radius:6px;
        }

        mark{
            background:yellow;
        }

        footer{
            background:#222;
            color:white;
            padding:25px;
            text-align:center;
        }

        address{
            font-style:normal;
            margin-top:15px;
        }

        @media(max-width:768px){

            main{
                grid-template-columns:1fr;
            }

            nav ul{
                flex-direction:column;
            }

            nav a{
                text-align:center;
            }

        }

    </style>

</head>

<body>

<header>

    <h1>Coding Bihar</h1>

    <p>Learn HTML, CSS, JavaScript and Modern Web Development</p>

</header>

<nav>

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">HTML</a></li>

        <li><a href="#">CSS</a></li>

        <li><a href="#">JavaScript</a></li>

        <li><a href="#">Python</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

</nav>

<main>

    <div>

        <section>

            <article>

                <h2>What is Semantic HTML?</h2>

                <p>

                    Semantic HTML uses meaningful tags that describe
                    the purpose of the content instead of only its
                    appearance.

                </p>

                <p>

                    Search engines and screen readers can better
                    understand a webpage built with
                    <mark>Semantic HTML</mark>.

                </p>

                <figure>

                    <img
                    src="https://picsum.photos/900/400"
                    alt="Developer writing Semantic HTML">

                    <figcaption>

                        Building accessible websites with Semantic HTML.

                    </figcaption>

                </figure>

                <p>

                    Published on

                    <time datetime="2026-07-18">

                        July 18, 2026

                    </time>

                </p>

            </article>

        </section>

        <section>

            <article>

                <h2>Benefits of Semantic HTML</h2>

                <ul>

                    <li>Better SEO</li>

                    <li>Improved Accessibility</li>

                    <li>Cleaner Code</li>

                    <li>Easy Maintenance</li>

                    <li>Better Browser Support</li>

                </ul>

            </article>

        </section>

        <section>

            <article>

                <h2>Frequently Asked Question</h2>

                <details>

                    <summary>

                        Why should I use semantic tags?

                    </summary>

                    <p>

                        Semantic elements improve accessibility,
                        readability, and search engine optimization.

                    </p>

                </details>

                <details>

                    <summary>

                        Is div a semantic tag?

                    </summary>

                    <p>

                        No. A div is a generic container that has no
                        meaning until styled or scripted.

                    </p>

                </details>

                <details>

                    <summary>

                        Do semantic tags improve SEO?

                    </summary>

                    <p>

                        They help search engines better understand the
                        structure of your content.

                    </p>

                </details>

            </article>

        </section>

    </div>

    <aside>

        <h3>Popular Tutorials</h3>

        <ul>

            <li>HTML Basics</li>

            <li>Semantic HTML</li>

            <li>CSS Flexbox</li>

            <li>CSS Grid</li>

            <li>JavaScript ES6</li>

            <li>Responsive Design</li>

        </ul>

        <hr><br>

        <h3>Quick Facts</h3>

        <p>

            HTML5 introduced semantic elements like
            header, nav, article, section, aside, main,
            figure and footer.

        </p>

    </aside>

</main>

<footer>

    <p>

        © 2026 Coding Bihar

    </p>

    <address>

        Coding Bihar<br>

        Patna, Bihar<br>

        Email: sandeepcodingbihar@gmail.com

    </address>

</footer>

</body>
</html>

OUTPUT:

Conclusion

Semantic HTML makes webpages cleaner, more accessible, and easier for search engines to understand. Once you learn semantic tags, building professional website layouts becomes much easier.

Frequently Asked Questions (FAQ)

1. What is semantic HTML?

Semantic HTML uses meaningful tags that describe webpage content.

2. Why is semantic HTML important?

It improves SEO, accessibility, and code readability.

3. What is the difference between div and semantic tags?

Div is generic, while semantic tags explain meaning.

4. Can a page have multiple main tags?

No. A webpage should normally have one main tag.

5. What is article tag used for?

Article represents standalone content like blogs or posts.

6. Why use nav tag?

Nav organizes navigation menus and links.

7. Should beginners learn semantic HTML?

Yes. Semantic HTML is essential for modern web development.

Stay ahead with the latest tools, trends, and best practices in Android development

HTML Tags Part6: A Complete Guide for Web Developers