Heim Web-Frontend H5-Tutorial Über den Unterschied zwischen Abschnitts-Tag und Div-Tag in HTML5 (Beispiele enthalten)

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

Aug 29, 2018 pm 04:57 PM
div html section

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>
Nach dem Login kopieren

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

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.
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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles