Day 1 - Semantic Elements

Semantic elements clearly describe their meaning to both the browser and the developer.

---

1. Non-Semantic vs. Semantic

Before HTML5, developers used <div> tags even for structural elements. Now, we use specific tags that describe the functionality.

Code (Non-Semantic - The Old Way):

<div id="header">Header</div>
<div id="nav">Navigation</div>
<div id="main">
    <div class="article">Article  Content</div>
</div>
<div id="footer">Footer</div>

Code (Semantic - The New Way):

<header>Header</header>
<nav>Navigation</nav>
<main>
    <article>Article  Content</article>
</main>
<footer>Footer</footer>

---

2. Full Semantic Layout

A visual representation of how these elements structure a page.

Code:

<header>
    <h1>Header</h1>
</header>
<nav> Navigation Links </nav>
<div class="container">
    <aside>
        <h3>Aside</h3>
        <p>Sidebar  content, ads, etc.</p>
    </aside>
    <main>
        <h2>Main  Content</h2>
        <article>
            <h3>Article</h3>
            <p>Blog  post or news story.</p>
            <figure>
                <p>[Image/Diagram]</p>
                <figcaption>Figure  Caption</figcaption>
            </figure>
            <section>
                <h4>Section</h4>
                <p>Related  group of content.</p>
            </section>
        </article>
    </main>
</div>
<footer>Footer Content</footer>

Output:

---

3. Non-Semantic Layout (Visual Equivalent)

The exact same layout built using only <div> tags. Notice the output is identical, but the code lacks meaning.

Code:

<div class="header">
    <h1>Header</h1>
</div>
<div class="nav"> Navigation Links </div>
<div class="container">
    <div class="aside">
        <h3>Aside</h3>
        <p>Sidebar  content, ads, etc.</p>
    </div>
    <div class="main">
        <h2>Main  Content</h2>
        <div  class="article">
            <h3>Article</h3>
            <p>Blog  post or news story.</p>
            <div  class="figure">
                <p>[Image/Diagram]</p>
                <div  class="figcaption">Figure Caption</div>
            </div>
            <div  class="section">
                <h4>Section</h4>
                <p>Related  group of content.</p>
            </div>
        </div>
    </div>
</div>
<div class="footer">Footer Content</div>

Output: