Structuring with HTML

Now let's learn to organize content in a professional way!

Semantic HTML

Semantic = tags that have meaning.

Instead of using <div> for everything, we use tags that describe the content:

html

<!-- ❌ Non-semantic --><div class="header">...</div><div class="nav">...</div><div class="main">...</div> <!-- ✅ Semantic --><header>...</header><nav>...</nav><main>...</main>

Why does it matter?

Accessibility - Screen readers understand the page better
SEO - Google prefers well-structured sites
Maintenance - Easier to understand the code

Main Semantic Tags

Page Structure

html

<body>    <header>        Logo and main navigation    </header>     <nav>        Menu links    </nav>     <main>        Main content (unique per page)    </main>     <aside>        Sidebar, related content    </aside>     <footer>        Credits, social links, copyright    </footer></body>

Content Organization

html

<article>    Blog post, news, independent content</article> <section>    Section of a page</section> <figure>    <img src="photo.jpg" alt="Description">    <figcaption>Image caption</figcaption></figure>

Div and Span

When there's no appropriate semantic tag:

html

<!-- div: block grouping (occupies entire width) --><div class="card">    <h3>Title</h3>    <p>Content</p></div> <!-- span: inline grouping (doesn't break line) --><p>The price is <span class="highlight">$99</span></p>

Forms

Essential for interacting with users:

html

<form action="/send" method="POST">    <label for="name">Name:</label>    <input type="text" id="name" name="name" required>     <label for="email">Email:</label>    <input type="email" id="email" name="email" required>     <label for="message">Message:</label>    <textarea id="message" name="message"></textarea>     <button type="submit">Send</button></form>

Useful Input Types

html

<input type="text">       <!-- Simple text --><input type="email">      <!-- Validates email --><input type="password">   <!-- Hides characters --><input type="number">     <!-- Only numbers --><input type="date">       <!-- Date picker --><input type="checkbox">   <!-- Checkbox --><input type="radio">      <!-- Single selection --><input type="file">       <!-- Upload files -->

Tables

For tabular data (NOT for layout!):

html

<table>    <thead>        <tr>            <th>Name</th>            <th>Age</th>            <th>City</th>        </tr>    </thead>    <tbody>        <tr>            <td>Mary</td>            <td>25</td>            <td>New York</td>        </tr>        <tr>            <td>John</td>            <td>30</td>            <td>Chicago</td>        </tr>    </tbody></table>

Practical Example: Blog Page

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>My Blog</title></head><body>    <header>        <h1>My Tech Blog</h1>        <nav>            <a href="/">Home</a>            <a href="/about">About</a>            <a href="/contact">Contact</a>        </nav>    </header>     <main>        <article>            <h2>Learning HTML</h2>            <p>Published on <time datetime="2026-01-15">Jan 15, 2026</time></p>            <p>Today I learned about semantic tags...</p>        </article>         <article>            <h2>My First Website</h2>            <p>Published on <time datetime="2026-01-10">Jan 10, 2026</time></p>            <p>I created my first HTML page!</p>        </article>    </main>     <aside>        <h3>About</h3>        <p>A developer in training sharing my journey.</p>    </aside>     <footer>        <p>&copy; 2026 My Blog. All rights reserved.</p>    </footer></body></html>

Summary

✅ Use semantic tags whenever possible
✅ header, nav, main, footer for structure
✅ article, section for content
✅ div and span only when there's no semantic alternative
✅ Forms with correct input types

In the next lesson, we'll make all of this beautiful with CSS! 🚀