Verstehen und Verwenden von Artikel- und Abschnittselementen im HTML5_HTML5-Tutorial

HTML5 bringt eine Reihe neuer Elemente mit sich und wird in Zukunft weit verbreitet sein. Es gibt jedoch einige Elemente, deren Verwendung verwirrend sein kann, darunter zwei neue Elemente:

und

.
Die am häufigsten gestellte Frage lautet: Unter welchen Umständen sollten wir diese Elemente verwenden? Und wie sollen wir diese Elemente richtig nutzen?

Abschnittselement
Dies ist das mehrdeutigste Element. Wie unterscheidet es sich vom

-Element? Wir haben

verwendet, um Absätze zu unterteilen. Wann sollten wir also neben

dieses Element verwenden? Zur Veranschaulichung zitieren wir die offizielle Dokumentation. Laut WHATWG-Dokument wird das

-Element wie folgt beschrieben:
„Das

-Element stellt einen gemeinsamen Absatz in einem Dokument oder einer Anwendung dar – WHATWG“

Aus der Beschreibung können wir siehe Der Zweck des

-Elements besteht darin, es zu segmentieren, mehr oder weniger ähnlich wie

. Aber es gibt immer noch einen Sonderfall. In der Dokumentation wurde eine spezielle Aussage hinzugefügt:
„Wenn ein Element ausschließlich aus Stilgründen oder zur Vereinfachung der Skripterstellung verwendet wird, empfehlen wir Autoren,

zu verwenden. Das

-Element gilt, wenn der Inhalt des Elements explizit ist Auflistung ist erforderlich. - WHATWG"

Auf dieser Grundlage können wir die folgenden zwei Punkte zusammenfassen:
Erstens kann das Abschnittselement zwar technisch gestaltet werden, wir empfehlen jedoch dennoch die Verwendung div-Elemente, wenn komplexe Stile oder Skripte vorhanden sind.
Zweitens wird das Abschnittselement ähnlich wie das

-Element zum Auflisten von Inhalten verwendet.

In einem realen Beispiel besteht der Grund für die Verwendung des

-Elements darin, den Inhalt des Blogs zu strukturieren. Der Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

Titel des Blog-Beitrags

Eis-Törtchen-Pulver-Gelee-o.
Gummi-Schokoladenkuchen-Eiscreme-Keks-Halva-Tiramisu-Gelee-o.

-title">Titel des Blogbeitrags

Eiscreme-Törtchen-Pulver-Gelee-o.
Gummies, Schokoladenkuchen, Eis, Kekse, Halva, Tiramisu-Gelee-o.

>

Eis-Törtchen-Pulver-Gelee-o
Gummies Schokoladenkuchen-Eiscreme-Keks-Halvah-Tiramisu-Gelee-o 🎜>

Dies ist nur ein Beispiel, das

-Element kann auch für andere Zwecke verwendet werden.


Artikelelement

Vom Namen her hat es sich schon gut erklärt, wir müssen uns aber noch anschauen, wie das offizielle Dokument es beschreibt:
„In einem Dokument, Seite, Anwendung oder Abschnitt einer Website, die im Allgemeinen unabhängig weiterverbreitbar oder wiederverwendbar ist, beispielsweise in einem Forumsbeitrag, einem Magazin- oder Nachrichtenartikel, einem Blogeintrag oder in Kommentaren von Benutzern, interaktiven Widgets oder Widgets oder anderen Stand-by-Elementen. alleiniges Inhaltselement. ”

Aus der obigen Beschreibung können wir schließen, dass das

-Element für strukturierte Artikel bestimmt ist, insbesondere für das, was wir veröffentlichen möchten, z. B. Blog-, Seiteninhalte oder Forenbeiträge.
Das folgende Beispiel zeigt, wie Sie mit

einen Blogartikel erstellen.



Code kopieren


Der Code lautet wie folgt:

meta">

• Name des Autors


• In Kategorien speichern

Sesam-Snaps.
Kekspulver-Gelee-Obstkuchen-Faworki-Schokoladenriegel.
Kuchen-Tootsie-Brötchen-Sesam-Snaps-Lebkuchen-Bonbon. /div>


Darüber hinaus kann das Element

verwendet werden um den Artikel in mehrere Abschnitte zu unterteilen, wie im folgenden Beispiel gezeigt.





Code kopieren

Der Code lautet wie folgt:

Dies ist der Titel des Blog-Beitrags

< ;li class="author">Name des Autors

In Kategorien speichern

;/div> ;

Dies ist die Unterüberschrift ;
Süße Brötchen-Halva-Keks-Lakritz-Törtchen-Pudding-Sesam-Schokolade
Keks-Pulver-Gelee-O-Früchte-Haferkuchen-Bonbon Applicake-Lebkuchengelee -O-Gebäck

Kuchen. Zuckerpflaumen-Schokoladen-Topping, dänisches Bonbon. Gummibärchen-Dragée-Brownie-Gelee-Keks.

Wie von den Gründern von HTML5 und den Direktoren des W3C vorhergesagt, sollen alle neuen Elemente, die HTML5 erstellt, die Webstruktur semantischer machen. Die korrekte Anwendung dieser Elemente ist unter Webentwicklern und -designern immer noch umstritten.
Verwechseln Sie auf keinen Fall die Ideen. Wie ich bereits erwähnt habe: Wenn es Sinn macht und Sie sehen, dass die Struktur damit Sinn macht, dann verwenden Sie es.