HTML-Lernseite Header

HTML Links und Navigation

Was ist ein Link?

Ein Link ist eine Verbindung von einer Stelle im Web zu einer anderen – egal ob zu einer anderen Seite, einem anderen Abschnitt oder sogar einer externen Website.
In HTML erstellst du einen Link mit dem <a>-Tag (steht für „anchor“ – also Anker):

<a href="https://example.com">Das ist ein Link</a>
  • href gibt das Ziel an.
  • Der Text zwischen <a> und </a> ist klickbar.

    • Interne und externe Links

  • Interne Links führen zu Seiten innerhalb deiner Website:
    Beispiel: <a href="kontakt.html">Kontakt</a>
  • Externe Links führen nach draußen ins Web:
    Beispiel: <a href="https://wikipedia.org" target="_blank">Wikipedia</a>
  • Mit target="_blank" öffnet sich der Link in einem neuen Tab – das ist bei externen Seiten üblich.

    • Sprungmarken: Direkt zu einem Abschnitt springen

    Du kannst mit Links auch innerhalb derselben Seite springen. Dazu brauchst du ein Ziel mit id.
    Das ist super praktisch bei längeren Seiten, z. B. für Inhaltsverzeichnisse oder „nach oben“-Links. 

    <a href="#faq">Zu den FAQs</a>

<!-- später auf der Seite -->
<h2 id="faq">Häufige Fragen</h2>

    Navigation strukturieren

    Eine Navigation ist die Hauptverbindung zwischen deinen Seiten. Meist ist sie oben auf der Seite als Menü zu sehen:
    Tipp: Verwende das <nav>-Element, um Suchmaschinen und Screenreadern zu zeigen, dass es sich um die Hauptnavigation handelt. 

    <nav>
  <a href="index.html">Start</a>
  <a href="tools.html">Tools</a>
  <a href="lernen.html">Lernen</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

    Best Practices für Links und Navigation

  • ✅ Sinnvolle Linktexte
    Statt „hier klicken“, lieber:
    <a href="kontakt.html">Schreib mir eine Nachricht</a>
  • ✅ Konsistente Navigation
    Die Menüstruktur sollte auf allen Seiten gleich sein.
  • ✅ Externe Links kennzeichnen
    Zum Beispiel mit einem kleinen Symbol oder target="_blank".
  • ✅ Barrierefreiheit beachten
    Links sollten mit Tastatur erreichbar und verständlich beschriftet sein.
  • ✅ Nicht zu viele Links auf einmal
    Eine übersichtliche Navigation hilft deinen Besuchern, sich zurechtzufinden.

    • Fazit
    Links sind das Herz des Webs. Mit einfachen <a>-Tags, gut strukturierten Navigationen und durchdachten Sprungmarken machst du deine Website benutzerfreundlich und zugänglich. Denk daran: Je klarer die Struktur, desto leichter findet man sich zurecht.