Sections und Articles
Teil des Abschnitts Fundamentals 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, etwa Kapitel, Kopfzeilen, Fußzeilen oder andere Abschnitte des Dokuments. Es ist eine Möglichkeit, zusammengehörige Inhalte zu gruppieren. Zum Beispiel könntest 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> bezeichnet unabhängige, in sich geschlossene Inhalte. Es sollte für sich allein verständlich sein, und es sollte möglich sein, es unabhängig vom Rest der Website zu lesen. 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 Abschnitte ein:
- Einen
<main>-Abschnitt, der den Hauptinhalt der Seite enthält. - Erstelle innerhalb von
<main>einen<section>-Abschnitt mit einer Überschrift (<h2>), die "Upcoming Events" lautet. - Erstelle innerhalb des
<section>-Abschnitts zwei<article>-Elemente. - Jedes
<article>sollte eine Überschrift (<h3>) und einen Absatz (<p>) mit etwas Platzhaltertext enthalten. Verwende "Event 1" und "Event 2" für die Überschriften sowie "Event 1 details..." und "Event 2 details..." für die Absätze.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Schreibe hier den 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 Fundamentals
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