Der <head>-Bereich in HTML
Der <head>-Bereich enthält alle Informationen, die der Browser, Suchmaschinen oder andere Tools über die Webseite wissen müssen – sie sind für Besucher nicht sichtbar.
Das <title>-Element
Es definiert den Titel der Seite, der im Browsertab angezeigt wird. Er ist auch wichtig für SEO, da Suchmaschinen ihn als Seitentitel in den Ergebnissen verwenden.
html
<title>My First Website</title>Meta-Elemente
Meta-Elemente enthalten Metadaten über die Seite, z. B. Zeichencodierung, Beschreibung oder Einstellungen für Mobilgeräte. Sie sind für den Benutzer nicht sichtbar, aber für die Funktion wichtig.
html
<meta charset="UTF-8">
<meta name="description" content="Personal blog about HTML learning.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Stylesheets mit <link> einbinden
Mit dem <link>-Element können externe Stylesheets wie CSS-Dateien eingebunden werden. Es gehört zu den am häufigsten verwendeten Elementen im <head>-Bereich.
html
<link rel="stylesheet" href="styles.css">Skripte mit <script> laden
JavaScript-Dateien können mit dem <script>-Element geladen werden. Es ist zwar best practice, Skripte am Ende der Seite zu platzieren, manchmal ist es aber nötig, sie im <head> aufzunehmen – z. B. für frühe Initialisierungen.
html
<script src="main.js"></script>Typischer <head>-Aufbau
Das folgende Beispiel zeigt einen typischen <head>-Block mit grundlegenden meta-, link- und script-Elementen sowie dem Seitentitel.
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning HTML</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>Best Practices
Verwende immer die passende Zeichencodierung (z. B. UTF-8), definiere das Viewport-Meta für Mobilgeräte, nutze aussagekräftige Titel und – wenn möglich – prägnante, informative Meta-Beschreibungen.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
