Link oder das A-Element - der Hyperlink

zum Menu

Was ist ein Hyperlink?

Hypertext und Hyperlink

Ein Hyperlink ist ein Verweis und er heißt so, weil er in der Hypertext Markup Language (HTML) vorkommt. HTML ist kein normaler linearer Text, der einen Anfang und ein Ende hätte. HTML ist vielmehr ein Netz von Informationen. HTML ist, wenn es gutes HTML ist, nicht autonom, sondern bezieht andere Informationen (Menschen) mit ein. Den Link benutzt du, um andere Informationen zu deinem Text hinzuzufügen (Informationen zu verknüpfen, Engl. link), das kann ich z.B. machen, indem ich auf den entsprechenden Wikipedia Text verlinke. Wichtiger, als man denkt, ist die Tatsache, dass ein Link als solcher wahrnehmbar sein sollte. Der Urlink ist unterstrichen und lila. So sieht man sofort, dass es sich um einen Link handelt. Das mag trivial klingen, ist es aber nicht, denn deine Besucher werden nicht merken, dass sie auf etwas klicken können, wenn du es ihnen nicht deutlich machst.


<a href= "https://de.wikipedia.org/wiki/Hypertext" target="_blank" >Ich bin ein Link zu Wikipedia.</a>

Ich bin ein Link zu Wikipedia.

Das Href-Attribut beinhaltet das Ziel, z.B. Wikipedia. Du solltest versuchen, nur auf "gute" Seiten zu verlinken, schließlich willst du ja nicht, dass deine Besucher einen Virus bekommen, außerdem klicken Besucher auf einen Link, weil sie Informationen erwarten und werden enttäuscht sein, wenn die Informationen zweitrangig sind. Weitere wichtige Informationen findst du auf der Seite von Mozilla. Interessant ist vor allem das Target-Attribut, denn wenn du auf eine Seite verlinkst, ist deine Seite weg, weil die neue Seite in demselben Fenster geöffnet wird, in dem deine Seite geöffnet ist. Benutzt du aber das Target-Attribut mit dem Wert "_blank", so wird die verlinkte Seite in einem neuen Tab geöffnet (target="_blank").

Der Link, ein Inline-Element

Das A-Element ist eigentlich ein Inline-Element. Mit style="display: block;" kannst du es aber zu einem Blockelement machen. Daher behandeln wir das A-Element im Abschnitt CSS und nicht HTML. Lassen wir das A-Element inline sein, so reihen sich die Links schön nebeneinander auf mit Leerzeichen dazwischen.


<a href="#" >Testlink Nr. 1</a>
<a href="#" >Testlink Nr. 2</a>
<a href="#" >Testlink Nr. 3</a>

Testlink Nr. 1 Testlink Nr. 2 Testlink Nr. 3

Manchmal wollen wir Links stapeln. Dann machen wir sie zu Blockelementen.


<a href="#" style="display: block;" >Testlink Nr. 1</a>
<a href="#" style="display: block;" >Testlink Nr. 2</a>
<a href="#" style="display: block;" >Testlink Nr. 3</a>

Testlink Nr. 1 Testlink Nr. 2 Testlink Nr. 3

Sicherlich geht das eleganter, als den Stil inline zu definieren, z.B. wäre eine Stildefinition für die Links in einem Stilesheet angebracht. Dann brauchst du den Stil nur einmal für alle relevanten A-Elemente anzugeben. Das hier ist nur zur Demonstration.

    © primitivecode.com    CSS ist valide!