Es ist eines der fundamentalsten Elemente in HTML. Es wird primär verwendet, um Hyperlinks zu erstellen, die Nutzer zu anderen Webseiten, Dateien oder Abschnitten innerhalb einer Seite führen. Dieser Tag ist alleinstehend funktionslos und sollte daher stets in Verbindung mit dem Attribut href genutzt werden. Ein <a> ohne href ist nach HTML5 syntaktisch erlaubt, stellt jedoch keinen Hyperlink dar und besitzt keine interaktive Funktion. Es kann z. B. als Platzhalter dienen, bei dem später dynamisch per JavaScript ein passendes href gesetzt wird.
Generell werden drei Arten von Links unterschieden:
Globale Links:
Globale Links haben als Schema immer das Protokoll am Anfang (https, ftp, mailto:....) gefolgt von der URL (siehe Beispiele).
Relative (lokale) Links
Relative Links beziehen sich auf Ressourcen innerhalb des selben Webprojekts. Sie können entweder mit einem relativen Pfad (z.B. docs/html/a/a.pdf) (ausgehend vom aktuellen Dokument) oder mit einem absoluten Pfad (beginnend mit einem Schrägstrich, z.B. /docs/html/a/a.pdf) angegeben werden (siehe Beispiele).
Interne Links (Sprungmarken)
Interne Links verweisen auf Sprungmarken innerhalb einer Seite. Sie werden durch ein vorangestelltes Rautezeichen (#) gekennzeichnet und verweisen auf ein Element mit dem entsprechenden id-Attribut (siehe Beispiele).
Gibt den Medientyp des Zieldokuments an (z. B. application/pdf)
Beispiele
= Tag
= Attribut
= Wert
Text
= Kommentar bzw. wichtig!
Beispiel <a>
- href (Global)
Der Code:
<a href="https://www.google.de" target="_blank">Link zu Google</a>
Ergebnis:
Ergebnis: <a>-Demo 1 href (Global)
Globaler Link - Dieser Link öffnet die Seite www.google.de (in neuem Fenster). Beispiel <a>
- href (Lokal)
Der Code:
<a href="img/html.png" target="_self">Link zu Bild "HTML"</a>
Ergebnis:
Ergebnis: <a>-Demo 2 href (Lokal)
Relativer (lokaler) Link - Dieser Link führt zu einem Bild innerhalb dieses Projekts: img/html.png (in neuem Fenster).
Zurück kommen sie wieder mit alt & ←
Beispiel <a>
- href (Intern-Sprungmarke)
Der Code:
<a href="#definition">Zum Absatz "Definition"</a>
Ergebnis:
Ergebnis: <a>-Demo 3 href (Intern-Sprungmarke)
Interner Link (Sprungmarke) - Dieser Link führt innerhalb der aktuellen Webseite zur Spungmarke ("#") gefolgt von der id des Elements zu dem gesprungen werden soll. Beispiel <a>
- download
Der Code:
<a href="docs/datei.pdf">PDF ohne download</a>
<a href="docs/datei.pdf" download>PDF mit download ohne Vorgabe für Dateiname</a>
<a href="docs/datei.pdf" download="Testdatei.pdf">PDF mit download mit Namensvorgabe "Testdatei"</a>
Ergebnis:
Ergebnis: <a>-Demo 4 download
Interner Link zur pdf-Datei a.pdf im Verzeichnis docs - Datei wird nicht geöffnet sondern der Download-Dialog öffnet sich. Wenn man keinen Dateinamen angibt, wird die Datei mit ihrem ursprünglichen Namen heruntergeladen.
Zurück kommen sie wieder mit alt & ←
CSS-Tipps:
Für <a> gibt es für jeden "Zustand" eine Pseudoklasse (link, visited, hover, active, focus und target). Hier ein Tipp zum Pseudoelement ":target". Wenn ein interner Link zu einer ID aufgerufen wird so endet die URL mit ...#id (in unserem Beispiel mit #section1 bzw. #section2 oder #section3). Wenn nun für das Zielelement ein Pseudoelement definiert wird dann gilt diese Definition wenn es mit der ID im Pfad übereinstimmt. So läßt sich das Ziel ohne JavaScript einfach hervorheben.
section {
padding: 10px;
margin: 1em 0;
border: 2px solid #ccc;
border-radius: 8px;
transition: all 0.5s ease;
margin: 5px;
}
/* :target – wenn die URL auf das Element zeigt */
section:target {
border-color: #007BFF;
background-color: #e6f0ff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
transform: scale(1.02);
}
