Das Grundgerüst von HTML

HTML verfügt über ein Grundgerüst, worauf jede Webseite aufgebaut wird. Die schnelle Kopiervorlage sollte bereits bekannt sein.

HTML Codebeispiel


<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="utf-8">
 <title>Seitentitel</title>
</head>
<body>
 <p>Sichtbarer Teil der Webseite</p>
</body>
</html>

In der ersten Zeile steht die Dokumenttypdeklaration, diese wird benötigt, um den HTML-Code zu interpretieren und anschließend im Browserfenster zu rendern.

`<!DOCTYPE html>`

Bedeutet das es sich um ein Dokument vom Typ HTML5 handelt.

In der zweiten Zeile steht das Start-Tag von HTML.

`<html lang="de">`

Dieses Tag ist auch gleichzeitig das letzte Tag, welches geschlossen wird. Der gesamte Code muss also innerhalb dieses Tags stehen. Bei dem <HTML>-Tag handelt es sich gleichzeitig um das Wurzelelement. Das <HTML>-Tag bekommt noch ein zusätzliches Attribut, welches den Elementinhalt angibt. In diesem Fall wählen wir die Sprache Deutsch und geben dem Attribut den Wert "de".

In der dritten Zeile starten wir mit dem Head-Bereich unseres Dokumentes.

`<head>`

Das <head>-Element beinhaltet alle technischen und dokumentarischen Informationen, um das Dokument ordentlich zu verarbeiten. Dazu gehören unter anderem der Titel der Webseite oder die Zeichencodierung.

Das erste Meta-Tag gibt Auskunft über die verwendete Zeichencodierung.

`<meta charset="utf-8">`

Die Zeichencodierung wird benötigt, um Zahlen, Buchstaben, Sonderzeichen usw. korrekt darzustellen. Wir verwenden "UTF-8", weil es die am weitesten verbreitetste Codierung für Unicode-Zeichen ist.

Unsere Webseite bekommt noch einen Titel über das <title>-Tag.

`<title>Seitentitel</title>`

Das <title>-Tag darf nicht unterschätzt werden, denn es hat gleich mehrere Aufgaben. Es steht nicht nur als Titel im Browserfenster oder auf der Registrierkarte (Tab), sondern wird noch als Titel für das Setzen von Lesezeichen verwendet und steht als Überschrift für Suchmaschineneinträge, also diese Überschriften, die bei Suchanfragen hervorstechen. Zudem steht das <title>-Tag auch im Browserverlauf.

Nachdem alle nötigen Angaben im <head> Element stehen, kann es wieder geschlossen werden.

`</head>`

Um jetzt auch etwas auf unserer Webseite zu sehen, benötigen wir ein Paar Elemente, die uns etwas im Browserfenster anzeigen. Dazu starten wir das <body>-Tag.

`<body>`

Im <body> werden alle Elemente geschrieben, die wir sichtbar darstellen wollen. Also alles an Texte, Tabellen, Grafiken, Videos usw.

Der erste Absatz:

`<p>Sichtbarer Teil der Webseite</p>`

Das kleine <p> steht für die Abkürzung "paragraph" und markiert einen Absatz in HTML, also nichts weiter als einfacher Text.

Wenn alle erforderlichen Elemente im HTML-Dokument eingetragen wurden, kann der sichtbare Bereich geschlossen werden.

`</body>`

Und zu guter Letzt werden wir das Ende des HTML Dokumentes angeben.

`</html>`

Weiter mit Textabsätze