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>

Die erste Zeile ist die Dokumenttyp-Deklaration. Um was für ein Dokument handelt es sich. Es handelt sich um ein HTML-Dokument.
Der gesamte übrige Inhalt einer HTML-Datei wird in die Tags <html> und </html> eingeschlossen. Das html-Element wird auch als Wurzelelement einer HTML-Datei bezeichnet.
Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden die Kopfdaten einer HTML-Datei notiert.

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>