Publish Pro Site

What you will learn

You will rebuild messy divs into semantic structure Google and screen readers love.

Before (beginner) vs After (pro)

Before:

<div>My Bakery</div>
<div><a href="#">Home</a></div>
<div>Bread text...</div>
<div>Copyright</div>

After:

<header>
  <h1>Klagon Community Bakery</h1>
  <nav>
    <a href="index.html">Home</a> |
    <a href="order.html">Order</a> |
    <a href="about.html">About</a>
  </nav>
</header>

<main>
  <section>
    <h2>Fresh Daily</h2>
    <p>Made by Klagon hands from 5am.</p>
  </section>
  <article>
    <h2>Why our tea bread?</h2>
    <p>Soft inside, golden outside.</p>
  </article>
</main>

<footer>
  <p>© 2026 Klagon Bakery | WhatsApp 024 326 2019 | <a href="#top">Back to top</a></p>
</footer>

Rule: header = top, nav = links, main = unique content (once per page), section = theme group, article = standalone, footer = bottom.

Multi-page nav that works

Same nav on all 3 pages. Folder:

my-site/
 index.html
 order.html
 about.html

Exercise

1. Wrap your Basic page in header/nav/main/footer.
2. Split content into 2 sections.
3. Add same nav to order.html.

Why it works (theory in 3 lines): Semantic tags tell Google/reader role, div tells nothing. One main = unique content signal for rank. Same nav everywhere builds site graph for crawl.

Summary

• Semantic tags describe meaning, div describes nothing
• One main, one h1 per page
• Same nav everywhere = pro

[+10 XP]