LU08a - Grundlagen der Seitennavigation

Beinahe jede statische Website besteht entweder aus mehreren einzelnen Inhaltsseiten oder aus einer grossen/langen Seite mit den Inhalten nacheinander. Beide Seitenkonzepte haben eines gemeinsam, eine Seitennavigation ist erforderlich, dass der Nutzer sich auf der Website zurechtfinden kann. In der LU02 haben Sie das <nav> Element kennegelernt und in der LU03 das <a> Element in der LU08 werden wie diese Elemente nun kombinieren und Seitennavigationen aufbauen.

Die grundlegende Syntax eines „a“-Tags sieht folgendermaßen aus:

<a href="URL">Linktext</a>

Hierbei steht href für „Hypertext Reference“ und die URL repräsentiert das Ziel des Links. Der Linktext ist der sichtbare Text, den der Benutzer anklicken kann.

• href: Das wichtigste Attribut des a-Tags. Es bestimmt das Ziel des Links. Dies kann eine vollständige URL (z.B. https://www.example.com), eine relative URL (z.B. index.html), ein Pfad zu einer anderen Ressource (z.B. images/pic.jpg) oder ein Sprunganker zu einem anderen Teil der gleichen Seite (z.B. #section1) sein.
• target: Bestimmt, wo der Link geöffnet wird. Das Attribut hat mehrere mögliche Werte, die wichtigsten sind _blank (öffnet den Link in einem neuen Fenster oder Tab) und _self (öffnet den Link im selben Fenster oder Tab, dies ist die Standardeinstellung).
• rel: Definiert die Beziehung zwischen der aktuellen Seite und der verlinkten Seite. Dieses Attribut hat viele mögliche Werte, zwei der häufigsten sind nofollow (teilt Suchmaschinen mit, dass sie den Link nicht für ihre Rankings berücksichtigen sollen) und noopener (verhindert, dass die neue Seite auf die ursprüngliche Seite zurückgreifen kann, was aus Sicherheitsgründen wichtig ist, wenn target=„_blank“ verwendet wird).
• download: Wenn dieses Attribut vorhanden ist, wird die verlinkte Ressource heruntergeladen, sobald der Benutzer auf den Link klickt. Dies ist besonders nützlich bei Dateien wie PDFs oder Bildern, die der Benutzer speichern könnte.
• title: Stellt zusätzliche Informationen über den Link bereit, die angezeigt werden, wenn der Benutzer mit der Maus über den Link fährt.

Hier ist ein Beispiel, wie alle diese Attribute in einem a-Tag verwendet werden könnten:

<a href="https://www.example.com" target="_blank" rel="noopener nofollow" download title="Beispiel-Link">Beispiel-Link</a>

In diesem Beispiel würde der Link zu https://www.example.com in einem neuen Tab öffnen, ohne Referrer-Informationen (durch noopener) und würde von Suchmaschinen nicht zur Ranking-Berechnung herangezogen werden (durch nofollow). Zudem würde die verlinkte Ressource beim Klick auf den Link heruntergeladen werden und beim Überfahren des Links mit der Maus würde „Beispiel-Link“ angezeigt werden.

Das nav-Element in HTML5 ist ein semantisches Element, das einen Abschnitt einer Webseite kennzeichnet, der Navigationslinks enthält. Diese Links dienen in der Regel dazu, den Benutzer zu anderen Teilen der Webseite oder zu anderen Webseiten zu führen.

Die grundlegende Syntax eines nav-Elements sieht folgendermaßen aus:

<nav>
  <a href="URL1">Linktext1</a>
  <a href="URL2">Linktext2</a>
  ...
</nav>

In diesem Beispiel enthält das nav-Element zwei Hyperlinks, die durch a-Tags repräsentiert werden. Jeder dieser Links führt zu einer anderen URL und hat einen eigenen Linktext.

Das nav-Element sollte für Hauptnavigationseinheiten verwendet werden, wie zum Beispiel die Hauptmenüleiste oder die Fußzeilennavigation. Es sollte nicht für jeden einzelnen Link auf einer Webseite verwendet werden.

Zu beachten ist, dass das nav-Element selbst keine speziellen Attribute besitzt. Stattdessen ist es in erster Linie ein semantisches Element, das dazu dient, den Inhalt der Webseite besser zu strukturieren und zugänglicher zu machen. Es kann jedoch zusammen mit anderen HTML-Elementen und -Attributen verwendet werden, um komplexe Navigationssysteme zu erstellen.

Hier ist ein etwas komplexeres Beispiel:

<nav>
  <ul>
    <li><a href="#section1">Sektion 1</a></li>
    <li><a href="#section2">Sektion 2</a></li>
    <li><a href="otherpage.html">Andere Seite</a></li>
  </ul>
</nav>

In diesem Beispiel wird das nav-Element zusammen mit einer ungeordneten Liste (ul) und Listenelementen (li) verwendet, um eine geordnete und strukturierte Navigation zu erstellen. Zwei der Links führen zu verschiedenen Sektionen auf derselben Seite (indiziert durch das #-Zeichen), während ein dritter Link zu einer anderen Webseite führt.

Zusammengefasst hilft das nav-Element dabei, die Struktur einer Webseite zu verbessern, sie zugänglicher zu machen und die Wartung des Codes zu erleichtern.

Kevin Maurizi, Marcel Suter