Informatik · Klasse 8 · Web-Technologien: Eigene Inhalte gestalten · 2. Halbjahr

Listen und Tabellen in HTML

Die Schülerinnen und Schüler strukturieren Informationen mit geordneten und ungeordneten Listen sowie einfachen Tabellen.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Strukturieren und Modellieren
• KMK: Sekundarstufe I - Darstellen und Interpretieren

Über dieses Thema

Listen und Tabellen in HTML ermöglichen es Schülerinnen und Schülern, Informationen klar und strukturiert darzustellen. Sie lernen, geordnete Listen mit <ol> und <li>-Elementen für nummerierte Aufzählungen sowie ungeordnete Listen mit <ul> für Aufzählungspunkte zu erstellen. Einfache Tabellen mit <table>, <tr>, <th> und <td> dienen der tabellarischen Darstellung von Daten, wobei Überschriften die Lesbarkeit und Zugänglichkeit verbessern. Diese Elemente verbinden sich nahtlos mit vorherigen HTML-Kenntnissen und bereiten auf komplexere Webseiten vor.

Im KMK-Lehrplan für die Sekundarstufe I fördert das Thema Kompetenzen im Strukturieren und Modellieren sowie Darstellen und Interpretieren. Schülerinnen und Schüler analysieren, wann eine Liste für hierarchische Inhalte geeigneter ist als eine Tabelle für vergleichende Daten. Die Betonung von Semantik und Zugänglichkeit, etwa durch <caption> oder <thead>, sensibilisiert für barrierefreies Webdesign und unterstreicht die Rolle von HTML als Grundlage digitaler Kommunikation.

Aktives Lernen eignet sich hervorragend, da Schülerinnen und Schüler Listen und Tabellen direkt im Code bearbeiten und im Browser testen können. Praktische Übungen mit realen Daten machen abstrakte Syntax greifbar, fördern Trial-and-Error und stärken das Verständnis für Strukturierungsentscheidungen durch sofortiges Feedback.

Leitfragen

1. Konstruieren Sie eine HTML-Liste und eine einfache Tabelle zur Darstellung von Daten.
2. Analysieren Sie, wann die Verwendung einer Liste oder einer Tabelle angemessener ist.
3. Erklären Sie die Bedeutung von Tabellenüberschriften für die Zugänglichkeit.

Lernziele

• Konstruieren Sie eine einfache HTML-Seite, die eine ungeordnete Liste für eine Einkaufsliste und eine geordnete Liste für eine Schritt-für-Schritt-Anleitung enthält.
• Erstellen Sie eine HTML-Tabelle mit Kopfzeilen (<th>) und Datenzellen (<td>) zur Darstellung von Spielergebnissen eines lokalen Sportvereins.
• Analysieren Sie gegebene Datensätze und entscheiden Sie, ob eine Liste oder eine Tabelle die Datenstruktur am besten widerspiegelt.
• Erklären Sie die Funktion und den Vorteil von <caption>-Elementen für die Zugänglichkeit von Tabelleninhalten.
• Vergleichen Sie die semantischen Unterschiede zwischen <ul> und <ol> und begründen Sie die Wahl für spezifische Inhaltstypen.

Bevor es losgeht

Grundlagen von HTML: Struktur und Elemente

Warum: Schülerinnen und Schüler müssen die grundlegende Syntax von HTML, das Konzept von öffnenden und schließenden Tags sowie die Struktur von HTML-Dokumenten kennen, um Listen und Tabellen erstellen zu können.

Einfache Textformatierung in HTML

Warum: Das Verständnis für grundlegende Textformatierungen hilft beim Verständnis, wie Inhalte innerhalb von Tabellenzellen oder Listenelementen dargestellt werden.

Schlüsselvokabular

Ungeordnete Liste (<ul>)	Eine HTML-Liste, die Elemente ohne spezifische Reihenfolge auflistet, typischerweise mit Aufzählungszeichen dargestellt.
Geordnete Liste (<ol>)	Eine HTML-Liste, die Elemente in einer definierten Reihenfolge auflistet, standardmäßig nummeriert.
Tabellenzeile (<tr>)	Definiert eine einzelne Zeile innerhalb einer HTML-Tabelle, die Zellen enthalten kann.
Tabellenkopfzelle (<th>)	Definiert eine Zelle in einer HTML-Tabelle, die als Überschrift für eine Spalte oder Zeile dient und oft fett formatiert ist.
Tabellendatenzelle (<td>)	Definiert eine Standardzelle in einer HTML-Tabelle, die die eigentlichen Daten enthält.
Tabellenüberschrift (<caption>)	Ein Element, das eine kurze Beschreibung oder einen Titel für die gesamte Tabelle liefert und für die Zugänglichkeit wichtig ist.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Listen und Tabellen sind austauschbar.

Was Sie stattdessen lehren sollten

Listen eignen sich für sequenzielle oder hierarchische Inhalte, Tabellen für relationale Daten. Aktive Vergleichsübungen in Gruppen helfen Schülerinnen und Schülern, durch Prototyping zu erkennen, wann eine Struktur semantisch passender ist.

Häufige Fehlvorstellung

Tabellen brauchen keine Überschriften.

Was Sie stattdessen lehren sollten

Überschriften wie <th> und <caption> sind essenziell für Zugänglichkeit und Verständnis. Peer-Reviews in Paaren zeigen, wie fehlende Elemente die Lesbarkeit mindern, und fördern bewusste Designentscheidungen.

Häufige Fehlvorstellung

HTML-Listen sind nur für Text.

Was Sie stattdessen lehren sollten

Listen können Bilder oder Links enthalten, Tabellen komplexe Daten. Hands-on-Experimente mit gemischten Inhalten klären dies und stärken das Modellieren realer Szenarien.

Ideen für aktives Lernen

Paararbeit: Listen erstellen

Paare erhalten ein Thema wie Einkaufsliste oder Wochenplan. Sie kodieren zuerst eine ungeordnete, dann eine geordnete HTML-Liste und vergleichen die Ausgaben im Browser. Abschließend besprechen sie Vor- und Nachteile.

20 Min.·Partnerarbeit

Gruppenrotation: Tabellen vs. Listen

Drei Stationen: 1. Tabelle für Klassensitzplan kodieren. 2. Liste für Hobbys umwandeln. 3. Vergleich analysieren. Gruppen rotieren alle 10 Minuten und notieren Kriterien für die Wahl.

45 Min.·Kleingruppen

Whole Class: Zugänglichkeits-Challenge

Die Klasse erstellt gemeinsam eine Tabelle mit Sportdaten, inklusive <caption> und <th>. Jede Schülerin und jeder Schüler testet mit Screenreader-Simulation und schlägt Verbesserungen vor.

30 Min.·Ganze Klasse

Individual: Daten-Tabelle bauen

Jede Schülerin und jeder Schüler strukturiert eigene Noten in einer HTML-Tabelle mit Überschriften. Sie validieren den Code online und reflektieren die Struktur in einem Kurzprotokoll.

25 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Webentwickler nutzen Listen und Tabellen täglich, um Inhalte auf Websites zu strukturieren. Beispielsweise verwendet ein Online-Shop ungeordnete Listen für Produktmerkmale und Tabellen für Preisvergleiche oder Spezifikationen.
• Journalisten und Content-Ersteller verwenden HTML-Tabellen, um statistische Daten oder Vergleichsinformationen übersichtlich darzustellen, wie z.B. Wahlergebnisse oder Vergleiche von Mobilfunktarifen auf Nachrichtenseiten.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Geben Sie den Schülerinnen und Schülern ein Blatt mit drei Szenarien: 1. Eine Einkaufsliste, 2. Eine Anleitung zum Kuchenbacken, 3. Die Ergebnisse eines Mathetests. Lassen Sie sie für jedes Szenario entscheiden, ob eine <ul>, <ol> oder <table> am besten geeignet ist, und begründen Sie kurz ihre Wahl.

Kurze Überprüfung

Zeigen Sie eine einfache HTML-Tabelle ohne <th>-Elemente. Fragen Sie die Schülerinnen und Schüler: 'Was fehlt hier, um die Tabelle verständlicher und zugänglicher zu machen?' und 'Welches HTML-Tag würde die Spaltenüberschriften definieren?'

Diskussionsfrage

Stellen Sie die Frage: 'Wann ist es besser, Informationen in einer Tabelle darzustellen, anstatt sie einfach untereinander aufzulisten?' Sammeln Sie Antworten und diskutieren Sie die Vorteile von Tabellen für den Vergleich und die Organisation von Daten.

Häufig gestellte Fragen

Wie erstelle ich eine geordnete HTML-Liste?

Verwenden Sie <ol> als Container und <li> für Listenelemente, z. B. <ol><li>Erster Punkt</li><li>Zweiter Punkt</li></ol>. Fügen Sie das in den <body> ein und öffnen Sie die Datei im Browser. Testen Sie Attribute wie start='3' für benutzerdefinierte Nummerierung, um Flexibilität zu demonstrieren. Das baut schnelle Strukturen auf.

Wann ist eine Tabelle besser als eine Liste?

Tabellen passen für Daten mit Zeilen- und Spaltenüberschriften, z. B. Zeitpläne oder Vergleiche, während Listen für Aufzählungen ohne feste Spalten reichen. Lassen Sie Schülerinnen und Schüler reale Beispiele umwandeln: Eine Kontaktliste wird tabellarisch übersichtlicher. Diskussionen klären semantische Unterschiede und verbessern Entscheidungsfähigkeiten.

Wie hilft aktives Lernen beim Verständnis von HTML-Listen und Tabellen?

Aktives Kodieren mit sofortigem Browser-Feedback macht Syntax und Effekte erlebbar. Paar- oder Gruppenarbeit fördert Austausch über Strukturentscheidungen, Trial-and-Error korrigiert Fehler selbstständig. Solche Methoden stärken Modellierkompetenz, da Schülerinnen und Schüler eigene Inhalte gestalten und iterativ verbessern, was abstrakte Konzepte festigt.

Warum sind Tabellenüberschriften für Zugänglichkeit wichtig?

<th> für Spaltenköpfe und <caption> für Gesamtbeschreibungen ermöglichen Screenreadern, Inhalte logisch vorzulesen. Ohne sie fehlt Kontext für Nutzer mit Behinderungen. Übungen mit ARIA-Simulationen zeigen den Unterschied: Mit Überschriften wird die Tabelle navigierbar, was Inklusion lehrt und Standards wie WCAG verankert.