Das HTML-Tag <link>
wird verwendet, um ein externes Stylesheet zu definieren. Dies ist eine wichtige Praxis im Webdesign und der Webentwicklung, da CSS (Cascading Style Sheets) dazu dient, Layout und Design von Webseiten zu gestalten. Durch die Auslagerung von CSS-Regeln in externe Dateien können diese wiederverwendet und die Webseitenstruktur klarer und übersichtlicher gehalten werden.
Um ein externes Stylesheet zu nutzen, wird das <link>
-Element im Kopfbereich (innerhalb des <head>
-Elements) einer HTML-Seite platziert. Der relevante Code sieht etwa so aus:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
In diesem Beispiel verweist das Attribut href
auf eine CSS-Datei namens "styles.css". Das Attribut rel
legt fest, dass es sich bei der verlinkten Datei um ein Stylesheet handelt und das Attribut type
definiert den MIME-Typ der verknüpften Datei, in diesem Fall "text/css".
Es ist wichtig zu beachten, dass das <link>
-Element ein leeres Element ist, das heißt, es hat keine schließenden Tags. Daher ist es nicht korrekt, Tags wie <style>
, <script>
oder <css>
für diesen Zweck zu verwenden.
Darüber hinaus ist es auch eine gängige Praxis, mehrere Stylesheets zu verlinken, um die Trennung von Designaspekten zu erleichtern oder verschiedene Stylesheets für verschiedene Medien zu definieren (z. B. für Drucken, Bildschirm, mobile Geräte usw.).
Die Verwendung von externen Stylesheets bietet zahlreiche Vorteile. Sie erleichtert zum Beispiel die Wartung, verbessert die Seitenladegeschwindigkeit und fördert die Konsistenz des Designs über mehrere Webseiten hinweg.