Menu
CoddyTech

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>
challenge icon

Aufgabe

Einfach

Erstelle ein HTML-Dokument, das die Tags <section> und <article> verwendet, um eine Webseite zu strukturieren. Füge die folgenden Bereiche hinzu:

  1. Einen <main>-Bereich, der den Hauptinhalt der Seite enthält.
  2. Erstelle innerhalb von <main> einen <section>-Bereich mit einer Überschrift (<h2>), die "Upcoming Events" lautet.
  3. Erstelle innerhalb des <section>-Bereichs zwei <article>-Elemente.
  4. 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>
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Grundlagen

Übe selbstständig: Web-Playground