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.

HTML Anker Beschreibung

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.

Sprunganweisung zum mit id gekennzeichneten Ziel:

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

Zeigt dem Browser wohin er springen soll.

Anker am Zielpunkt setzen

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

Definiert eindeutig das Sprungziel.

Seiteninterner Verweis

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.

Anker auf eine andere Datei oder ein externes Dokument (andere Seite) setzen.

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.

position:fixed springt zu weit.

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.

Die Zielanweisung bleibt gleich.

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

Der Anker erhält einen Class-Selektor

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

Die Class Definition in CSS

 

    .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.

Sprungmarke zum Seitenanfang

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.


Habt ihr noch Fragen zum Artikel über HTML Anker?

Bitte schreiben:

Kommentar schreiben

Kommentare: 7
  • #1

    Mui Yarber (Mittwoch, 01 Februar 2017 13:10)


    Just wish to say your article is as astounding. The clarity in your post is just nice and i could assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please continue the rewarding work.

  • #2

    Clorinda Carberry (Donnerstag, 02 Februar 2017 22:15)


    Hello to all, the contents existing at this site are truly amazing for people knowledge, well, keep up the nice work fellows.

  • #3

    Loyd Timm (Freitag, 03 Februar 2017 06:27)


    Hi, i think that i saw you visited my weblog so i came to �return the favor�.I'm trying to find things to enhance my web site!I suppose its ok to use some of your ideas!!

  • #4

    Wanda Hartmann (Freitag, 03 Februar 2017 09:02)


    I love what you guys are up too. This kind of clever work and exposure! Keep up the excellent works guys I've incorporated you guys to our blogroll.

  • #5

    Hsiu Mckinney (Samstag, 04 Februar 2017 23:02)


    Definitely believe that which you said. Your favorite reason seemed to be on the web the simplest thing to be aware of. I say to you, I definitely get annoyed while people consider worries that they plainly don't know about. You managed to hit the nail upon the top and defined out the whole thing without having side-effects , people can take a signal. Will likely be back to get more. Thanks

  • #6

    Randa Heppner (Dienstag, 07 Februar 2017 01:26)


    Paragraph writing is also a excitement, if you be familiar with afterward you can write otherwise it is complex to write.

  • #7

    zmx (Mittwoch, 08 März 2017 23:24)

    klasse erklärt, nur
    bei mir funktioniert der ("verschobene") Sprung in chrome und auch
    in der HTMLpad firefox preview perfekt, aber in Firefox (51) leider nicht :(
    woran könnte das liegen?
    welche FF Spezialität o.ä muß ich ggf. überprüfen?
    (meine verdeckende Menuleiste hat z-index 3,
    die Tabelle mit den Ankern z-index 1)
    danke.