HTML-Kurs / Grundstruktur eines HTML-Dokuments

Ein HTML-Dokument beginnt mit einer Deklaration <!doctype html>, gefolgt vom Wurzelelement html. Innerhalb von html enthält head die Metadaten des Dokuments, während body den Hauptinhalt der Seite enthält. Sie können das folgende Beispiel als HTML-Datei speichern und in einem Browser öffnen.

Die Grundform eines HTML-Dokuments

Beginnen Sie damit, das vollständige Beispiel zu betrachten. Das äußere Element html enthält sowohl head als auch body.

<!doctype html>

<html lang="de-DE">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Mein erstes HTML-Dokument</title>

  </head>

  <body>

    <h1>Hallo</h1>

    <p>Dies ist der Inhalt des Dokuments.</p>

  </body>

</html>

Die Einrückung erleichtert das Erkennen von innerhalb anderer Elemente verschachtelten Elementen. Der Browser interpretiert die Tags, um die Struktur des Dokuments zu erstellen; der Titel und der Absatz innerhalb von body bilden den Inhalt, den Sie hauptsächlich auf der Seite sehen.

Was macht jeder Teil?

• <!doctype html>: Deklariert das Dokument als HTML. Es ist kein HTML-Element. Es am Anfang zu platzieren hilft dem Browser, den Standardmodus zu verwenden.
• <html lang="de-DE">: Das Wurzelelement des Dokuments. lang="de-DE" kennzeichnet Deutsch als Hauptsprache, was Hilfsmitteln wie Bildschirmlesern hilft, die richtige Aussprache zu wählen.
• <head>: Enthält Metadaten wie den Dokumenttitel, die Zeichencodierung und die Anzeigeeinstellungen. Sein Inhalt erscheint nicht vollständig im Seitenkörper.
• <body>: Enthält die Hauptinhalte der Seite, einschließlich Überschriften, Absätzen, Bildern und Links.

Der HTML-Standard erlaubt es, bestimmte Anfangs- und End-Tags wegzulassen, aber das explizite Schreiben von html, head und body macht die Struktur leichter nachvollziehbar, wenn man lernt. Die Beschreibungen der Dokumentelemente des WHATWG HTML-Standards liefern die detaillierten Definitionen. Die Regeln für Tags und Attribute werden in Syntax erklärt.

Drei Einstellungen im head

Der head-Bereich des Beispiels enthält drei nützliche Einstellungen, die man in einem ersten HTML-Dokument erkennen sollte. Vergleichen Sie die Positionen und Überprüfungen für jedes Metadaten-Element in Den Seitentitel, die Beschreibung, die Sprache und die Codierung festlegen.

• meta charset="utf-8": Gibt UTF-8 als Zeichencodierung des Dokuments an. Speichern Sie die Datei ebenfalls in UTF-8, damit ihre Zeichen korrekt angezeigt werden. Platzieren Sie die Codierungsdeklaration nahe am Anfang des Dokuments.
• meta name="viewport": Legt die Breite des Ansichtsfensters auf die Breite des Geräts für mobile Browser fest. Dieses Tag allein macht ein Design nicht responsiv.
• title: Legt den Titel des Dokuments fest, der an Orten wie dem Browser-Tab angezeigt wird. Er hat einen anderen Zweck als ein h1, das im Körper der Seite angezeigt wird.

Beachten Sie den Unterschied zwischen title und h1 im Beispiel: Der Browser-Tab zeigt "Mein erstes HTML-Dokument" an, während der sichtbare Titel auf der Seite "Hallo" lautet.

Speichern Sie die HTML-Datei und öffnen Sie sie in einem Browser.

Verwenden Sie den ersten Codeblock, um eine echte Datei zu erstellen und das Ergebnis zu überprüfen. Sie benötigen nur einen einfachen Texteditor und einen Webbrowser; speichern Sie den Code als reinen Text und nicht als formatiertes Dokument.

1. Erstellen Sie einen Arbeitsordner, öffnen Sie eine neue Datei in einem Texteditor und fügen Sie den gesamten ersten Codeblock ein.
2. Speichern Sie die Datei in diesem Ordner unter dem Namen index.html. Wählen Sie UTF-8, falls der Editor nach einer Codierung fragt. index.html ist ein üblicher Name für die erste Seite einer Website, aber ein anderer Dateiname, der auf .html endet, funktioniert ebenfalls für diese Übung.
3. Doppelklicken Sie auf index.html in Ihrem Dateimanager. Wenn eine andere Anwendung geöffnet wird, verwenden Sie „Öffnen mit“, um einen Webbrowser auszuwählen, oder ziehen Sie die Datei in ein Browserfenster.
4. Überprüfen Sie, ob der Browser-Tab „Mein erstes HTML-Dokument“ anzeigt und die Seite „Hallo“ über „Dies ist der Inhalt des Dokuments.“ anzeigt. Die Adressleiste zeigt eine URL file:// für die lokale Datei.
5. Ändern Sie den Text innerhalb von title und h1 im Editor, speichern Sie die Datei und aktualisieren Sie den Browser. Vergleichen Sie den aktualisierten Tab-Titel mit dem Titel auf der Seite.

Das Öffnen einer URL file:// liest eine Datei auf Ihrem eigenen Computer. Das Senden dieser URL an jemand anderen gewährt ihm keinen Zugriff auf Ihre Kopie; um die Seite im Web zu teilen, müssen Sie ihre Dateien auf einen Webserver oder einen Hosting-Dienst hochladen.

Wenn das Ergebnis nicht das ist, was Sie erwartet haben

• Der Browser zeigt die Tags als Text an: Überprüfen Sie, ob der tatsächliche Dateiname mit .txt endet, zum Beispiel index.html.txt. Einige Editoren fügen diese Erweiterung beim Speichern eines Textdokuments hinzu. Wenn nötig, wählen Sie „Alle Dateien“ oder das Äquivalent im Speichern-Dialog aus und speichern Sie es als index.html. Das Anzeigen der Dateierweiterungen im Dateimanager hilft Ihnen, den Namen zu überprüfen.
• Ihre Änderungen werden nicht angezeigt: Speichern Sie die Datei im Editor und aktualisieren Sie den Browser. Wenn mehrere Ordner eine Datei mit demselben Namen enthalten, vergleichen Sie den Dateipfad im Browser mit dem Ordner, in dem Sie Ihre Änderungen gespeichert haben.
• Die Zeichen werden falsch dargestellt: Überprüfen Sie, ob Sie die Datei in UTF-8 gespeichert haben und die Deklaration <meta charset="utf-8"> im Dokument belassen haben.
• Die Seite ist leer: Stellen Sie sicher, dass Sie die gewünschte Datei geöffnet haben und dass der Titel und der Absatz immer noch innerhalb von body sind.

Um mehr über das Öffnen und Organisieren lokaler HTML-Dateien zu erfahren, siehe den MDN-Leitfaden zur Dateiverwaltung.