Hoe maak ik links en navigatie ?

Met links en navigatie maak je een website bruikbaar. De <a>-tag (anchor) maakt een hyperlink. Voor een menu gebruik je vaak een combinatie van <nav>, <ul> en <li>, zodat je navigatie makkelijk te stylen is met CSS.

Stappenplan:

1. Gebruik de <a>-tag om een link te maken.
2. Zet meerdere links in een lijst (<ul> met <li>).
3. Plaats de lijst in een <nav>-element.
4. Zet de navigatie meestal in de <header>.
5. Gebruik CSS om de links netjes horizontaal of verticaal te zetten.

Voorbeelden

Een simpele link:

<a href="about.html">Over mij</a>

Navigatie in de header:

<header>
  <h1>Portfolio van Sam</h1>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">Over mij</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

Footer met link:

<footer>
  <p>&copy; 2025 Sam – <a href="privacy.html">Privacyverklaring</a></p>
</footer>

CSS: horizontale navigatie

Met deze CSS wordt de lijst horizontaal in plaats van onder elkaar weergegeven:

nav ul {
  list-style-type: none;   /* haalt de bullets weg */
  margin: 0;
  padding: 0;
  display: flex;           /* zet items naast elkaar */
  gap: 1rem;               /* ruimte tussen links */
}

nav a {
  text-decoration: none;   /* geen onderstreeping */
  color: black;
}

nav a:hover {  /* Verander de uitstraling als je met je muis over de knop heen gaat */
  text-decoration: underline;
}

Veelgemaakte fouten

• a zonder href → de link werkt dan niet.
• Bullets vergeten te verwijderen → haal deze weg met list-style-type: none;.
• Onlogische linkteksten → zeg niet klik hier, maar Contact of Over mij.