CSS, HTML & Javascript mit {stil}

HTML head – Seitenkopf: Informationen für den Browser

Unter HTML head liegen die Metadaten (title, meta und base), die Informationen zur Seite liefern, die Darstellung steuern und über die Beziehungen zu anderen Dateien (style, link, script) und HTML-Seiten informieren.

HTML Head Tag

head und body

Was im head-Tag steht, wird nicht auf der Webseite angezeigt. Die einzige Ausnahme ist das title-Element, das von den Browsern im oberen Fensterrahmen gezeigt wird.

Das head-Element der Webseite wird direkt hinter das <html>-Tag und noch vor dem <body>-Tag gesetzt.

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8" />
	<title>HTML head | mediaevent.de</title> 
	<link rel="canonical" href="https://www.mediaevent.de/html/head.html">
	<meta name="description" content="…">
	<meta name="viewport" content="…">
	<link rel="stylesheet" type="text/css" media="screen" href="style.css">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<base href="…">
	<style>
		.top-menu { height: 46px; width:100% }
	</style>
</head>
<body> 

</body>
</html>

Die wichtigsten Elemente für HTML head:

<title>Seitentitel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">

Elemente des head-Tags

An den Elementen für den head-Bereich des HTML-Dokuments hat sich seit vielen Jahren nichts geändert. html-, body- und head-Tag müssen sogar eigentlich nicht explizit eingesetzt werden. Aber diese Tags sind so klein und verschaffen den Suchmaschinen und den Browsern einen besseren Einblick ins Markup der HTML-Datei, dass sie nicht fehlen sollten.

Das head-Element kann die folgenden HTML-Tags in beliebiger Reihenfolge enthalten:

title Titel des Dokuments – das einzige Tag, das unterhalb des head-Tags erforderlich ist und gleichzeitig die wichtigste Überschrift der Webseite.
base setzt die Basis-URL
link setzt die Links des Dokuments zu Dateien, die eingebunden werden – meist zu CSS-Dateien, aber z.B. auch zum Favicon der Webseite.
meta setzt Meta-Informationen wie Schlüsselwörter und Beschreibungen, den Zeichensatz für die Sprache der Webseite und den Viewport für die kleinen Monitore der mobilen Geräte.
style setzt lokale CSS-Regeln für das aktuelle Dokument
script Scripte werden bevorzugt innerhalb des head-Elements geladen. Damit sie erst auf HTML-Elemente zugreifen, wenn diese in der Seite geladen sind, werden sie mit den Attributen defer oder async notiert.

HTML-Tags für HTML Head

Es gibt keine vorgeschriebene Reihenfolge für die Tags innerhalb des head-Tags. Es ist sinnvoll, den Zeichensatz zuerst zu setzen (auch wenn der Zeichensatz schon vom Server geliefert wird), dann das title-Tag, danach das Metatag für den Viewport.

<head>
	<meta charset="utf-8">
	<style>  … </style>
	<script> … </script>
</head>

Damit die Seite im Browserfenster so schnell wie möglich aufgebaut wird, werden CSS-Dateien vor script-Tags geladen (weil das CSS wichtiger für den Seiteaufbau ist), gefolgt von Metadaten wie <meta property="og:site_name" content="">.

Suchen auf mediaevent.de