HTML – Anker setzen – einfach erklärt

veröffentlicht:

aktualisiert:

html-anker-setzen

Wie du in HTML einen Anker setzen kannst, das zeigt dir dieser Beitrag.Im Prinzip ist es ganz einfach, einen Anker zu setzen. Praktisch fällt es vielen – inkl. auch mir – schwer, bzw. muss man immer wieder nachsehen und vergisst es gleich wieder, wenn man es nicht ständig in Verwendung hat.

Was versteht man unter einem Anker ?

Einen Anker setzen, davon spricht man in HTML, wenn man auf ein bestimmtes Wort einen Link setzt. Klickt man auf diesen Link, springt/scrollt die Webseite zu dem sogenannten Anker. Dazu muss das Online Dokument natürlich lang genug sein, wenn man die Scrollfunktion aktiviert hat.

Wie sieht ein HTML Anker-Link aus ?

Wie sieht ein HTML Anker nun im Quelltext aus. Wenn ich z.B. auf das Wort Google einen Link setze, ist das einfach, denn dann nehme ich einfach die ULR von Google dazu.

Google >>> <a href="https://google.com">Google <a/>

Bei einem Anker benötigt man natürlich keine URL Angabe. Man setzt einfach, statt der URL eine Raute : #. Im Anschluss an die Raute ein bestimmtes Wort, z.B. > Webdesign.

<a href="#Webdesign">hier steht nix :-)</a>

Bei einem echten Link sieht der Leser ja z.B. nur das rosa Wort Google. Die Verlinkung ist ja nur in HTML sichtbar. Bei einem HTML Anker schreibt man keinen Text .

Wie sieht nun der HTML Anker aus ?

Der Anker verwendet dasselbe Wort, welches man gewählt hat, nur ohne die Raute : #.

<a name="Webdesign"></a>

TIPP:

Am besten verwedent man ein Wort oberhalb des Wortes, welches man anspringen möchte. ( Wenn die Richtung – sprung nach unten ist ) Denn, auf diese Weise wird nichts abgeschnitten.  Dieses Wort kann man dann unsichtbar machen, indem man eine Farbe wählt, welche nicht sichtbar ist bzw. auch ein Softhyphen.

Anker in WordPress ?

Wer das CMS WordPress verwendet, also wordpress.org, der hat hier schon ein paar Hilfen. Wie das in WordPress funktioniert, dass kannst du hier nachlesen. Wer es aunschaunlicher mag, der kann sich das ganze auch an Hand einer Info-Grafik ansehen.

Blogartikel von mediendesign-quer. WordPress, Webdesign, Social Media .. Alle Neuigkeiten erfahren >> Werde Fan auf Facebook

Veröffentlicht in Kategorie:

Top