EMZETT.
Login

Emzett Wiki

HTML + CSS: Das Grundgerüst einer Seite

Properties1
tagsprogrammiersprachen, html-css

3 Min. Lesezeit

Kurz: Jede HTML-Datei hat dasselbe Grundgerüst:

Teil des Kurses HTML + CSS

Kapitel 2 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Jede HTML-Datei hat dasselbe Grundgerüst:

index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mein erster Seitentitel</title>
</head>
<body>
  <h1>Willkommen</h1>
  <p>Hier steht der sichtbare Inhalt.</p>
</body>
</html>
TeilBedeutung
<!DOCTYPE html>sagt dem Browser: modernes HTML5
<html lang="de">Wurzel der Seite; lang nennt die Sprache (wichtig für Screenreader, Übersetzung, Silbentrennung)
<head>unsichtbare Infos zur Seite
<meta charset="utf-8">Zeichensatz, damit Umlaute (ä, ö, ü, ß) richtig erscheinen
<meta name="viewport" ...>sorgt auf Handys für die richtige Skalierung
<title>Titel im Browser-Tab, in Lesezeichen und Suchergebnissen
<body>alles, was sichtbar ist

Tags, Elemente und Attribute

<a href="https://example.org" target="_blank">Link</a>
  • <a> ist das Start-Tag, </a> das End-Tag
  • Start-Tag + Inhalt + End-Tag zusammen sind ein Element
  • href und target sind Attribute: Sie stehen im Start-Tag als name="wert"
  • Manche Elemente haben keinen Inhalt und kein End-Tag (leere Elemente): <br>, <img>, <hr>, <input>, <meta>

Verschachtelung

Elemente stehen ineinander, nie überkreuz. Die richtige Reihenfolge schließt zuletzt geöffnete Tags zuerst:

<p>Das ist <strong>wichtig und <em>betont</em></strong>.</p>

Falsch wäre <strong><em>Text</strong></em>: Die Tags überkreuzen sich.

Kommentare

<!-- Das ist ein Kommentar: der Browser zeigt ihn nicht an -->
<p>Sichtbarer Text</p>
<!--
  Auch mehrzeilig möglich.
  Praktisch, um Code zeitweise auszuschalten.
-->

Leerraum und Zeilenumbrüche

HTML fasst beliebig viele Leerzeichen und Zeilenumbrüche zu einem Leerzeichen zusammen:

<p>Dieser     Text     hat
viele    Leerzeichen
und Zeilenumbrüche.</p>
<p>Für einen Umbruch<br>nimmst du br.</p>
<pre>In pre
   bleibt   alles
      erhalten.</pre>

Für Abstände benutzt du später CSS, nicht Leerzeichen oder leere Absätze.

Groß- und Kleinschreibung, Anführungszeichen

  • Tags und Attribute dürfen groß geschrieben werden, üblich ist klein
  • Attributwerte setzt man immer in "doppelte Anführungszeichen"
  • Dateinamen und Pfade sind auf vielen Servern case-sensitiv: Bild.JPG ≠ bild.jpg

Typische Fehler

  • <!DOCTYPE html> vergessen (der Browser fällt in den “Quirks-Modus”)
  • Umlaute kaputt, weil charset fehlt oder die Datei nicht als UTF-8 gespeichert ist
  • End-Tag vergessen, dann “fließt” die Formatierung in den Rest der Seite
  • Mehrere <h1> oder falsche Reihenfolge der Überschriften

Tipp

Mit dem W3C Validator (validator.w3.org) prüfst du, ob dein HTML fehlerfrei ist.

Merke

  • Gerüst: DOCTYPE, html lang, head (meta, title), body
  • Elemente bestehen aus Start-Tag, Inhalt, End-Tag; Attribute stehen im Start-Tag
  • Leere Elemente haben kein End-Tag (br, img, input, hr)
  • Tags nur ineinander verschachteln, nie überkreuzen
  • HTML fasst Leerraum zusammen; Abstände macht CSS

Übungsaufgabe

Baue eine vollständige Seite mit Titel, einer Überschrift, zwei Absätzen und einem Kommentar. Speichere sie als index.html und öffne sie im Browser.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Was sind HTML und CSS?

Weiter: Überschriften, Absätze und Textformatierung

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks