Über den Unterschied zwischen Abschnitts-Tag und Div-Tag in HTML5 (Beispiele enthalten)

Der Hauptzweck dieses Artikels besteht darin, Ihnen den Unterschied zwischen HTML5-Abschnitts- und Div-Tags vorzustellen. Die Verwendung von Abschnitts- und Div-Tags mag ähnlich erscheinen, an manchen Stellen kann es jedoch zu Unterschieden kommen Ineinander konvertiert, aber an einigen Stellen können Sie nur Abschnitte oder Divs verwenden, die nicht konvertiert werden können. Schauen wir uns zunächst an, was im HTML-Standard geschrieben ist Abschnitts-Tag:

Jeder Abschnitt entspricht einem anderen Thema. Achten Sie auf das Thema des Inhalts selbst, nicht auf die von anderen festgelegten Trennkriterien. Beispiele für

Abschnitte sind Buchkapitel, jede Registerkartenseite eines Dialogfelds mit mehreren Registerkarten und nummerierte Abschnitte einer Arbeit. Die Homepage der Website kann in Abschnitte wie Einführung, neueste Inhalte, Kontaktinformationen usw. unterteilt sein.

Hinweis: Webseitenautoren sollten Artikel anstelle von Abschnittselementen verwenden, wenn ihr Inhalt für Syndikatszwecke verwendet wird. Zum Beispiel jedes Blog auf der Blog-Homepage. Ein weiteres Beispiel ist die erste Etage, die zweite Etage, die dritte Etage ... und die Etage mit Forumbeiträgen. Normalerweise ist jeder Teil dieses Inhalts in der Form ähnlich, aber unabhängig von der Quelle.

Hinweis: Abschnitt ist kein universelles Containerelement. Wenn es nur für Styling oder Skripterstellung verwendet wird, verwenden Sie div-Elemente. Eine einfache Faustregel besteht darin, das Abschnittselement nur zu verwenden, wenn der Inhalt des Elements in der Dokumentgliederung aufgeführt wird.

Als nächstes sprechen wir über den Unterschied zwischen HTML5-Abschnitts-Tag und div-Tag:

1 Abschnitt ist kein Tag, der speziell als Container verwendet wird, sondern div

Der Abschnitt sollte einen Titel (h1~6) enthalten, es wird jedoch empfohlen, stattdessen einen Artikel zu verwenden.

Wir können ihn als einen Nicht-Artikel-Absatz verstehen, einen speziellen Modulcontainer mit einem klare ID (nicht für Paketcontainer für Wohnblöcke bestimmt).

Mit anderen Worten, wenn div im Allgemeinen als Elementcontainer anstelle von Abschnitt verwendet wird, ist Abschnitt dann nutzlos? Muster Tucson gebrochen.

In diesem Fall ist es besser, section als div zu verwenden.

section ist, wie der Name schon sagt, ein Kapitel, wie zum Beispiel:

<section>
<h1>PHP中文网</h1>
<p>欢迎来到PHP中文网，这里的网址是www.php.cn</p>
</section>

Was den Grund betrifft Es dient der Semantik, es gibt Abschnitte, Artikel und DLs, die für Menschen und Computer leicht zu verstehen sind. Es ist viel besser als die Divs, die es überall gibt.

2. Einer der häufigsten Fehler bei der Verwendung von Tags ist die Gleichsetzung von HTML5 mit dc6dce4a544fdca2df29d5ac0ea9906b

2f8332c8dcfd5c7dec030a070bf652c3 ist kein Stilcontainer. Das Abschnittselement stellt einen semantischen Teil des Inhalts dar, der beim Erstellen einer Dokumentzusammenfassung hilft. Es sollte einen Header enthalten. Wenn Sie nach einem Element suchen, das als Seitencontainer fungiert (wie im HTML- oder XHTML-Stil), sollten Sie erwägen, den Stil direkt in das Body-Element zu schreiben, wie Kroc Camen vorschlägt. Wenn Sie noch zusätzliche Stilcontainer benötigen, bleiben Sie bei divs.

div ist universell und wird von allen Browsern unterstützt. 2f8332c8dcfd5c7dec030a070bf652c34d7ab0de9a42de71c682b0860bad1410 wird mit der gleichen Bedeutung verstanden, ersteres ist jedoch in H5 geschrieben

Zusammenfassung des Abschnitts-Tags und des Div-Tags in HTML5:

DIV: Dieses Tag war schon immer unser Tag Die am häufigsten gesehenen und verwendeten Tags. Es hat keine Semantik und wird als Layout- und Styling-Tag verwendet.

Abschnitt: Ähnlich wie div, aber mit weiterer Semantik. Ein Abschnitt wird als aktueller Inhalt verwendet, normalerweise mit einem Titel darin. Typische Anwendungsszenarien für Abschnitte sollten Kapitel von Artikeln, Registerkarten im Registerkarten-Dialogfeld oder nummerierte Teile der Arbeit sein.

【Empfehlung des Herausgebers】

Wie schließe ich den Text im Pre-Tag in HTML ein? Anwendungsbeispiele für HTML-Pre-Tags

Was bedeutet das HTML-UL-Tag? Detaillierte Erläuterung der Rolle des HTML-UL-Tags

Das obige ist der detaillierte Inhalt vonÜber den Unterschied zwischen Abschnitts-Tag und Div-Tag in HTML5 (Beispiele enthalten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!