Links & Navigation

Links sind das Fundament des Internets. Ohne Links waere das Web nur eine Sammlung einzelner, unverbundener Seiten. In diesem Kapitel lernst du alles ueber Links — von den Grundlagen bis zur Navigation.

Der Anker-Tag: <a>

Links werden mit dem <a>-Tag (Anchor) erstellt:

<a href="https://www.example.com">Besuche Example.com</a>

• href (Hypertext Reference) — die Zieladresse
• Inhalt — der klickbare Text (oder ein Bild, Button, etc.)

Arten von Links

1. Externe Links

Links zu anderen Webseiten:

<a href="https://www.wikipedia.org">Zu Wikipedia</a>
<a href="https://www.google.com">Zu Google</a>

2. Interne Links

Links zu anderen Seiten deiner eigenen Webseite:

<!-- Relativ zum aktuellen Ordner -->
<a href="about.html">Ueber mich</a>
<a href="kontakt.html">Kontakt</a>

<!-- In einem Unterordner -->
<a href="blog/artikel-1.html">Erster Artikel</a>

<!-- Eine Ebene hoch -->
<a href="../index.html">Zur Startseite</a>

3. Anker-Links (Sprungmarken)

Links zu einem bestimmten Abschnitt auf derselben Seite:

<!-- Navigation mit Anker-Links -->
<nav>
    <a href="#einfuehrung">Einfuehrung</a>
    <a href="#grundlagen">Grundlagen</a>
    <a href="#kontakt">Kontakt</a>
</nav>

<!-- Die Ziel-Abschnitte -->
<section id="einfuehrung">
    <h2>Einfuehrung</h2>
    <p>Hier beginnt der Inhalt...</p>
</section>

<section id="grundlagen">
    <h2>Grundlagen</h2>
    <p>Die Grundlagen erklaert...</p>
</section>

<section id="kontakt">
    <h2>Kontakt</h2>
    <p>So erreichst du mich...</p>
</section>

4. Spezielle Links

<!-- E-Mail-Link -->
<a href="mailto:info@example.com">E-Mail schreiben</a>

<!-- Telefon-Link (wichtig fuer Mobilgeraete) -->
<a href="tel:+491234567890">Anrufen: 0123 456 7890</a>

<!-- Download-Link -->
<a href="dokument.pdf" download>PDF herunterladen</a>

<!-- Link zu einem bestimmten Abschnitt auf einer anderen Seite -->
<a href="blog.html#kommentare">Zu den Kommentaren</a>

Das target-Attribut

Mit target bestimmst du, wo der Link geoeffnet wird:

<!-- Im selben Tab oeffnen (Standard) -->
<a href="https://example.com">Im selben Tab</a>

<!-- In einem neuen Tab oeffnen -->
<a href="https://example.com" target="_blank">In neuem Tab</a>

Sicherheit bei target="_blank"

Wenn du target="_blank" verwendest, fuege immer rel="noopener noreferrer" hinzu:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
    Sicherer Link in neuem Tab
</a>

Attribut	Schuetzt vor
noopener	Die neue Seite kann nicht auf deine Seite zugreifen
noreferrer	Die neue Seite sieht nicht, woher der Besucher kam

Navigation erstellen

Eine Navigation ist eine Sammlung von Links, eingebettet im <nav>-Tag:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">Ueber mich</a></li>
        <li><a href="projekte.html">Projekte</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>

Horizontale Navigation mit CSS

<nav>
    <ul style="display: flex; list-style: none; gap: 1.5rem; padding: 0;">
        <li><a href="/">Home</a></li>
        <li><a href="/about">Ueber mich</a></li>
        <li><a href="/projekte">Projekte</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
    </ul>
</nav>

Aktiven Link markieren

<nav>
    <ul>
        <li><a href="/" aria-current="page">Home</a></li>
        <li><a href="/about">Ueber mich</a></li>
        <li><a href="/projekte">Projekte</a></li>
    </ul>
</nav>

nav a[aria-current="page"] {
    font-weight: bold;
    color: #e44d26;
    text-decoration: underline;
}

Links barrierefrei gestalten

Beschreibende Linktexte

<!-- Schlecht -->
<a href="preise.html">Klicke hier</a>
<a href="agb.html">Mehr</a>

<!-- Gut -->
<a href="preise.html">Unsere Preise ansehen</a>
<a href="agb.html">Allgemeine Geschaeftsbedingungen lesen</a>

Links mit zusaetzlichem Kontext

<!-- Fuer Screenreader: Versteckter Zusatztext -->
<a href="bericht.pdf" download>
    Jahresbericht herunterladen
    <span class="sr-only">(PDF, 2.4 MB)</span>
</a>

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

Fokus-Styles beibehalten

/* Niemals den Fokus-Indikator entfernen! */
a:focus {
    outline: 2px solid #264de4;
    outline-offset: 2px;
}

Bilder als Links

Du kannst auch Bilder klickbar machen:

<a href="https://example.com">
    <img src="logo.png" alt="Zur Startseite von Example.com">
</a>

Wichtig: Das alt-Attribut des Bildes sollte beschreiben, wohin der Link fuehrt, nicht was auf dem Bild zu sehen ist.

Relative vs. absolute Pfade

Typ	Beispiel	Verwendung
Absolut	https://example.com/seite.html	Links zu anderen Webseiten
Relativ (gleicher Ordner)	seite.html	Links innerhalb des Projekts
Relativ (Unterordner)	blog/post.html	Links in Unterordner
Relativ (nach oben)	../index.html	Links eine Ebene hoch
Root-relativ	/about.html	Links relativ zur Domain

<!-- Projekt-Struktur:
     /
     ├── index.html
     ├── about.html
     └── blog/
         ├── index.html
         └── post-1.html
-->

<!-- Von /blog/post-1.html aus: -->
<a href="../index.html">Zur Startseite</a>      <!-- Eine Ebene hoch -->
<a href="../about.html">Ueber mich</a>           <!-- Eine Ebene hoch -->
<a href="index.html">Blog-Uebersicht</a>         <!-- Gleicher Ordner -->
<a href="/index.html">Zur Startseite</a>          <!-- Root-relativ -->

Link-Styling mit CSS

Links haben verschiedene Zustaende, die du individuell stylen kannst:

/* Normaler Link */
a:link {
    color: #264de4;
    text-decoration: none;
}

/* Bereits besuchter Link */
a:visited {
    color: #7b2d8e;
}

/* Maus darueber */
a:hover {
    color: #e44d26;
    text-decoration: underline;
}

/* Beim Klicken */
a:active {
    color: #c0392b;
}

/* Beim Fokussieren (Tastatur) */
a:focus {
    outline: 2px solid #264de4;
    outline-offset: 2px;
}

Merkhilfe fuer die Reihenfolge: LoVe HAte — Link, Visited, Hover, Active.

Uebungen

Uebung 1: Mehrseitige Webseite

Erstelle drei HTML-Dateien (index.html, about.html, kontakt.html) und verlinke sie miteinander ueber eine gemeinsame Navigation.

Uebung 2: FAQ mit Anker-Links

Erstelle eine FAQ-Seite mit einer Navigation oben, die zu den einzelnen Fragen weiter unten auf der Seite springt.

Uebung 3: Link-Styles

Style die Links deiner Navigation mit CSS — unterschiedliche Farben fuer normal, hover und active.

Was kommt als Naechstes?

Im naechsten Kapitel lernst du alles ueber Bilder und Medien in HTML:

• Bilder einbinden und optimieren
• Responsive Bilder mit <picture> und srcset
• Audio und Video einbetten

Zusammenfassung

• Links werden mit <a href="..."> erstellt
• Es gibt externe, interne und Anker-Links (Sprungmarken)
• target="_blank" oeffnet Links in einem neuen Tab — immer mit rel="noopener noreferrer"
• Beschreibende Linktexte sind wichtig fuer Barrierefreiheit
• Die LVHA-Reihenfolge (Link, Visited, Hover, Active) gilt beim CSS-Styling von Links
• Navigation wird mit <nav> und einer Liste von Links gebaut

---