# Einführung HTML
Nun wollen wir uns das grundlegende Funktionsprinzip und die Syntax von HTML anschauen.
# Syntax
HTML arbeitet mit sogenannten Tags. Tags bestehen immer aus drei Teilen. Einem Anfang (opening tag), dem eigentlichen Inhalt, oder auch weiteren verschachtelten HTML Elementen und einem Ende (closing tag). Alle drei Teile zusammen bilden ein HTML-Element.
Bild: HTML&CSS Buch von John Duckett
Im untenstehenden Beispiel siehst du noch eine andere Darstellung. In diesem Format schreibst du HTML in deiner index.html-Datei.
<!-- Prinzip -->
<tag attribute="value">Inhalt</tag>
<!-- Beispiel -->
<html class="classname">
Inhalt und weitere, verschachtelte DOM-Elemente
</html>
# Document Object Model
Das Document Object Model (kurz DOM) umfasst alle HTML-Elemente deines Dokumentes in hierarchischer Reihenfolge. HTML-Elemente werden in diesem Zusammenhang auch DOM-Nodes (Knoten) genannt.
Der DOM-Tree ist eine visuelle Darstellung dieser Elemente und gleichzeitig valider Code für den Browser. Bei jeder Webseite kann das DOM über den Menüpunkt "Quelltext anzeigen" oder die Tastenkombination ⌘CMD + ⇧SHIFT + U (MacOS) angezeigt werden.
Hier siehst du einen minimalen DOM-Tree, wie ihn jede Website besitzt. Er besteht aus einem Kopfbereich <head> welcher Verlinkungen und Meta-Informationen beinhaltet, die für den Endnutzer meist unsichtbar sind, und einem <body>-Bereich der sämtliche Inhalte fasst, die schliesslich auf der Website angezeigt werden sollen.
<!DOCTYPE html>
<html lang="de">
<head>
Kopfbereich
</head>
<body>
Bodybereich
</body>
</html>
# Nesting, Parent & Child
Die Verschachtlung von DOM-Nodes ineinander wird auch Nesting genannt. Dabei wird das übergeordnete Element immer als Parent, das untergeordnete als Child bezeichnet.
# Die wichtigsten Tags
# Grundstruktur
| Tag | Bedeutung |
|---|---|
html | Root element |
head | Container für meta-tags |
title | Seitentitel z.B. für Suchmaschinen oder Browsertab |
meta | Meta/Seiten-Informationen z.B. Beschreibung etc. |
link | Einbindung von Dateien/Daten z.B. CSS oder Javascript |
body | Container für Inhalt |
# Layout
| Tag | Bedeutung |
|---|---|
header | Kopfzeile, z.B. als Container für nav |
nav | Container für Navigationen/Menüs |
main | Hauptbereich, Container für Sections |
section | Sektion, Container für Divisionen, Articles etc. |
div | Division, block element |
aside | Sidebar, Spalte |
article | Inhalt wie Artikel, Blog-Posts etc. |
footer | Fusszeile/Seitenabschluss, z.B. für Copyright etc. |
# Headings (Titel)
| Tag | Bedeutung |
|---|---|
h1 | Titel/Überschrift – Grösste Schriftgrösse |
h2 | Titel/Überschrift |
h3 | Titel/Überschrift |
h4 | Titel/Überschrift |
h5 | Titel/Überschrift |
h6 | Titel/Überschrift – Kleinste Schriftgrösse |
# Text & Links
| Tag | Bedeutung |
|---|---|
p | Paragraph/Absatz (immer neue Zeile) |
span | Inline-Element im Fliesstext (keine neue Zeile) |
a | Link zu Seiten innerhalb oder ausserhalb der Website |
# Listen
| Tag | Bedeutung |
|---|---|
ul | Unordered list / Nicht-nummerierte Liste |
ol | Ordered list / Nummerierte Liste |
li | List item / Listeneintrag |
# Bilder & Videos
| Tag | Bedeutung |
|---|---|
img | Integrieren einer Bilddatei |
video | Integrieren einer Videodatei |
Mit den hier genannten HTML-Tags bist du bereits in der Lage, umfangreiche Websites zu strukturieren. Es gibt noch viele weitere Tags, die du dir natürlich nicht alle merken musst. Ein sogenanntes Cheatsheet hilft dir, alle Tags und deren Bedeutung auf einen Blick zu sehen. Auch die Referenz der Sprache, also eine HTML Reference ist sehr hilfreich. Ausserdem wirst du im Verlauf dieses Kurses weitere Tags kennenlernen.
Hinweis
Falls keines der beschreibenden Layout-Tags (z.B. main, article, aside, footer, header oder nav) für ein bestimmtes Element sinnvoll erscheint, darf auch div (division) benutzt werden. Grundsätzlich kann auch die gesamte Website nur mit divs strukturiert werden, allerdings ist das wenig empfehlenswert, da die Leserlichkeit des Codes massiv abnimmt.
Weiterführende Links