Grundlagen¶

Grundgerüst¶

Jede HTML-Seite besteht aus einem Grundgerüst, das zwingend immer vorhanden sein muss.

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

Bestandteile im Detail¶

<!DOCTYPE html>

Teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt.
Wichtig für eine korrekte Darstellung und standardkonformes Rendering.

<html lang="de"> ... </html>

Das Wurzelelement des Dokuments.
Umschließt den gesamten sichtbaren und unsichtbaren HTML-Code.
Das Attribut lang="de" gibt die Sprache des Dokuments an – wichtig für:
- Screenreader
- Suchmaschinen
- Rechtschreibvorschläge

<head> ... </head>

Der Kopfbereich enthält Meta-Informationen, die nicht direkt im Browserfenster angezeigt werden. Dazu gehören:

<meta charset="UTF-8">
- Legt die Zeichenkodierung fest (UTF-8 unterstützt Umlaute, Sonderzeichen, Emojis).
- Verhindert Darstellungsfehler bei deutschen Umlauten und Sonderzeichen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Sorgt dafür, dass die Webseite auf mobilen Geräten richtig skaliert wird.
- Ohne diesen Tag würden Websites auf Smartphones oft zu klein oder verzogen dargestellt.
<title>Document</title>
- Bestimmt den Titel der Seite:
  - wird im Browser-Tab angezeigt
  - wichtig für Suchmaschinen (SEO)

<body> ... </body>

Enthält alle Inhalte, die im Browser sichtbar sind:
- Texte
- Bilder
- Überschriften
- Links
- Layout-Elemente
- Navigationen
- Formulare

Dieses Gerüst ist die Basis jeder modernen HTML-Seite und sollte immer am Anfang eines Projekts stehen.

HTML-Element¶

HTML-Code besteht immer aus vielen HTML-Elementen. Ein HTML-Element besteht immer aus mehreren Teilen. Es startet mit dem öffnenden Tag <elementName>. Dazwischen steht der Inhalt und das Element wird mit dem schließenden Tag </elementName> beendet.

Es gibt Elemente, die kein schließendes Tag haben. Diese Elemente nennt man selbstschließende Elemente. Das Element img ist zum Beispiel ein Element dieser Art.

<img src="biler/bild.jpg" alt="Ein Bild" />

Kommentare¶

Kommentare  können in HTML dazu verwendet werden, bestimme Teile des Codes zu kommentieren. Dies dient dazu, dass andere Entwickler verstehen, was der vorliegende Code macht. Mit Kommentaren können bestimmte Teile im Code auskommentiert werden. Wenn Teile im Code Probleme machen, kann der Bereich durch Kommentare deaktiviert werden. Der Browser führt den Code nicht aus.

<!-- So wird ein Kommentar erstellt -->
<!-- Erklärung: Das div gruppiert die Elemente -->
<div>
  <h1>Überschrift</h1>
  <!-- Das p-Element wird auskommentiert
  <p>Ein langer Text könnte hier stehen...</p>
  -->
</div>

Einrücken¶

HTML Elemente sollten immer untereinandergeschrieben werden. Wenn Elemente ineinander verschachtelt sind, müssen sie eingerückt werden.

<!-- falsch -->
<div>
  <h1>Überschrift</h1>
  <p>Ein langer Text könnte hier stehen...</p>
</div>

<!-- richtig -->
<div>
  <h1>Überschrift</h1>
  <p>Ein langer Text könnte hier stehen...</p>
</div>

Attribute¶

Attribute erweitern HTML-Elemente um Informationen über das Element. Attribute stehen immer im Start-Tag des jeweiligen HTML-Elementes und werden in einer Kombination aus einem Schlüssel- / Wert-Paar geschrieben Schlüssel="Wert". Die Attribute sind nicht sichtbar auf der Website.

<!-- src-Attribut und alt-Attribut -->
<img
  src="link zum Bild"
  alt="Text wird angezeigt, wenn das Bild nicht gefunden werden kann"
/>

<!-- class-Attribut -->
<div class="klasse"></div>

<!-- href-Attribut -->
<a href="link zu einer anderen Seite">Linktext</a>

<!-- id-Attribut -->
<div id="ID"></div>