HTML + CSS: Head, Meta-Angaben und globale Attribute

Kurz: Im <head> stehen Angaben über die Seite, die man nicht direkt sieht:

Teil des Kurses HTML + CSS

Kapitel 11 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Der head im Detail

Im <head> stehen Angaben über die Seite, die man nicht direkt sieht:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pfannkuchen-Rezept | Meine Kochseite</title>
  <meta name="description" content="Das beste Pfannkuchen-Rezept mit nur vier Zutaten.">
  <meta name="theme-color" content="#1e3a8a">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="stil.css">
  <link rel="canonical" href="https://beispiel.de/pfannkuchen">
  <meta property="og:title" content="Pfannkuchen-Rezept">
  <meta property="og:image" content="https://beispiel.de/bild.jpg">
  <script src="app.js" defer></script>
</head>

Element	Wirkung
<title>	Tab-Titel und Titel in Suchergebnissen. Eindeutig pro Seite, ca. 50 bis 60 Zeichen
<meta name="description">	Beschreibung in Suchergebnissen, ca. 150 Zeichen
<meta name="viewport">	Darstellung auf Handys
<link rel="stylesheet">	bindet CSS ein
<link rel="icon">	Tab-Symbol (Favicon)
<link rel="canonical">	bevorzugte Adresse bei doppeltem Inhalt
og:-Angaben (Open Graph)	Vorschau beim Teilen in sozialen Netzwerken
<script defer>	JavaScript laden, nach dem HTML ausführen

CSS und JavaScript einbinden

Drei Wege für CSS

<!-- 1. Externe Datei (empfohlen) -->
<link rel="stylesheet" href="stil.css">
 
<!-- 2. Eingebettet im head -->
<style>
  p { color: navy; }
</style>
 
<!-- 3. Direkt am Element (nur für Ausnahmen) -->
<p style="color: navy;">...</p>

Für JavaScript: <script src="app.js" defer></script> (lädt parallel, läuft nach dem Parsen) oder type="module". Ohne defer blockiert das Skript den Seitenaufbau.

Globale Attribute

Diese Attribute funktionieren bei jedem Element:

Attribut	Bedeutung
id	eindeutiger Name (Sprungziel, CSS, JavaScript); nur einmal pro Seite
class	Gruppenname(n) für CSS und JavaScript; beliebig oft, mehrere mit Leerzeichen
style	direkte CSS-Angaben
title	Tooltip-Text
lang	Sprache dieses Teils: <q lang="en">...</q>
hidden	versteckt das Element
tabindex	Tab-Reihenfolge: 0 fokussierbar, -1 nur per Skript
contenteditable	Inhalt direkt im Browser bearbeitbar
draggable	per Drag and Drop verschiebbar
data-*	eigene Daten, z. B. data-user-id="42"
aria-*, role	Zusatzangaben für Hilfstechnologien
dir	Schreibrichtung (ltr, rtl)

<p id="a" class="info wichtig" data-prio="3" title="Ich bin ein Tooltip">Fahre mit der Maus über mich</p>
<p contenteditable="true" style="border:1px dashed gray;padding:6px">Klick und tippe: dieser Text ist bearbeitbar.</p>
<p hidden>Dieser Satz ist versteckt.</p>
<p>Das Wort <span lang="en">accessibility</span> ist englisch.</p>
<script>
  const a = document.getElementById("a");
  console.log(a.classList, a.dataset.prio);
</script>

Vorgeladene Ressourcen

Für schnellere Seiten kannst du dem Browser Hinweise geben:

<link rel="preload" href="schrift.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="prefetch" href="/naechste-seite.html">

Suchmaschinen und Robots

• <meta name="robots" content="noindex"> hält eine Seite aus der Suche heraus
• Eine robots.txt und eine sitemap.xml im Wurzelverzeichnis helfen Suchmaschinen
• Strukturierte Daten (JSON-LD) beschreiben Inhalte genauer (Rezepte, Produkte, Veranstaltungen)

<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "Recipe", "name": "Pfannkuchen", "prepTime": "PT15M" }
</script>

Merke

• <head> enthält title, meta, link, style, script, nichts Sichtbares
• Jede Seite braucht ein eigenes <title> und eine description
• CSS am besten als externe Datei; <script defer> oder type="module"
• id ist einmalig, class mehrfach verwendbar, data-* für eigene Daten
• Open Graph steuert die Vorschau beim Teilen

Übungsaufgabe

Ergänze eine Seite um Titel, Beschreibung, Favicon, Open-Graph-Angaben und eine externe CSS-Datei.

Quiz zur Selbstkontrolle

Was ist der Unterschied zwischen id und class?

• id ist einmalig pro Seite, class kann mehrfach vorkommen (richtig)
• Es gibt keinen
• class ist einmalig, id mehrfach
• id ist nur für Bilder

Was macht defer bei script?

• Das Skript läuft nach dem Parsen des HTML (richtig)
• Das Skript wird verzögert gelöscht
• Das Skript wird nicht geladen
• Das Skript läuft zweimal

Wofür sind data-*-Attribute?

• Für eigene Daten am Element (richtig)
• Für Datenbanken
• Für das Datum
• Für Downloads

Weiter im Kurs

Zurück: Audio, Video und eingebettete Inhalte

Weiter: Barrierefreies HTML

Alle Kapitel: HTML + CSS im Überblick