Menu
Coddy logo textTech

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

Aufgabe

Einfach

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

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

Übe selbstständig: Web-Playground