Das link-Tag

Das Tag link bindet CSS-Dateien in eine HTML-Seite ein. Darüber hinaus bindet link einige andere Dateien ein, zum Beispiel ein Favicon. (Ein Favicon ist das kleine Symbol einer Website, das im Browser-Tab sichtbar ist. Man kann es auch in einigen Suchmaschinen neben den Suchergebnissen sehen, zum Beispiel in Yandex).

Dieses Tag hat sehr viele Attribute, die unterschiedliche Werte annehmen können, jedoch werden sie in der Praxis kaum alle verwendet. Die häufigsten Anwendungen sind das Einbinden von CSS und das Hinzufügen eines Favicons.

So bindet man CSS ein:

<link rel="stylesheet" href="style.css">

So bindet man ein Favicon ein:

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

Das Tag link benötigt kein schließendes Tag.

Attribute

Attribut	Beschreibung
`href`	Pfad zur einzubindenden Datei.
`media`	Der Gerätetyp, für den die Datei eingebunden werden soll. Das bedeutet: Sie können eine CSS-Datei nur für große Bildschirme (Wert `screen`) oder nur für kleine Bildschirme: für Mobiltelefone oder Tablets (Wert `handheld`) einbinden. Mögliche Werte: `all`, `braille`, `handheld`, `print`, `screen`, `speech`, `projection`, `tty`, `tv`. Mehr dazu siehe unten.
`rel`	Der Typ der einzubindenden Datei. Mögliche Werte: `stylesheet` \| `alternate`. Der Wert `stylesheet` gibt an, dass eine CSS-Datei eingebunden wird. Der Wert `alternate` wird beispielsweise verwendet, um einen Link auf eine Datei im XML-Format für einen News-Feed oder Artikel-Ankündigungen anzugeben.
`charset`	Die Kodierung der einzubindenden Datei. Aktuell ist `utf-8` der Standard.
`type`	Der Datentyp der einzubindenden Datei.

Werte für das media-Attribut

In HTML5 können Media Queries als Werte angegeben werden.

Wert	Beschreibung
`all`	Alle Geräte.
`screen`	Bildschirm.
`handheld`	Telefone, Smartphones, Geräte mit kleinem Bildschirm.
`braille`	Geräte, die auf dem Braille-System basieren und für blinde Menschen bestimmt sind.
`speech`	Sprachsyntheseprogramme sowie Software zur Wiedergabe von Text in gesprochener Sprache. Eingeschlossen sind auch Sprachbrowser.
`print`	Drucker.
`projection`	Projektoren.
`tty`	Fernschreiber, Terminals, tragbare Geräte mit eingeschränkten Bildschirmfähigkeiten. Für sie sollten keine Pixel als Maßeinheit verwendet werden.
`tv`	Fernseher, die Webseiten öffnen können (das gibt es tatsächlich).

Standardwert: all.

Beispiel

Sehen wir uns den Aufbau einer einfachen HTML-Seite an, zu der wir CSS-Dateien und ein Favicon hinzufügen:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style1.css">
		<link rel="stylesheet" href="style2.css" media="screen">
		<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>

Siehe auch

das Tag style,
das CSS direkt auf der Seite einfügt
das Attribut style,
das Stile für ein bestimmtes Tag festlegt