asyoube logo asyoube

Grundlagen von HTML

Lernfeld 10: Benutzerschnittstellen gestalten und entwickeln

Wie ist eine HTML-Seite aufgebaut?

Das Grundgerüst des Webs

HTML (Hypertext Markup Language) ist die fundamentale Auszeichnungssprache des Internets. Sie ist keine Programmiersprache mit Logik (wie Python), sondern definiert die Struktur und den Inhalt einer Webseite, ähnlich wie das Skelett einem Körper Halt gibt. Jedes HTML-Dokument folgt einer strengen Hierarchie, dem sogenannten DOM-Baum (Document Object Model). Man kann sich dies wie eine Schachtel-in-Schachtel-Struktur vorstellen, bei der Elemente ineinander verschachtelt sind.

Ein minimales, korrektes HTML-Dokument besteht aus folgenden Kernkomponenten:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine erste Seite</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist mein erster Inhalt.</p>
  </body>
</html>
  1. <!DOCTYPE html>: Diese Deklaration steht in der allerersten Zeile und teilt dem Browser mit, dass es sich um ein modernes HTML5-Dokument handelt.
  2. <html>: Das Wurzelelement (Root), das den gesamten Code umschließt.
  3. <head>: Der "Kopf" der Seite. Hier stehen Metadaten, die für Besucher:innen auf der Seite selbst meist unsichtbar sind, aber für den Browser und Suchmaschinen essenziell sind (z. B. der Seitentitel <title> oder Verknüpfungen zu CSS-Dateien).
  4. <body>: Der "Körper" der Seite. Hier befindet sich der sichtbare Inhalt: Texte, Bilder, Videos und Links, die im Browserfenster angezeigt werden.

Semantik: Tags mit Bedeutung

HTML-Tags sind mehr als nur Container für Text; sie verleihen dem Inhalt eine semantische Bedeutung. Dies ist entscheidend für Suchmaschinenoptimierung (SEO) und Barrierefreiheit. Ein Screenreader für blinde Menschen kann beispielsweise nur dann effizient durch eine Seite navigieren, wenn Überschriften und Absätze korrekt ausgezeichnet sind.

Wir unterscheiden dabei verschiedene Kategorien:

  • Strukturelle Elemente: Sie gliedern die Seite in logische Bereiche.
    • <header>: Der Kopfbereich einer Seite oder Sektion (z. B. für Logos).
    • <nav>: Container für Navigationslinks.
    • <section>: Ein thematisch zusammengehöriger Abschnitt.
    • <footer>: Der Fußbereich (z. B. für Copyright und Impressum).
  • Textformatierung: Sie definieren die Art und Wichtigkeit des Textes.
    • <h1> bis <h6>: Überschriften, wobei <h1> die wichtigste ist.
    • <p>: Ein Textabsatz (Paragraph).
    • <strong>: Wichtiger Text (wird fett dargestellt).
    • <em>: Betonter Text (wird kursiv dargestellt).
dec-software-engineering-application-development-web-frontend-basics-of-html_page1.svg

Wie werden Inhalte dargestellt und verknüpft?

Block- vs. Inline-Elemente

Ein fundamentales Konzept für das Layout in HTML ist das unterschiedliche Verhalten von Elementen im sogenannten Dokumentenfluss. Man unterscheidet hierbei zwei Hauptgruppen:

  • Block-Elemente: Sie sind die "Egoisten". Ein Block-Element beansprucht immer die volle verfügbare Breite des Eltern-Elements und erzwingt einen Zeilenumbruch vor und nach sich. Sie stapeln sich vertikal übereinander wie Kisten in einem Regal.
    • Typische Vertreter: <div> (allgemeiner Container), <p>, <h1>-<h6>, <ul> (Listen).
    • Anwendung: Sie werden für das grobe Layout und die Strukturierung von Inhaltsblöcken verwendet.
  • Inline-Elemente: Sie sind die "Teamplayer". Sie nehmen nur so viel Platz ein, wie ihr Inhalt (z. B. der Text) benötigt, und verursachen keinen Zeilenumbruch. Sie fließen im Text mit und sitzen nebeneinander, solange Platz in der Zeile ist.
    • Typische Vertreter: <span> (allgemeiner Textcontainer), <a>, <strong>, <img>.
    • Anwendung: Sie werden genutzt, um Textteile innerhalb eines Blocks zu markieren oder zu verlinken, ohne den Lesefluss zu unterbrechen.

Hier siehst du den Unterschied im Code:

<!-- Block-Elemente: Stehen untereinander -->
<h1>Dies ist eine Überschrift (Block)</h1>
<p>Dies ist ein Absatz (Block).</p>

<!-- Inline-Elemente: Stehen nebeneinander im Textfluss -->
<p>
  In diesem Absatz ist ein Wort <strong>fett (Inline)</strong> 
  und ein anderes <em>kursiv (Inline)</em> markiert.
</p>

Interaktion und Medien einbinden

Das "Hypertext" in HTML steht für die Fähigkeit, Dokumente miteinander zu verknüpfen und Medien einzubinden. Hierbei greifen wir auf Konzepte wie Dateipfade zurück, die du bereits aus dem Bereich Dateisysteme kennst.

  • Hyperlinks (<a>): Der Anker-Tag (Anchor) ist das wichtigste Element des Webs. Das Attribut href (Hypertext Reference) gibt das Ziel an. Dies kann eine absolute URL (z. B. zu Google) oder ein relativer Pfad zu einer eigenen Unterseite sein.
  • Bilder (<img>): Bilder werden nicht direkt in die HTML-Datei geschrieben, sondern referenziert. Das src-Attribut (Source) gibt den Pfad zur Bilddatei an. Das alt-Attribut (Alternativtext) ist Pflicht für die Barrierefreiheit: Es beschreibt das Bild für Menschen mit Sehbehinderung oder falls das Bild nicht geladen werden kann.
  • Videos (<video>): Ähnlich wie Bilder binden Video-Tags externe Dateien ein. Mit dem Attribut controls werden dem Nutzenden automatisch Steuerelemente (Play, Pause, Lautstärke) angezeigt.

So bindest du diese Elemente korrekt ein:

<!-- Ein Link zu einer externen Webseite -->
<a href="https://www.google.de">Hier geht es zu Google</a>

<!-- Ein Bild mit Pfadangabe und Alternativtext -->
<img src="bilder/firmenlogo.png" alt="Das Logo der Muster GmbH">

<!-- Ein Video mit Steuerelementen -->
<video src="videos/tutorial.mp4" controls></video>

Lernziele

  • die grundlegende Struktur eines HTML-Dokuments erklären, indem die Bedeutung von Doctype, html-, head- und body-Tags sowie deren hierarchische Anordnung (DOM-Baum) beschrieben wird.
  • HTML-Tags anhand ihrer semantischen Bedeutung klassifizieren, indem zwischen strukturellen Elementen (z.B. header, nav, section, footer), Textformatierungselementen (z.B. p, h1-h6, strong, em) und Medien-Elementen (z.B. img, video) unterschieden wird.
  • Hyperlinks und Medieninhalte in HTML umzusetzen, indem die korrekte Syntax für Anker-Tags (a) mit href-Attributen sowie für Bild- (img) und Video-Tags mit entsprechenden Quellenangaben (src) und Alternativtexten (alt) angewendet wird.
  • Block- und Inline-Elemente differenzieren, indem ihr unterschiedliches Verhalten im Dokumentenfluss (z.B. Zeilenumbruch vs. Fließtext) und ihre typischen Anwendungsfälle (z.B. div vs. span) gegenübergestellt werden.
← Zurück zu Benutzerschnittstellen gestalten und entwickeln
🚀 Bereit für mehr?

Vertiefe dein Wissen!

Du hast die Grundlagen verstanden? Perfekt! In unserer App findest du interaktive Übungen, praktische Projekte und erweiterte Inhalte zu Grundlagen von HTML.

Download on the App Store Get it on Google Play
💼 Für Unternehmen

Ab 5€/Monat • Kostenloser Test verfügbar