Day-9 of Learning HTML

This is my day 9 of Learning HTML. Today, I learned about the Semantic and Non-Semantic Tags in HTML.

In HTML, tags are classified into semantic and non-semantic tags based on whether they describe the meaning of their content.

Semantic Tags:

• Semantic tags clearly describe the purpose and meaning of the content they contain.
• They make web pages easier to understand for developers, browsers, search engines, and assistive technologies.

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

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

<main>
    <article>
        <h2>HTML Basics</h2>
        <p>This is an article.</p>
    </article>
</main>

<footer>
    <p>Copyright 2026</p>
</footer>

Tag and their meaning:

<header> - Header section
<nav> - Navigation links
<main> - Main content
<section> - Thematic section
<article> - Independent content/article
<aside> - Sidebar content
<footer> - Footer section
<figure> - Self-contained content (image, diagram, etc.)
<summary> - Heading for details

Non-Semantic Tags:

• Non-semantic tags do not describe the content's meaning.
• They are mainly used for layout, styling, or grouping elements.

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

<div class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
</div>

<span style="color:red;">Important Text</span>

Stay tuned for more web development content.