Sie können Links zu anderen Webseiten des eigenen Projekts definieren (projektinterne Links), Links zu fremden Websites oder zu beliebigen URLs innerhalb anderer Websites (sogenannte Deeplinks).

Beispiel

<p>In <a href="../kapitel-3/c.html">Kapitel <b>3.c</b></a> wird der Beutelteufel 
näher behandelt. Auch der Artikel 
<a href="http://de.wikipedia.org/wiki/Beutelteufel" target="_blank">Wikipedia: 
Beutelteufel</a> empfiehlt sich als weitere Lektüre.</p>
<footer>
<a href="/index.html">
   <img src="/bilder/start.png" style="border: none;" alt="Start">
</a>
</footer>

Erläuterung

Hyperlinks in HTML werden durch <a>…</a> markiert (a = anchor = Anker). Im href-Attribut geben Sie das Verweisziel an ((href = hypertext reference = Hypertext-Referenz)). Erlaubt ist als Verweisziel alles, was im Buchabschnitt über Referenzierung beschrieben ist. Der Elementinhalt von <a>…</a> ist der für den Anwender anklickbar und führt bei Anklicken zum angegebenen Verweisziel.

Das obige Beispiel enthält drei Links: Der erste führt zu einer anderen HTML-Datei im aktuellen Projekt, wobei relative Adressierung zu einem anderen Verzeichnis verwendet wird. Der zweite Link führt zu einem fremden Web-Projekt (Wikipedia). Der dritte Link schließt als Elementinhalt anstelle eines Textes eine Grafikreferenz ein.

Mit Hilfe des Attributs target können Sie veranlassen, dass das Verweisziel nicht im aktuellen Browser-Fenster geöffnet wird, sondern in einem neuen Fenster/Tab bzw. in einem anderen Kontext (z.B. in der Sidebar, in einem Popup-Fenster oder in einem einem eingebetteten Frame-Fenster). Der häufigste Fall bei gewöhnlichen Hyperlinks dürfte sein, den Link in einem neuen Browser-Fenster/Tab zu öffnen. Dazu notieren Sie wie im obigen Beispiel target="_blank" (mitsamt dem Unterstrich).

Weitere Hinweise

Der Verweistext kann neben Text auch andere HTML-Elemente enthalten, so wie im obigen Beispiel etwa auch Grafikreferenzen (in dem Fall wird die Grafik anklickbar). Im Gegensatz zu HTML 4.01 darf ein a-Element in HTML5 sogar gruppierende Elemente wie p, ul, blockquote usw. umfassen.

Das target-Attribut gehört seit HTML5 wieder vollumfänglich zum Standard. In HTML 4.01 war es in der Strict-Variante nicht mehr erlaubt. Es wird jedoch empfohlen, sparsam davon Gebrauch zu machen. Denn normalerweise ist es besser, dem Anwender die Entscheidung zu überlassen, ob er einen Link in einem anderen Fenster öffnen möchte oder nicht. Neben dem Wert "_blank" sind auch die festen Werte "_self" (aktuelles Fenster), "_parent" (Elternfenster), "_top" (oberste Fensterebene) sowie Namen von Fenstern erlaubt, die z.B. mit JavaScript geöffnet wurden.

Die anklickbaren Verweistexte werden von Web-Browsern normalerweise unterstrichen und in unterschiedlichen Farben dargestellt, je nachdem, od Sie das Verweisziel zuvor schon einmal aufgerufen haben oder nicht. All diese Eigenschaften können Sie mit Hilfe von CSS bzw. CSS-Eigenschaften nach Wunsch beeinflussen. Praxisbeispiele zur layout-technischen Ausgestaltung von Hyperlinks finden Sie im Buchabschnitt über Hyperlink-Gestaltung.

Verweise lenken die Aufmerksamkeit des Anwenders auf sich. Wenn Sie Verweise mitten im Text notieren, ist es besser, als Verweistext inhaltlich beschreibende Wörter anbieten, als Wörter ohne Inhalt.
Schlecht ist: zurück (wohin eigentlich?)
Besser ist: zurück zu Kapitel 3
Schlecht ist: Für weitere Information klicken Sie hier (was gibt es denn „hier“?)
Gut ist: Weitere Information können Sie ebenfalls aufrufen.

Beachten Sie im Zusammenhang mit Links auf beliebige Ziele auch den Buchabschnitt Rechtliche Aspekte von Links.

Referenzinformationen

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.