HTML-Links
Links navigieren zu anderen Seiten oder Seitenabschnitten. Erstelle HTML-Links mit dem <a>-Tag: href, absolute vs. relative URLs und target.
Websites enthalten verschiedene Arten von Links, die dich direkt zu anderen Seiten führen oder dir ermöglichen, zu einem bestimmten Abschnitt der Seite zu navigieren. Links in HTML werden als Hyperlinks bezeichnet. Sie werden mit dem <a>-Tag definiert.
Hyperlinks können auf einen Ausdruck, ein Wort, ein Bild oder ein beliebiges HTML-Element angewendet werden.
Die Standardfarbe von Links in HTML ist:
- nicht besuchte Links: unterstrichen und blau
- besuchte Links: unterstrichen und lila
- aktive Links: unterstrichen und rot
Dies ist der Standardstil von Links, aber du kannst die Unterstreichung entfernen oder die Farbe der Links ändern mithilfe von CSS-Stilen.
Syntax
Das <a>-Tag kommt paarweise vor: Das öffnende <a> gibt an, wo der Link beginnen soll, und das schließende </a> zeigt an, wo der Link endet.
Um einen Hyperlink zu erstellen, solltest du das <a>-Tag und das href-Attribut verwenden, dessen Wert die URL oder der Ort ist, auf den der Link verweist.
HTML-Links
<a href="url">your text</a>.Beispiel des HTML-<a>-Tags mit dem href-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Link example</h2>
<a href="https://www.w3docs.com/">W3Docs.com</a>
</body>
</html>Im obigen Beispiel haben wir <h2> verwendet, um eine Überschrift zweiter Ordnung zu definieren, und das <a>-Tag, um einen Link zu erstellen. Zwischen den <a>- und </a>-Tags befindet sich der Text W3Docs.com, den der Browser als unterstrichenen blauen Link darstellt. Ein Klick darauf leitet den Benutzer zur Startseite unserer Website weiter.
Target-Attribut
Um einen Link in einer neuen Seite zu öffnen, musst du target="_blank" zu deinem Code hinzufügen. Das target-Attribut gibt genau an, wo die verlinkte Seite geöffnet werden soll. Mit target="_blank" wird die verlinkte Seite in einem neuen Fenster oder einem neuen Tab geöffnet.
Die häufigsten Werte für target sind:
_self— im selben Tab öffnen (das ist der Standard, daher schreibt man ihn selten hin)._blank— in einem neuen Tab oder Fenster öffnen.
HTML-Links
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>Warum rel="noopener noreferrer" wichtig ist
Beachte das rel="noopener noreferrer" am obigen Link. Wenn du einen Link mit target="_blank" öffnest, kann die neue Seite normalerweise über die Eigenschaft window.opener auf die Seite zugreifen, die sie geöffnet hat. Eine bösartige Seite könnte dies nutzen, um deinen ursprünglichen Tab still und heimlich auf eine Phishing-Seite umzuleiten — ein Angriff, der als Reverse Tabnabbing bezeichnet wird.
Das Hinzufügen von rel="noopener" unterbricht diese Referenz, sodass die neue Seite nicht auf deinen Tab zugreifen kann. noreferrer bewirkt dasselbe und verhindert zusätzlich, dass der Browser den Referer-Header an die neue Seite sendet. Als Faustregel gilt: Füge immer rel="noopener noreferrer" hinzu, wenn du mit target="_blank" auf eine externe Website verlinkst.
ID-Attribut
Um zu einem bestimmten Abschnitt der Seite zu navigieren, verwende das id-Attribut.
So geht es:
-
Verwende das
id-Attribut, um dem Abschnitt der Seite einen Namen zu geben, zu dem der Benutzer nach dem Klicken auf den Link weitergeleitet werden soll. Der Wert des Attributs kann ein Wort oder ein Ausdruck sein, der diesen Abschnitt beschreibt (wenn du einen Ausdruck verwendest, darf er keine Leerzeichen enthalten — verwende stattdessen Unterstriche).
Bsp.<h2 id="jump">Link example with id attribute</h2>. Wir haben dasid-Attribut mit dem Namen „jump" verwendet. -
Erstelle einen Hyperlink mit der
iddes Linkziels, dem ein Rautezeichen (#) vorangestellt ist.
Bsp.<a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.
Schauen wir uns nun an, wie das im HTML-Code aussieht. Scrolle im folgenden Beispiel zum Link am Ende, klicke darauf, und du kehrst wieder zum Anfang zurück.
Beispiel des HTML-<a>-Tags mit dem id-Attribut:
Beispiel des Links mit einem id-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="jump">Link example with id attribute</h2>
<p>
Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
</body>
</html>Du kannst auch zu einer id auf einer anderen Seite springen, indem du das Fragment an das Ende der URL dieser Seite anfügst. Wenn die about-Seite beispielsweise ein Element mit id="contact" hat, öffnet dieser Link die Seite und scrollt direkt dorthin:
<a href="/about#contact">Contact us</a>Einen Hyperlink auf ein Bild anwenden
Um einen Hyperlink auf ein Bild anzuwenden, musst du das Bild lediglich in das <a>-Tag einbetten. Dies erfolgt mit dem <img>-Tag, das einige erforderliche Attribute haben sollte:
- src - die Quelle des Bildes
- alt - alternativer Text für das Bild
- width - Breite des Bildes
- height - Höhe des Bildes
Beispiel der <a>- und <img>-Tags zum Anwenden eines Hyperlinks auf ein Bild:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>HTML-Bilder werden im nächsten Kapitel ausführlich behandelt.
Link-Titel
Das title-Attribut wird verwendet, um zusätzliche Informationen über ein Element anzugeben. Diese Informationen werden häufig als Tooltip-Text angezeigt, wenn du die Maus über das Element bewegst.
Beispiel von Link-Titeln:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Link Title Example</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>The <span class="attribute">title</span> attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
</body>
</html>Absolute vs. relative URLs
Der Wert, den du in href angibst, kann eine von zwei Arten von Adressen sein. Den Unterschied zu kennen, ist einer der wichtigsten Aspekte beim korrekten Verlinken.
Eine absolute URL ist die vollständige Webadresse, einschließlich des Protokolls (https://) und des Domainnamens. Verwende sie, um auf eine Seite auf einer anderen Website zu verlinken:
<a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a>Eine relative URL verweist auf eine Seite auf derselben Website, beschrieben relativ zum Standort der aktuellen Seite. Der Browser ergänzt Protokoll und Domain für dich. Relative URLs gibt es in einigen Varianten:
<!-- Same folder as the current page -->
<a href="./contact.html">Contact</a>
<!-- One folder up, then into another folder -->
<a href="../images/logo.png">Logo</a>
<!-- Root-relative: starts at the site root, no matter where the current page is -->
<a href="/about">About us</a>Wie man wählt:
- Ein führendes
/(ein root-relativer Pfad wie/about) beginnt immer von der obersten Ebene deiner Website aus, sodass derselbe Link auf jeder Seite funktioniert. Dies ist in der Regel die sicherste Wahl für die seitenweite Navigation. ./bedeutet „dieser Ordner" und../bedeutet „einen Ordner nach oben". Diese dokumentrelativen Pfade funktionieren nicht mehr, wenn du die Seite später in einen anderen Ordner verschiebst — verwende sie daher mit Bedacht.- Verwende eine vollständige absolute URL nur, wenn das Ziel auf einer anderen Domain liegt.
Weitere Informationen zum Aufbau von URLs findest du unter HTML URL.
Beispiel für absolute und relative Links:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>External and internal paths</h1>
<p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML (absolute)</a></p>
<p><a href="/about">About us (root-relative)</a></p>
</body>
</html>E-Mail- und Telefonlinks
Der href-Wert ist nicht auf Webseiten beschränkt. Mit speziellen URL-Schemas kannst du das Mail-Programm des Benutzers öffnen oder auf einem Smartphone einen Anruf starten.
Ein mailto:-Link öffnet eine neue E-Mail an die angegebene Adresse:
<a href="mailto:[email protected]">Email us</a>Ein tel:-Link ermöglicht es mobilen Benutzern, durch Antippen eine Telefonnummer zu wählen:
<a href="tel:+15551234567">Call us</a>Die Attribute rel, download und hreflang
Neben href, target und title akzeptiert das <a>-Tag noch weitere nützliche Attribute.
Das rel-Attribut beschreibt die Beziehung zwischen der aktuellen Seite und der verlinkten Seite. Du hast bereits rel="noopener noreferrer" für die Sicherheit gesehen. Ein weiterer häufiger Wert ist rel="nofollow", der Suchmaschinen anweist, kein Ranking-Guthaben an den Link weiterzugeben:
<a href="https://example.com" rel="nofollow">Sponsored link</a>Das download-Attribut weist den Browser an, das Ziel herunterzuladen, anstatt dorthin zu navigieren. Du kannst ihm einen Wert geben, um einen Dateinamen vorzuschlagen:
<a href="/files/report.pdf" download="annual-report.pdf">Download the report</a>Das hreflang-Attribut gibt die Sprache des verlinkten Dokuments an. Es ändert das Verhalten für Benutzer nicht, hilft jedoch Browsern und Suchmaschinen, das Ziel zu verstehen:
<a href="https://example.fr/" hreflang="fr">French version</a>Die vollständige Liste der Attribute, die das <a>-Tag unterstützt, findest du in der HTML-<a>-Tag-Referenz.
Barrierefreiheit: Beschreibende Linktexte verfassen
Benutzer von Screenreadern springen häufig von Link zu Link und hören dabei nur den Linktext ohne Kontext. Vage Bezeichnungen wie „hier klicken" oder „mehr lesen" sagen ihnen nichts darüber aus, wohin der Link führt. Schreibe Linktexte, die das Ziel für sich allein beschreiben:
<!-- Avoid: meaningless out of context -->
<p>To learn about our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text describes the target -->
<p>See our <a href="/pricing">pricing plans</a>.</p>Halte die aussagekräftigen Wörter innerhalb der <a>-Tags, stelle sicher, dass Links sich vom umgebenden Text abheben, und vermeide es, die bloße URL als Linktext für wichtige Links zu verwenden.