Lesson 6: div, span & Semantic Layout

Goal: Divide a page into logical sections.

html

<div>A block-level container</div>

<p>This sentence has <span>one word</span> wrapped for later styling.</p>

Semantic Page Layout

html

<body>

    <header>

        <h1>My Company</h1>

        <nav>

            <a href="index.html">Home</a>

            <a href="about.html">About</a>

            <a href="contact.html">Contact</a>

        </nav>

    </header>

    <main>

        <section>

            <h2>Our Services</h2>

            <article>

                <h3>Web Design</h3>

                <p>Description here.</p>

            </article>

        </section>

        <aside><p>Sidebar or extra info</p></aside>

    </main>

    <footer>

        <p>&copy; 2026 My Company</p>

    </footer>

</body>

Why it matters: Search engines and screen readers understand the page better. Use <div> only when no semantic tag fits.

Practice: Restructure your portfolio using header, main, section, and footer.