HTMLWiki.de: Grundgerüst
< HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI
Menü

[ START ] [ TUTORIAL ] [ HTML ] [ CSS ] [ KI ] [ SPIELWIESE ] [ SITEMAP ]

Das HTML-Grundgerüst

vom von

Jede HTML-Seite beginnt mit demselben Grundaufbau. Den tippt niemand jedes Mal neu, den kopiert man sich. Hier ist die Vorlage, direkt zum Mitnehmen:

Vorlage: grundgeruest.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Meine erste HTML-Seite.</p>
</body>
</html>

Zeile für Zeile erklärt

ZeileWas sie macht
<!DOCTYPE html>Sagt dem Browser: Das hier ist modernes HTML. Muss immer die erste Zeile sein. Details auf der DOCTYPE-Seite.
<html lang="de">Das Wurzelelement, es umschließt alles. Das Attribut lang="de" verrät die Sprache, wichtig für Screenreader und Suchmaschinen.
<head>Der Kopf: Infos über die Seite, die nicht direkt sichtbar sind. Mehr dazu auf der Seite zum head-Bereich.
<meta charset="utf-8">Legt die Zeichenkodierung fest, damit Umlaute und Sonderzeichen richtig ankommen.
<meta name="viewport" ...>Sorgt dafür dass die Seite auf dem Handy nicht winzig skaliert wird. Pflicht für jede moderne Seite.
<title>Der Seitentitel. Steht im Browser-Tab und in den Suchergebnissen, nicht auf der Seite selbst.
<body>Der Körper: alles was hier drinsteht, wird im Browserfenster angezeigt.

Typische Fehler beim Grundgerüst

  • DOCTYPE vergessen oder nicht in Zeile 1. Der Browser schaltet dann in einen Kompatibilitätsmodus für uralte Seiten und manche Dinge verhalten sich seltsam.
  • Sichtbarer Inhalt im head. Text gehört in den body, im head hat er nichts verlorn.
  • Kein lang-Attribut. Funktioniert trotzdem, aber Vorlesesoftware spricht deine Seite dann womöglich mit englischer Aussprache. Klingt lustig, ist aber ärgerlich.
  • charset fehlt. Dann werden aus Umlauten gern kryptische Zeichen. Wenn dir irgendwo "für" statt "für" begegnet, weißt du jetzt woher das kommt.

Ausprobieren

Kopiere die Vorlage in einen Texteditor, speichere sie als index.html und öffne die Datei im Browser. Fertig ist deine erste Seite. Die ausführliche Schritt-für-Schritt-Anleitung dazu gibt es im Tutorial Deine erste HTML-Seite, und in der Spielwiese kannst du das Gerüst direkt im Browser verändern.

Verwandte Seiten: Was ist HTML? · Meta-Tags · Semantisches HTML