HTML-Bausteine

Hier kannst du lernen, HTML-Tags semantisch richtig anzuordnen:

Ziehe Bausteine per Drag & Drop zusammen und sehe sofort, wie der Browser deine HTML-Seite darstellt.

Lerntool starten

Arbeitsauftrag

  1. Bearbeite die Aufgaben der Reihe nach (1 bis 7).
  2. Baue die Struktur im Bauplatz zusammen und drücke auf Prüfen.
  3. Kopiere den HTML-Quelltext von Aufgabe 1, 4 und 6 in dein Kursnotizbuch.
  4. Zusatzaufgabe: Beantworte die Fragen unten.

Diese Tags kommen vor:

Tag Bedeutung
<h1> Hauptüberschrift der Seite
<h2> Unterüberschrift eines Abschnitts
<p> Absatz (englisch paragraph)
<b> einzelne Wörter fett hervorheben (bold)
<article> ein in sich abgeschlossener Beitrag
<section> ein Abschnitt innerhalb eines Beitrags
<ul> Liste
<ol> Nummerierte Liste
<li> einzelner Listenpunkt (list item)

Fragen zum Nachdenken

  1. Warum ist es sinnvoll, eine Überschrift als <h1> zu schreiben, statt den Text einfach nur größer und fett darzustellen?
  2. Was ist der Unterschied zwischen <ul> und <ol>? Nenne je ein Beispiel aus dem Alltag.
  3. Im Lerntool kannst du einen Text nicht direkt auf der Seite ablegen, sondern nur in einem Tag. Warum ist das so?
  4. Wozu dienen <article> und <section>, obwohl man sie im Browser gar nicht sieht?