Aufgabe 03 - Semantische Struktur

Worum geht es?

Eine Webseite braucht eine sinnvolle, semantische Gliederung. Struktur und Inhalt gehören zusammen, Formatierung kommt später. Sie bauen einen unstrukturierten Text zu einer sauber gegliederten Seite um (siehe Kapitel HTML-Grundlagen).

In dieser Übung üben Sie:

Analysieren: einen Fließtext in logische Abschnitte gliedern.
Strukturieren: semantische Elemente (header, nav, main, section, footer) einsetzen.
Unterscheiden: Struktur, Inhalt und Formatierung auseinanderhalten.

Benötigte Unterlagen

VS Code und Browser,
die Textvorlage (wird im Unterricht ausgeteilt): ein Artikel über ein Jugendschutz-Thema, als reiner Fließtext ohne jede Auszeichnung.

Arbeitsaufträge

Teil A - Gliederung planen

Lesen Sie den Text und markieren Sie: Titel, Einleitung, drei inhaltliche Abschnitte, Schluss und Quellen.
Skizzieren Sie auf Papier, welche HTML-Elemente Sie für welche Teile verwenden wollen.

Teil B - Umsetzen

Erstellen Sie index.html und übertragen Sie den Text in eine semantische Struktur:
- header mit Titel und Untertitel,
- main mit einer section je Abschnitt (jeweils mit h2),
- footer mit Quellenangaben als Liste.
Ergänzen Sie eine Navigationsleiste (nav) mit Sprunglinks zu den Abschnitten (href="#...").
Verwenden Sie kein style-Attribut und keine CSS-Datei. In dieser Übung zählt nur die Struktur.

Teil C - Begründen

Beantworten Sie in 3 bis 5 Sätzen (als Kommentar am Dateianfang): Warum ist <h2> mehr als “großer, fetter Text”? Wem nützt semantische Struktur (Suchmaschinen, Screenreader, Ihnen selbst)?

Abgabe

Geben Sie den Projektordner mit index.html ab. Alle Sprunglinks müssen funktionieren.