Die Funktion des Head-Bereichs einer Webseite
Der Kopfbereich einer Webseite hat verschiedene Funktionen bzw. Informationen. Die wichtigsten sind das Bereitstellen von spezifischen Daten für Browser und Suchmaschinen, die Verlinkung zu anderen Ressourcen und das ermöglichen von Responsive Design.
Bereitstellung von webseitenbeschreibenden Daten für Browser und Suchmaschinen
Als erstes wäre hier das title-Element. Dieses beinhaltet den Titel der jeweiligen Webseite, der z. B. im Reiter des Tabs, des Browsers zu sehen ist. Auch in den Favoriten, welche im Browser abgespeichert werden taucht dieser auf. Bei den Suchmaschinen ist das <title>-Element, das Erste was einem in den Suchergebnissen fett-gedruckt hervorsticht . Auch das <meta>-Element mit den Attributen name="description" und name="keywords" werden für die Suchmaschine genutzt. Erstes um den Text unter dem Titel bei der Suchmaschine auszugeben. Die Keywords dienen als thematische Eingrenzungen der Webseite. Wenn es für die Webseite zudem wichtig ist, dass der Autor des Beitrags bekannt ist, wird das Attribut name=“author“ angegeben.
...
<head>
<title>Andreas Moor – Home</title>
<meta name="description" content="Ein Blog über Webentwicklung, Linux und Buddhismus">
<meta name="keywords" content="Webentwicklung, Linux, Buddhismus, Meta-Skills">
<meta name="author" content="Andreas Moor">
...Neben den informationsbeischreibenden Attribut befindet sich im meta-Element auch ein content-Attribut, welches den Inhalt enthält (siehe unten bzw. oben im Beispielcode).
Ein weiteres Attribut ist charset="UTF-8". Es gibt dem Browser die Zeichenkodierung an. UTF-8 ermöglicht die Darstellung de facto aller Weltsprachen und sämtlicher Emojis in einer einzigen Codierung.
...
<meta charset="UTF-8">
...Verlinkung zu webseiteninternen und -externen Ressourcen
Da HTML nur zur Strukturierung und nicht zum Styling und Dynamisieren von Elementen genutzt wird, werden in der Regel CSS und JavaScript als Links in die Datei im Head eingebunden. Auch das Icon der Webseite, das wie der Titel in Tabs, den Favoriten im Browser, aber auch auf immer öfter auf Tablets und Smartphones als direkt Zugriff auf die Webseite wie ein App-Icon gesichert werden kann , eine wichtige Rolle.
...
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
<!-- JavaScript -->
<script src="script.js" defer></script>
...Abgesehen von eigenem Code in Form von eigenen CSS und JavaScript, können auch der Code anderer Anbieter für die eigenen Website genutzt werden. Beispiele können z. B. Google Analytics (Traking des User-Verhaltens auf der eignen Webseite), JavaScript-Bibliotheken wie jQuery (Einbinden von spezifischen JavaScript-Code) oder auch externen Icons wir Font Awsome Icons verlinkt werden.
...
<!-- Font Awesome Icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha384-oNp7gYhYBiG8sFlwfb6wOVDyQIvJEVvXxkCq7UwAw3ZTPyVfFYPml78WONCZWBbO" crossorigin="anonymous"></script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
...Responsive Design
Damit die eigenen Website auf verschiedenen Bildschirmgrößen sauber ausgegeben werden kann, wird das meta-Element mit dem Attribut name="viewport" genutzt. Dies ermöglicht, das dynamische anpassen der Breite des Geräts und macht den Inhalt lesbarer und benutzerfreundlicher.
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Zusammenfassung
Der Kopfbereich ist eine Bereich, dessen Inhalt für den User nicht direkt sichtbar ist, jedoch viele wichtige Funktionen bereitstellt. Einige davon sind die benutzerfreundliche Skalierung des Inhalts auf verschiedenen Displaygrößen, das zur Verfügung stellen von Daten für Browser und Suchmaschinen, aber auch das einbinden von webseiteninternen- und externem Code. Sie alle ermöglichen es die Webseite attraktiv und dynamisch zu gestalten.
<< Die Struktur eines HTML-Dokuments