Semantic HTML

What is Semantic HTML?
Semantic HTML uses meaningful tags to structure web pages. These tags describe the purpose of the content, making it easier for browsers, developers, and screen readers to understand the page.

Why Use Semantic HTML?

Improves SEO by helping search engines understand your content.
Enhances accessibility for screen readers and assistive technologies.
Makes code more readable for developers.

Common Semantic Elements

                    
<header>Website header</header>
<nav>Navigation links</nav>
<main>Main content of the page</main>
<article>Independent article content</article>
<section>Themed section of content</section>
<aside>Sidebar information</aside>
<footer>Website footer</footer>
                    
                

Example Page Layout

                    
<header>
    <h1>My Blog</h1>
</header>

<nav>
    <a href="#">Home</a> | <a href="#">About</a>
</nav>

<main>
    <article>
        <h2>Post Title</h2>
        <p>This is a blog post.</p>
    </article>

    <section>
        <h3>Comments</h3>
        <p>User feedback goes here.</p>
    </section>
</main>

<aside>
    <p>Sidebar: recent posts</p>
</aside>

<footer>
    <p>© 2024 My Blog</p>
</footer>
                    
                

Key Points to Remember

Use <header> for top sections like titles or logos.
<nav> is for navigation menus.
<main> should contain the core content.
Wrap standalone articles or posts in <article>.
<section> groups related content by theme.
<aside> holds side info like ads or widgets.
<footer> is for bottom info like copyright.

Practice Exercise

👉 Create a file named semantic.html. Add:

A <header> with a site title.
A <nav> with at least 3 links.
A <main> containing one <article> and one <section>.
An <aside> with related info.
A <footer> with copyright text.

Pro Tip 💡

Use semantic tags whenever possible. Avoid using too many <div> tags with no meaning. This improves SEO and accessibility!