Header, meny och footer · Koda med Martin

Ge din sida riktig struktur som riktiga webbplatser har: en header med meny upptill och en footer nedtill.

Jag visar: varje webbplats har samma delar

Titta på vilken stor webbplats som helst: upptill finns en header med namn och meny, i mitten finns innehåll, och längst ner finns en footer med det lilla. HTML har egna taggar för dessa delar:

<body>
  <header>
    <h1>Website Name</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="second-page.html">Second Page</a>
    </nav>
  </header>

  <main>
    <h2>Here's the main content</h2>
    <p>Everything the page is about.</p>
  </main>

  <footer>
    <p>Made by Jake, 2026</p>
  </footer>
</body>

<header> – headern: webbplatsens namn och meny. Den är samma på varje sida.
<nav> – navigation, alltså menyn med länkar.
<main> – huvudinnehållet, olika på varje sida.
<footer> – footern: vem som gjort sidan, kontaktinfo, året.

💡

Visuellt förändras inte mycket än – dessa taggar syns inte själva. Så varför bry sig om att skriva dem? För att de ger ordning i din kod: webbläsare, sökmotorer och skärmläsare använder dem för att veta vad som är meny och vad som är innehåll. Och bäst av allt – i kommande lektioner stylar vi dem, så menyn faktiskt ser ut som en riktig meny.

Nu är det din tur 💪

På index.html, slå in ditt befintliga innehåll i dessa delar: en <header> upptill med en <h1> och en <nav> (länkar till båda dina sidor), en <main> i mitten med resten av innehållet, och en <footer> längst ner.
Gör samma sak på din andra sida. Headern och footern ska vara exakt samma på båda sidorna – kopiera bara över dem.
Spara, uppdatera, klicka runt: funkar menyn från båda sidorna?

🏫 Skolwebbplats – lösning (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <header>
      <h1>Riverside Elementary School</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="lunch-menu.html">Lunch Menu</a>
      </nav>
    </header>

    <main>
      <img src="images/school.jpg" alt="Our school building">
      <h2>About Our School</h2>
      <p>Our school has stood in Riverside for 120 years.</p>

      <h2>Clubs</h2>
      <ul>
        <li>floorball</li>
        <li>ceramics</li>
        <li>coding</li>
      </ul>
    </main>

    <footer>
      <p>Made by the 4th grade class, 2026</p>
    </footer>
  </body>
</html>

🙋 Personlig webbplats – lösning (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <header>
      <h1>Jake Miller</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="about-me.html">More About Me</a>
      </nav>
    </header>

    <main>
      <img src="images/me.jpg" alt="Me with a soccer ball">
      <h2>What I Like</h2>
      <p>Soccer, Minecraft, and building websites.</p>
    </main>

    <footer>
      <p>Made by Jake, 2026</p>
    </footer>
  </body>
</html>

🌍 Resejournal – lösning (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <header>
      <h1>Where We've Been 🌍</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="trips.html">All Trips</a>
      </nav>
    </header>

    <main>
      <h2>Last Trip: The Mountains</h2>
      <img src="images/mountains.jpg" alt="View from the summit">
      <p>Three days of walking, one wrong turn, and a hundred wild berries.</p>
    </main>

    <footer>
      <p>Journal kept by the Miller family, 2026</p>
    </footer>
  </body>
</html>

⚽ Klubbwebbplats – lösning (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <header>
      <h1>Riverside Eagles FC</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="roster.html">Roster</a>
      </nav>
    </header>

    <main>
      <img src="images/team.jpg" alt="Team photo">
      <h2>Recent Results</h2>
      <ol>
        <li>Eagles – Hawks 3 : 1</li>
        <li>Falcons – Eagles 2 : 2</li>
      </ol>
    </main>

    <footer>
      <p>Riverside Eagles FC · training Tue & Thu at 5:00 PM</p>
    </footer>
  </body>
</html>

✅

Kolla själv: Båda sidorna har samma namn och meny upptill, en footer nedtill, och menyn växlar dig mellan sidorna. Strukturen är klar – nu kan vi dyka in i hur det ser ut!

Det här tar du med dig från lektionen

En sida har delar: <header> (header med meny), <main> (innehåll), <footer> (footer).
Menyn är en <nav> med länkar, och den är samma på varje sida.
Ordningen i din kod = grunden du kan bygga ett utseende ovanpå.