CSS, HTML und Javascript mit {stil}

HTML head

HTML Head Tag

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.

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

head und body

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

<!DOCTYPE html>
<html lang="de">
	<head>
		…
	</head>
	<body>
		…
	</body>
</html>

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 uns 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
Früher wurden Scripte grundsätzlich innerhalb des head-Elements geladen. Heute sitzen Scripte wie Javascript bevorzugt am Ende vor dem schließenden body-Tag, damit sie erst geladen werden, wenn das HTML-Dokument komplett vom Browser geladen wurde.

HTML-Tags für HTML Head

Vorlage für HTML-Seiten
<!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 />
	<style>
		.top-menu { height: 46px; width:100% }
	</style>
</head>
<body> 

</body>
</html>

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="">.