07 – Links & Navigation 🔗

Verbinde Seiten – das Herz des Webs

🔗 1. Was sind Links – und warum sind sie das Herz des Webs?

Ohne Links wäre das Web eine Sammlung isolierter Seiten. Mit Links entsteht ein vernetztes System – daher der Name: World Wide Web.

Jeder Link ist ein Verweis auf eine andere Ressource – sei es eine Seite, ein Bild, eine E-Mail-Adresse oder ein Abschnitt innerhalb derselben Seite.

💡 Grundprinzip: Ein Link braucht immer das <a>-Element und das href-Attribut.

📚 Vertiefung auf W3Schools – HTML Links

W3Schools erklärt alle Arten von Links – mit Beispielen und Sicherheitshinweisen.

🔗 W3Schools: HTML Links

🌐 2. Arten von Links

Typ	Beispiel	Verwendung
Intern	`<a href="kontakt.html">`	Verweis auf eine andere Seite deines Projekts
Extern	`<a href="https://www.htblatraun.at">`	Verweis auf eine fremde Website
E-Mail	`<a href="mailto:info@schule.at">`	Öffnet das E-Mail-Programm mit vorausgefüllter Adresse
Anker (interne Verankerung)	`<a href="#footer">`	Springt zu einem Element mit `id="footer"` auf dieser Seite

📎 3. Wichtige Attribute für sichere und klare Links

href – Pflicht. Ohne dieses Attribut ist <a> nur ein leerer Anker.
target="_blank" – Öffnet den Link in einem neuen Tab. Nur bei externen Links verwenden!
rel="noopener" – Sicherheitsmaßnahme bei target="_blank". Verhindert, dass die Zielseite auf dein Fenster zugreifen kann.

Beispiel für sicheren externen Link:

<a href="https://www.beispiel.at" target="_blank" rel="noopener">
  Externe Website
</a>

⚠️ Warnung: Verwende target="_blank" nicht für interne Links – das verwirrt Benutzer und ist schlecht für die Navigation.

🧭 4. Navigation – Praxisbeispiel

Eine Navigation ist eine geordnete Liste von Links. Semantisch korrekt wird sie mit <nav> und <ul> umgesetzt:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="ueber.html">Über</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</nav>

💡 Warum semantisch?
Screenreader erkennen <nav> als Navigation –
das verbessert die Barrierefreiheit erheblich.

♿ 5. Barrierefreiheit bei Links

Links müssen im Kontext verständlich sein – besonders für Screenreader-Nutzer, die oft nur die Linkliste hören.

❌ Schlecht:
<a href="html.html">Klicken Sie hier</a>
→ Ohne Kontext: Was passiert beim Klick?

✅ Gut:
<a href="html.html">Grundlagen von HTML</a>
→ Sofort klar: Inhalt und Ziel.

Auch bei Bild-Links muss der alt-Text das Ziel beschreiben:
<a href="start.html"><img src="home.png" alt="Zur Startseite"></a>

🧠 6. KI als Lernpartner – guter Prompt

❌ Schlecht: „Mach mir eine Navigation.“ ✅ Gut: „Kannst du mir eine barrierefreie Navigationsleiste mit internen Links für mein Tutorial zeigen – mit semantischer HTML-Struktur, Erklärung von href, und Hinweisen zur Barrierefreiheit?“