HTML Anker als Sprungmarke setzen

HTML Anker als Sprungmarken zu setzen, bietet sich an um Webseiten übersichtlicher zu gestalten. Besonders bei sehr langen Seiten wird der Besucher über einen seiteninternen Verweis mittels Sprungmarke direkt zu der Stelle geführt die für ihn von Interesse ist.

Mit dem Anchor-Tag kann praktisch jedes Element innerhalb eines HTML-Dokuments zu einer Sprungmarke werden.

Auch als Inhaltsverzeichnis von Blog-Seiten mit Verweis auf weitere Artikel oder als Link zu anderen HTML-Seiten sind Sprungmarken bestens geeignet.

Um eine Website sauber zu strukturieren und dem Nutzer Zeit zu sparen, sind Sprungmarken mit dem HTML Anker eine saubere HTML5 konforme Usererleichterung.

Der Anker wird in der HTML Auszeichnungssprache verwendet um Seiteninterne oder Externe Verweise mittels Sprungmarken und Hyperlinks zu gestalten. Auf das definierte Sprungziel kann von jeder beliebigen Stelle des Dokuments verwiesen werden.

Mit href (engl. hyper reference oder auf deutsch Hypertext-Referenz) und a ( engl. anchor oder auf deutsch Anker) wird die Sprungmarke oder der Link angewiesen.

Die Sprungmarke muss zwingend über das hashtag "#" gekennzeichnet sein.

Außerdem ist der Punkt an dem gesprungen wird mit dem id-Attribut zu definieren. Jede id darf nur einmal im HTML-Dokument vorhanden sein, muss also einen eindeutigen Namen haben.

Als Werte sind für eine id nur lateinische Buchstaben, arabische Ziffern, der Punkt (.), der Bindestrich (-) und der Unterstrich (_) erlaubt.

<a href="#ueberschrift2">Gehe zu Überschrift 2</a>

Zeigt dem Browser wohin er springen soll.

<h2 id="ueberschrift2">Überschrift 2</h2>

Definiert eindeutig das Sprungziel.

Im ersten Beispiel wird der Besucher mittels einer Sprungmarke vom Inhaltsverzeichnis am Seitenanfang zur obigen H2 Überschrift verwiesen.

Zielanweisung:

<ul>

<li><a href="#anker1>HTML Anker setzen seiteninterner Verweis</a></li>

</ul>

Sprungmarke:

<h2 id="anker1">HTML Anker setzen seiteninterner Verweis</h2>

Mit dieser Vorgehensweise kann jede beliebige Stelle im Dokument angesprungen werden. Es ist lediglich zu beachten, das die id`s unterschiedliche Namen haben.

Natürlich kann auch an eine Stelle im normalen Textfluss gesprungen werden, um dieses umzusetzen wird der Anker einfach im Text platziert.

Beispiel:

Letzte Woche habe ich einen Webhoster in Hamburg besucht. Am Abend gingen wir in ein gutes Restaurant zum Essen. Dabei haben wir einige <a href="#anker2"> schöne Bilder </a> gemacht.

Der Verweis führt zu den schönen Bildern die mit der id anker2 definiert sind.

Um einen HTML Anker auf eine andere Seite oder Datei zu setzen wird zusätzlich die URL der Zielseite angegeben. Auf dieser Seite wird wieder die Sprungmarke mit dem id-Attribut festgelegt.

In der Syntax werden nun zwei Werte notiert, die Ziel-URL und der dort definierte Anker. 

• Die Zuweisung auf eine seiteninterne Datei ( Unterverzeichnis ) kann mit relativen Links erfolgen. Die Dienstart ( http:// ) sowie die Domain ( www.myspartester) mit Länderkürzel ( .de ) entfällt hier und spart Speicherplatz.

< a href="unterverzeichnis/datei1.htm" "#anker3">Unterverzeichnis Datei1</a>

• Die Zuweisung auf Externe Webseiten erfolgt mit einem absoluten Link.

< a href="http://www.andereseite.de/ziel" "#anker4">Zum Ziel</a>

Ohne die Sprungmarke #anker3 springt der Browser zum Seitenanfang der jeweiligen Unterseite oder Url.

Wenn dem Header mit der Navigation der Website der Wert position:fixed zugewiesen wurde ergibt sich ein Problem mit der Sichtbarkeit des Ankers. Da der Header in diesem Fall angewiesen wird beim Scrollen stehenzubleiben, und der Browser den Anker an den Seitenanfang setzt wird das Sprungziel vom Header überdeckt.

Mit CSS kann dieses Problem elegant gelöst werden. Dem Anker wird ein Class-Selektor zugewiesen mit dem die Sprungmarke um die Höhe des Headers nach unten verschoben wird.

<a href="#anker5">html anker setzen position:fixed</a>

<h3 id="anker5" class="position">Position der h3 unterhalb Header</h3>

    .position::before {

        display: block;

        content: "";

        height:120px;

        margin-top: -120px;

        visibility: hidden;

    }

Mit ::before wird ein Pseudoelement definiert um dem Anker weitere Anweisungen mitzugeben. In CSS3 wurde die Notation des Wertes auf zwei Doppelpunkte geändert ( ::before). Das soll zur eindeutigen Unterscheidung von Pseudoelementen und Pseudoklassen dienen.

Die Werte von height und margin-top enthalten die Höhe des Headers und können abgeändert werden.

Die am meisten verbreitete Art einen HTML Anker zu setzen ist der Sprung zurück zum Seitenanfang. Fast jede Webseite benutzt einen solchen Anker damit der Besucher ohne zu Scrollen direkt zum Beginn der Seite gelangt.

• <a href="">Zum Seitenanfang</a> enthält keinen Verweis auf eine Sprungmarke, der Browser springt zum Seitenanfang.
• <a href="#">Zum Seitenanfang</a> enthält ebenfalls keinen Verweis auf eine Sprungmarke, der Browser springt zum Seitenanfang.
• <a href="#top">Zum Seitenanfang</a> verweist auf eine nicht vorhandene Sprungmarke, der Browser springt zum Seitenanfang.

Mit der Zuweisung von Pseudoklassen lassen sich mit CSS alle Arten von Scroll-Buttons generieren.