Sections und Articles
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 28 von 60.
In HTML werden <section> und <article> Tags verwendet, um Inhalte in logische Abschnitte zu unterteilen.
Das <section>-Tag definiert einen Abschnitt in einem Dokument, wie z. B. Kapitel, Kopfzeilen, Fußzeilen oder andere Abschnitte des Dokuments. Es ist eine Möglichkeit, zusammengehörige Inhalte zu gruppieren. Zum Beispiel könnten Sie <section> verwenden, um eine Seite in eine Einleitung, den Hauptinhalt und Kontaktinformationen zu unterteilen.
So können Sie das <section>-Tag verwenden:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>Das <article>-Tag spezifiziert unabhängigen, in sich abgeschlossenen Inhalt. Es sollte für sich allein genommen sinnvoll 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 Forenbeitrag, ein Blogeintrag, eine Nachricht oder ein Kommentar.
So können Sie das <article>-Tag verwenden:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
Aufgabe
EinfachErstellen Sie ein HTML-Dokument, das <section>- und <article>-Tags verwendet, um eine Webseite zu strukturieren. Fügen Sie die folgenden Abschnitte hinzu:
- Einen
<main>-Bereich, der den Hauptinhalt der Seite enthält. - Erstellen Sie innerhalb von
<main>eine<section>mit einer Überschrift (<h2>), die "Upcoming Events" lautet. - Erstellen Sie innerhalb der
<section>zwei<article>-Elemente. - Jeder
<article>sollte eine Überschrift (<h3>) und einen Absatz (<p>) mit etwas Platzhaltertext enthalten. Verwenden Sie "Event 1" und "Event 2" für die Überschriften sowie "Event 1 details..." und "Event 2 details..." für die Absätze.
Spickzettel
Das <section>-Tag definiert einen Abschnitt in einem Dokument, um zusammengehörige Inhalte zu gruppieren:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>Das <article>-Tag spezifiziert unabhängigen, in sich abgeschlossenen Inhalt, der für sich allein stehen kann:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>
Teste dich selbstDiese 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-Bereich
Event-Details-BereichRegistrierungsformularFooter-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