Sections und Articles
Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 28 von 60.
In HTML werden die Tags <section> und <article> verwendet, um Inhalte in logische Teile zu gliedern.
Das <section>-Tag definiert einen Abschnitt in einem Dokument, beispielsweise ein Kapitel oder einen anderen Teil des Dokuments zu einem Thema, meist mit einer eigenen Überschrift. Damit kannst du zusammengehörige Inhalte gruppieren. Zum Beispiel kannst du <section> verwenden, um eine Seite in eine Einleitung, Inhalte und Kontaktinformationen zu unterteilen.
So kannst du das <section>-Tag verwenden:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>Das Tag <article> kennzeichnet unabhängige, in sich abgeschlossene Inhalte. Es sollte für sich allein verständlich sein und unabhängig vom Rest der Website gelesen werden können. Beispiele dafür, wo ein <article>-Element verwendet werden kann: ein Forumsbeitrag, ein Blogeintrag, eine Nachricht oder ein Kommentar.
So kannst du das Tag <article> verwenden:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>Aufgabe
EinfachErstelle ein HTML-Dokument, das die Tags <section> und <article> verwendet, um eine Webseite zu strukturieren. Füge die folgenden Bereiche hinzu:
- Einen
<main>-Bereich, der den Hauptinhalt der Seite enthält. - Erstelle innerhalb von
<main>einen<section>-Bereich mit einer Überschrift (<h2>), die "Upcoming Events" lautet. - Erstelle innerhalb des
<section>-Bereichs zwei<article>-Elemente. - Jedes
<article>-Element sollte eine Überschrift (<h3>) und einen Absatz (<p>) mit etwas Platzhaltertext enthalten. Verwende "Event 1" und "Event 2" als Überschriften und "Event 1 details..." sowie "Event 2 details..." für die Absätze.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Schreibe hier Code -->
</body>
</html>Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Grundlagen
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-ListeÜbe selbstständig: Web-Playground