Aktuelle Version vom 20. Oktober 2025, 18:05 Uhr

HTML Links

HTML-Links (Hyperlinks) werden verwendet, um Webseiten miteinander zu verbinden. Sie bestehen aus dem <a>-Tag, das mit verschiedenen Attributen ausgestattet werden kann, um das Verhalten und Aussehen des Links zu beeinflussen. Im Folgenden werden zwei Beispiele für Links erklärt und die Bedeutung der verwendeten Attribute Schritt für Schritt erläutert.

Beispiel 1: Versionsinfo-Link

Dieser Link verweist auf eine Versionsinformation-Seite:

       <a href="https://enkis-nas.synology.me/version.html" target="_blank" rel="noopener" class="icon-btn" title="Versionsinfo">ⓘ</a>

Erklärung der Attribute:

href="https://enkis-nas.synology.me/version.html": Dies ist die URL, auf die der Link verweist. In diesem Fall wird die Seite version.html auf dem Server enkis-nas.synology.me geöffnet.
target="_blank": Das Attribut sorgt dafür, dass der Link in einem neuen Tab oder Fenster geöffnet wird. Ohne dieses Attribut würde der Link die aktuelle Seite ersetzen.
rel="noopener": Dieses Attribut sorgt dafür, dass der neue Tab keine Verbindung zur Ursprungsseite aufbauen kann, was Sicherheitsrisiken durch Manipulation von Inhalten verringert.
class="icon-btn": Das Attribut weist den Link auf eine CSS-Klasse hin, die für die Gestaltung des Links zuständig ist. In diesem Fall könnte die Klasse icon-btn dafür verantwortlich sein, dass der Link als Schaltfläche oder Symbol angezeigt wird.
title="Versionsinfo": Das Title-Attribut wird angezeigt, wenn der Benutzer mit der Maus über den Link fährt. Es zeigt eine kurze Beschreibung des Links an, hier "Versionsinfo".
ⓘ: Der Unicode für ein Informationssymbol, das als visuelles Element im Link angezeigt wird.

Beispiel 2: MediaWiki-Link

Dieser Link verweist auf die Hauptseite eines MediaWiki-Systems:

       <a href="https://wiki.enkis-nas.synology.me/mediawiki/index.php?title=Hauptseite" target="_blank" rel="noopener" class="app-card" title="FISI MediaWiki">

Erklärung der Attribute:

href="https://wiki.enkis-nas.synology.me/mediawiki/index.php?title=Hauptseite": Hier verweist der Link auf die Hauptseite eines MediaWiki-Systems. Die URL ist eine spezielle Abfrage, um zur Seite "Hauptseite" zu gelangen.
target="_blank": Wie im ersten Beispiel sorgt dieses Attribut dafür, dass der Link in einem neuen Tab oder Fenster geöffnet wird.
rel="noopener": Auch hier wird die Sicherheit verbessert, indem verhindert wird, dass der neue Tab in irgendeiner Weise mit der Ursprungsseite interagiert.
class="app-card": Das Attribut verweist auf eine CSS-Klasse, die für das Aussehen des Links verantwortlich ist. In diesem Fall könnte app-card für die Darstellung als eine Art "Kachel" oder "Kartenansicht" zuständig sein.
title="FISI MediaWiki": Das Title-Attribut gibt eine kurze Beschreibung des Links an, die beim Überfahren mit der Maus angezeigt wird. Hier ist es "FISI MediaWiki".

Zusammenfassung

In beiden Beispielen werden die grundlegenden HTML-Link-Attribute wie href, target, rel, class und title verwendet, um das Verhalten und Aussehen der Links zu steuern. Die Wahl der richtigen Attribute kann das Nutzererlebnis verbessern und die Sicherheit der Seite erhöhen.

HTML-Links sind ein essenzielles Element jeder Webseite und bieten eine einfache Möglichkeit, Inhalte zu verbinden und zu navigieren.