Semantic HTML uses elements that clearly describe their meaning and purpose.

Instead of using generic elements like <div>, semantic elements describe the type of content they contain.

Benefits include:

• Better SEO
• Better Accessibility
• Easier Maintenance
• Better Screen Reader Support
• More Readable Code

A typical semantic webpage looks like this:

Website
│
├── Header
├── Navigation
├── Main
│   ├── Section
│   ├── Article
│   └── Aside
└── Footer

---

Header (header)

The <header> element represents introductory content.

It usually contains:

• Logo
• Website title
• Navigation
• Search bar

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

    <p>Learn Frontend Development</p>
</header>

Typical layout:

--------------------
Logo
Site Name
Navigation
--------------------

---

Navigation (nav)

The <nav> element contains navigation links.

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

Output:

Home | About | Contact

Common uses:

• Main Navigation
• Sidebar Navigation
• Pagination

---

Main (main)

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

Each page should contain only one <main> element.

<main>
    <h2>Frontend Development</h2>

    <p>
        Learn HTML, CSS, and JavaScript.
    </p>
</main>

Structure:

Header

Navigation

Main Content

Footer

---

Section (section)

The <section> element groups related content together.

<section>
    <h2>HTML</h2>

    <p>
        HTML structures web pages.
    </p>
</section>

Common uses include:

• About Section
• Features Section
• Services Section
• Contact Section

Example:

<section>
    <h2>About Us</h2>
</section>

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

---

Article (article)

The <article> element represents independent content.

The content should still make sense if viewed on its own.

<article>
    <h2>Learn HTML</h2>

    <p>
        HTML is the foundation of web development.
    </p>
</article>

Common uses:

• Blog Posts
• News Articles
• Product Reviews
• Forum Posts

Section vs Article

section

Website
└── About Section

A section is part of a larger page.

article

Website
└── Blog Post

An article can stand on its own.

---

Aside (aside)

The <aside> element contains content related to, but separate from, the main content.

<aside>
    <h3>Related Articles</h3>

    <ul>
        <li>CSS Basics</li>
        <li>JavaScript Intro</li>
    </ul>
</aside>

Common uses:

• Sidebars
• Advertisements
• Related Links
• Author Information

Example layout:

---------------------
Main Article

              Sidebar
              Related Posts
---------------------

---

Footer (footer)

The <footer> element contains information about the page or website.

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

Common content includes:

• Copyright
• Contact Information
• Social Links
• Terms & Policies

---

Blockquote (blockquote)

The <blockquote> element represents a long quotation.

<blockquote>
    The best way to predict the future
    is to create it.
</blockquote>

Output:

The best way to predict the future is to create it.

Common uses:

• Quotes
• Testimonials
• Citations

---

Cite (cite)

The <cite> element represents the title of a work.

<cite>
    Clean Code
</cite>

Output:

Clean Code

Common uses:

• Books
• Movies
• Research Papers
• Articles

---

Q (q)

The <q> element represents a short inline quotation.

<p>
    Steve Jobs said
    <q>Stay hungry, stay foolish.</q>
</p>

Output:

Steve Jobs said "Stay hungry, stay foolish."

---

Abbreviation (abbr)

The <abbr> element defines an abbreviation.

<abbr title="HyperText Markup Language">
    HTML
</abbr>

When the user hovers over the text:

HTML
↑
HyperText Markup Language

Benefits:

• Better Accessibility
• Better User Experience

---

Address (address)

The <address> element contains contact information.

<address>
    Mechinagar-7, Jhapa<br>
    Nepal<br>
    samir@example.com
</address>

Common uses:

• Company Address
• Contact Details
• Author Information

---

Dfn (dfn)

The <dfn> element marks a term being defined.

<p>
    <dfn>HTML</dfn>
    is the standard markup language
    for web pages.
</p>

Common uses:

• Dictionaries
• Glossaries
• Educational Content

---

Del (del)

The <del> element represents deleted content.

<p>
    Price:
    <del>$100</del>
    $80
</p>

Output:

Price: ~~$100~~ $80

Common uses:

• Discounts
• Removed Information
• Change Tracking

---

Ins (ins)

The <ins> element represents inserted content.

<p>
    Price:
    <ins>$80</ins>
</p>

Output:

Price: $80

The inserted content is usually underlined.

Common uses:

• Updated Content
• Revisions
• Change Logs

---

S (s)

The <s> element represents content that is no longer accurate.

<p>
    <s>Registration Closed</s>
</p>

Output:

~~Registration Closed~~

del vs s

del

<del>$100</del>

Meaning:

The content was removed.

s

<s>Available</s>

Meaning:

The content is no longer accurate.

---

Complete Semantic Page Example

<header>
    <h1>Frontend Blog</h1>
</header>

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

<main>

    <section>
        <h2>Latest Articles</h2>

        <article>
            <h3>Learn HTML</h3>

            <p>
                HTML is the foundation of web development.
            </p>
        </article>

    </section>

    <aside>
        Related Resources
    </aside>

</main>

<footer>
    © 2026 Frontend Blog
</footer>

---

Key Takeaway

Semantic HTML gives meaning to webpage content.

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

Instead of filling your webpage with generic <div> elements, semantic elements make your code easier to read, improve accessibility, and help search engines better understand your content.