HTML: Anker erstellen – So wirds gemacht!

Ad

Oft ist es praktisch auf gewisse Stellen in einer HTML-Datei zu verlinken. Dies wird mit Ankern gemacht. Du kannst dadurch einen Leser auf einen anderen Bereich der Seite mit einem Link verweisen. Du kannst es dir auch als eine Sprungmarke innerhalb einer Seite eines HTML-Dokuments vorstellen.

So kannst du in HTML einen Anker (Sprünge) erstellen:

Es gibt zwei gängige Methoden, um einen Anker (Sprünge) in HTML zu erstellen:

Das <a>-Tag:

  • Das <a>-Tag (Hyperlink) wird verwendet, um Links zwischen verschiedenen Seiten oder Abschnitten derselben Seite zu erstellen.
  • Um einen Sprunganker zu erstellen, fügst du das Attribut name mit einer eindeutigen ID zum <a>-Tag hinzu.
  • An den Link, der auf den Anker verweist, fügst du ein #-Symbol gefolgt von der ID des Ankers an.

Beispiel:

HTML
<a name="meinanker">Nach oben springen</a>

... (weiterer Text)

<p><a href="#meinanker">Klicken Sie hier, um zum Anfang der Seite zu springen.</a></p>

Das <id>-Attribut:

  • Das <id>-Attribut kann verwendet werden, um eine eindeutige ID für jedes beliebige HTML-Element zu erstellen.
  • Um einen Sprunganker mit <id> zu erstellen, fügst du das Attribut einfach zu dem Element hinzu, zu dem du springen möchtest.
  • Verweise auf den Anker erfolgen dann mit einem #-Symbol gefolgt von der ID des Elements.

Beispiel:

HTML
<h2 id="meinanker">Überschrift 1</h2>

... (weiterer Text)

<p><a href="#meinanker">Klicken Sie hier, um zu Überschrift 1 zu springen.</a></p>

Hinweis:

  • Ankernamen sollten aussagekräftig und eindeutig sein, um die Navigation zu erleichtern.
  • Du kannst Sprunganker verwenden, um zu bestimmten Abschnitten langer Seiten zu springen, z. B. Inhaltsverzeichnissen, Artikeln oder Formularen.
  • Achte darauf, dass die interne Verlinkung mit Sprungankern barrierefrei zugänglich ist, indem du Screenreadern und anderen Hilfsmitteln geeignete Beschreibungen zur Verfügung stellst.


Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?