HTML mit Adi Prinz

Der Head-Bereich

Der Head-Bereich enthält Informationen über das HTML-Dokument. Diese Angaben werden als Metadaten bezeichnet und normalerweise nicht im sichtbaren Inhaltsbereich der Webseite dargestellt.

Aufbau des Head-Bereichs

Der Head-Bereich wird mit dem Element <head> erstellt und befindet sich zwischen dem öffnenden <html>-Tag und dem <body>-Element.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel der Webseite</title>
  </head>

  <body>
    <h1>Willkommen</h1>
  </body>
</html>

Im Head-Bereich können unter anderem folgende Angaben stehen:

die Zeichenkodierung des Dokuments,
der Titel der Webseite,
Angaben für responsive Webseiten,
eine Beschreibung für Suchmaschinen,
Verknüpfungen mit CSS-Dateien,
Verknüpfungen mit Favicons,
weitere Metadaten und Ressourcen.

Zeichenkodierung

Die Zeichenkodierung legt fest, wie Buchstaben, Ziffern und Sonderzeichen gespeichert und vom Browser dargestellt werden.

<meta charset="UTF-8">

UTF-8 unterstützt nahezu alle weltweit verwendeten Zeichen. Dazu gehören auch deutsche Umlaute wie ä, ö und ü sowie das Zeichen ß.

Die Angabe sollte möglichst weit oben im Head-Bereich stehen, damit der Browser die Zeichenkodierung frühzeitig erkennt.

Der Seitentitel

Das Element <title> legt den Titel des HTML-Dokuments fest.

<title>HTML lernen – EDV mit Adi Prinz</title>

Der Seitentitel wird unter anderem verwendet:

im Browser-Tab,
in den Lesezeichen des Browsers,
im Browserverlauf,
häufig als Überschrift in Suchergebnissen.

Jede Seite sollte einen aussagekräftigen und möglichst eindeutigen Titel besitzen. Das <title>-Element darf nicht mit einer sichtbaren Überschrift wie <h1> verwechselt werden.

Viewport für responsive Webseiten

Das folgende Meta-Element sorgt dafür, dass eine Webseite auf Smartphones und anderen mobilen Geräten in der richtigen Breite dargestellt wird:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
>

width=device-width passt die Breite der Webseite an die Bildschirmbreite des Geräts an.
initial-scale=1.0 legt den anfänglichen Vergrößerungsfaktor auf 100 Prozent fest.

Diese Angabe gehört zum üblichen Grundgerüst einer modernen responsiven Webseite.

Weitere Elemente im HTML-Head

Neben dem Seitentitel und den grundlegenden Meta-Angaben kann der Head-Bereich weitere Elemente enthalten. Damit werden beispielsweise externe CSS-Dateien, Favicons und JavaScript-Dateien eingebunden.

Das Base-Element

Das Element <base> legt eine gemeinsame Basisadresse für relative URLs innerhalb eines HTML-Dokuments fest.

<base href="https://www.example.com/">

Ein relativer Link wird anschließend auf diese Basisadresse bezogen:

<a href="kontakt.html">Kontakt</a>

Der Browser verwendet daraus folgende vollständige Adresse:

https://www.example.com/kontakt.html

Pro HTML-Dokument darf nur ein <base>-Element verwendet werden. Es muss vor allen Elementen stehen, die relative URLs enthalten.

Achtung: Das Base-Element beeinflusst alle relativen Links, Bilder, Stylesheets und anderen relativen Pfadangaben der Seite. Es sollte daher nur verwendet werden, wenn seine Auswirkungen eindeutig erwünscht sind.

Das Link-Element

Das Element <link> stellt eine Verbindung zwischen dem HTML-Dokument und einer externen Ressource her. Am häufigsten wird damit eine externe CSS-Datei eingebunden.

<link rel="stylesheet" href="assets/css/style.css">

rel="stylesheet" beschreibt die Beziehung zwischen dem HTML-Dokument und der eingebundenen Datei.
href enthält den Pfad zur externen Ressource.

Das <link>-Element kann außerdem zur Einbindung eines Favicons verwendet werden:

<link rel="icon" href="assets/images/favicon.ico">

Ein Favicon ist das kleine Symbol, das beispielsweise im Browser-Tab neben dem Seitentitel angezeigt wird.

Das Style-Element

Mit dem Element <style> können CSS-Regeln direkt im HTML-Dokument festgelegt werden.

<style>
  body {
    font-family: Arial, sans-serif;
    color: #333;
  }

  h1 {
    color: steelblue;
  }
</style>

Das <style>-Element steht normalerweise im Head-Bereich. Die darin enthaltenen CSS-Regeln gelten für das aktuelle HTML-Dokument.

Für umfangreichere Webseiten empfiehlt sich meist eine externe CSS-Datei. Dadurch kann dasselbe Stylesheet auf mehreren Seiten verwendet werden.

Das Script-Element

Mit dem Element <script> wird JavaScript in ein HTML-Dokument eingebunden.

Externe JavaScript-Datei

<script src="assets/js/functions.js" defer></script>

src enthält den Pfad zur JavaScript-Datei.
defer sorgt dafür, dass das Skript erst ausgeführt wird, nachdem das HTML-Dokument vollständig verarbeitet wurde.

JavaScript direkt im HTML-Dokument

<script>
  console.log("Die Webseite wurde geladen.");
</script>

Umfangreicher JavaScript-Code sollte in einer externen Datei gespeichert werden. Dadurch bleibt das HTML-Dokument übersichtlich und das Skript kann auf mehreren Seiten verwendet werden.

Das Meta-Element

Meta-Elemente enthalten zusätzliche Informationen über das HTML-Dokument. Sie werden nicht als normaler Seiteninhalt angezeigt.

Die Zeichenkodierung und die Viewport-Angabe haben wir bereits in Section 1 behandelt. Weitere häufig verwendete Meta-Angaben sind:

Beschreibung der Seite

<meta
  name="description"
  content="Grundlagen und Beispiele zum Erstellen moderner HTML-Seiten."
>

Die Beschreibung kann von Suchmaschinen als Textauszug in den Suchergebnissen verwendet werden.

Autor oder Autorin

<meta name="author" content="Adi Prinz">

Anweisungen für Suchmaschinen

<meta name="robots" content="index, follow">

index erlaubt die Aufnahme der Seite in den Suchindex.
follow erlaubt das Verfolgen der Links auf der Seite.

Soll eine Seite nicht in Suchmaschinen erscheinen, kann folgende Angabe verwendet werden:

<meta name="robots" content="noindex, nofollow">

Vollständiges Beispiel

Ein typischer Head-Bereich einer modernen Webseite kann folgendermaßen aufgebaut sein:

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

  <meta
    name="description"
    content="Grundlagen und Beispiele zum Erstellen moderner HTML-Seiten."
  >
  <meta name="author" content="Adi Prinz">

  <title>HTML lernen – EDV mit Adi Prinz</title>

  <link rel="icon" href="assets/images/favicon.ico">
  <link rel="stylesheet" href="assets/css/style.css">

  <script src="assets/js/functions.js" defer></script>
</head>

Open Graph und Social Media

Beim Teilen einer Webseite in sozialen Netzwerken oder Messenger-Diensten wird häufig eine Vorschau mit Titel, Beschreibung und Bild angezeigt. Mit Open-Graph-Metadaten kann festgelegt werden, welche Informationen dafür verwendet werden sollen.

Das Open-Graph-Protokoll

Open-Graph-Angaben werden als <meta>-Elemente im <head>-Bereich des HTML-Dokuments eingetragen.

<meta property="og:title" content="HTML lernen – EDV mit Adi Prinz">

<meta
  property="og:description"
  content="Grundlagen und Beispiele zum Erstellen moderner HTML-Seiten."
>

<meta property="og:image" content="https://www.example.com/images/html-kurs.jpg">
<meta property="og:url" content="https://www.example.com/html.php">
<meta property="og:type" content="website">

Im Unterschied zu vielen anderen Meta-Angaben verwenden Open-Graph-Elemente üblicherweise das Attribut property anstelle von name.

Wichtige Open-Graph-Eigenschaften

Für eine grundlegende Vorschau werden vor allem die folgenden Eigenschaften verwendet:

Eigenschaft	Bedeutung
`og:title`	Titel des geteilten Inhalts
`og:description`	Kurze Beschreibung des Inhalts
`og:image`	Vorschaubild für den geteilten Inhalt
`og:url`	Vollständige Adresse der Webseite
`og:type`	Art des Inhalts, beispielsweise `website` oder `article`
`og:site_name`	Name der gesamten Website
`og:locale`	Sprache und Region des Inhalts

Titel und Beschreibung

Mit og:title wird der Titel festgelegt, der in der Vorschau erscheinen soll.

<meta
  property="og:title"
  content="HTML lernen – EDV mit Adi Prinz"
>

og:description enthält eine kurze und verständliche Beschreibung der Seite.

<meta
  property="og:description"
  content="HTML-Grundlagen mit Erklärungen und praktischen Beispielen."
>

Titel und Beschreibung sollten den tatsächlichen Inhalt der Seite treffend wiedergeben.

Das Vorschaubild

Mit og:image wird das Bild angegeben, das beim Teilen der Seite angezeigt werden soll.

<meta
  property="og:image"
  content="https://www.adiprinz.at/assets/images/html-vorschau.jpg"
>

Für das Vorschaubild sollte eine vollständige absolute URL verwendet werden. Eine relative Pfadangabe wie assets/images/html-vorschau.jpg ist dafür nicht geeignet.

Zusätzliche Angaben können das Bild genauer beschreiben:

<meta
  property="og:image:alt"
  content="HTML-Grundlagen von EDV mit Adi Prinz"
>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Das alternative Bildattribut og:image:alt beschreibt den Inhalt des Vorschaubildes.

URL und Inhaltstyp

og:url enthält die vollständige, bevorzugte Adresse der Seite:

<meta
  property="og:url"
  content="https://www.adiprinz.at/html.php"
>

Mit og:type wird die Art des Inhalts angegeben. Für eine normale Webseite wird häufig website verwendet:

<meta property="og:type" content="website">

Für einen einzelnen redaktionellen Beitrag eignet sich:

<meta property="og:type" content="article">

Optional können außerdem der Name der Website sowie Sprache und Region angegeben werden:

<meta property="og:site_name" content="EDV mit Adi Prinz">
<meta property="og:locale" content="de_AT">

Vollständiges Beispiel

Der Head-Bereich einer Seite kann die gewöhnlichen Meta-Angaben und die Open-Graph-Angaben gemeinsam enthalten:

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

  <meta
    name="description"
    content="HTML-Grundlagen mit Erklärungen und praktischen Beispielen."
  >
  <meta name="author" content="Adi Prinz">

  <title>HTML lernen – EDV mit Adi Prinz</title>

  <meta
    property="og:title"
    content="HTML lernen – EDV mit Adi Prinz"
  >
  <meta
    property="og:description"
    content="HTML-Grundlagen mit Erklärungen und praktischen Beispielen."
  >
  <meta
    property="og:image"
    content="https://www.adiprinz.at/assets/images/html-vorschau.jpg"
  >
  <meta
    property="og:image:alt"
    content="HTML-Grundlagen von EDV mit Adi Prinz"
  >
  <meta
    property="og:url"
    content="https://www.adiprinz.at/html.php"
  >
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="EDV mit Adi Prinz">
  <meta property="og:locale" content="de_AT">

  <link rel="stylesheet" href="assets/css/style.css">
</head>

Hinweis: Wie die Vorschau tatsächlich dargestellt wird, entscheidet die jeweilige Plattform. Änderungen an den Metadaten können wegen zwischengespeicherter Vorschauen verzögert sichtbar werden.

HTML-Head

HTML Module

html mit Adi Prinz

Der Head-Bereich

Aufbau des Head-Bereichs

Zeichenkodierung

Der Seitentitel

Viewport für responsive Webseiten

Weitere Elemente im HTML-Head

Das Base-Element

Das Link-Element

Das Style-Element

Das Script-Element

Externe JavaScript-Datei

JavaScript direkt im HTML-Dokument

Das Meta-Element

Beschreibung der Seite

Autor oder Autorin

Anweisungen für Suchmaschinen

Vollständiges Beispiel

Open Graph und Social Media

Das Open-Graph-Protokoll

Wichtige Open-Graph-Eigenschaften

Titel und Beschreibung

Das Vorschaubild

URL und Inhaltstyp

Vollständiges Beispiel