Analyse der Unterschiede zwischen Div, Abschnitt und Artikel in HTML5

Dieser Artikel führt hauptsächlich die detaillierte Erklärung des Unterschieds zwischen p, Abschnitt und Artikel in HTML5 ein. Er wird aus den Anweisungen des W3C zitiert und mit Codebeispielen aufgeführt.

Wann Ich habe gerade angefangen, mit HTML5 in Kontakt zu kommen, und hatte viele Fragen dazu. Die Bezeichnung war an einer Stelle sogar etwas abstoßend. Insbesondere bei den Tags „div“, „section“ und „article“ weiß ich wirklich nicht, wann sie verwendet werden sollten.
div

HTML-Spezifikation:

Das p-Element hat überhaupt keine besondere Bedeutung.

Dieses Tag sehen und verwenden wir die meisten Tags. Es hat an sich keine Semantik und wird als Aufhänger für Layout und Stil oder Skripterstellung verwendet.
Abschnitt

HTML-Spezifikation: „Das Abschnittselement stellt einen allgemeinen Abschnitt eines Dokuments oder einer Anwendung dar. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten, typischerweise mit einem Überschrift.“

ist das Gegenteil des nicht-semantischen Div. Um es einfach auszudrücken: Ein Abschnitt ist ein Div mit Semantik, aber ich glaube nicht, dass es wirklich so einfach ist. Ein Abschnitt stellt einen aktuellen Inhalt dar, normalerweise mit einem Titel. Wenn wir das sehen, denken wir vielleicht, dass ein Blog-Beitrag oder ein separater Kommentar nur den Abschnitt verwenden kann? Lesen Sie weiter:

Autoren wird empfohlen, das Artikelelement anstelle des Abschnittselements zu verwenden, wenn es sinnvoll wäre, den Inhalt des Elements zu syndizieren. Beim Verweisen auf ein Objekt sollte Artikel anstelle von Abschnitt verwendet werden.

Wann sollte der Abschnitt verwendet werden? Lesen Sie weiter:

Beispiele für Abschnitte wären Kapitel, die verschiedenen Registerkarten in einem Dialogfeld mit Registerkarten oder die nummerierten Abschnitte einer These, die für eine Einführung oder Nachrichten in Abschnitte unterteilt werden könnten und Kontaktinformationen.

Typische Anwendungsszenarien umfassen Kapitel von Artikeln, Tabs in Tab-Dialogfeldern oder nummerierte Abschnitte in Aufsätzen. Die Homepage einer Website kann in Abschnitte wie Einführung, Neuigkeiten und Kontaktinformationen unterteilt werden. Tatsächlich bin ich sehr an den hier vermittelten Informationen interessiert, da ich der Meinung bin, dass der unten vorgestellte Abschnitt und der Artikel besser für modulare Anwendungen geeignet sind. Dieses Thema wird in Zukunft in einem speziellen Artikel behandelt, daher werde ich es hier überspringen zur Zeit.

Beachten Sie, dass das W3C außerdem warnt:

Das Abschnittselement ist kein generisches Containerelement. Wenn ein Element für Gestaltungszwecke oder zur Erleichterung der Skripterstellung benötigt wird, wird den Autoren empfohlen, das zu verwenden Stattdessen gilt die allgemeine Regel, dass das Abschnittselement nur dann geeignet ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wird Für Stil- oder Skriptzwecke sollte p verwendet werden. Im Allgemeinen ist der Abschnitt

<article>
    <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup>
    <p>The apple is the pomaceous fruit of the apple tree.</p>
    <section>
        <h1>Red Delicious</h1>
        <p>These bright red apples are the most common found in many supermarkets.</p>
    </section>
    <section>
        <h1>Granny Smith</h1>
        <p>These juicy, green apples make a great filling for apple pies.</p>
    </section>
</article>

Artikel

Das Artikelelement stellt eine eigenständige Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Site dar und ist grundsätzlich unabhängig verteilbar oder wiederverwendbar, z. B. in der Syndizierung. Der Artikel ist ein spezieller Abschnitts-Tag, der eine klarere Semantik aufweist als der Abschnitt. Er stellt im Allgemeinen einen Titelteil dar (normalerweise in der Kopfzeile enthalten). Der Abschnitt ist ebenfalls ein thematischer Inhalt, der Artikel selbst ist in Bezug auf Struktur und Inhalt unabhängig und vollständig.

Es folgt eine Liste einiger anwendbarer Szenarien für den Artikel Dies kann ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, ein vom Benutzer eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderes unabhängiges Inhaltselement sein.

Wenn ein Artikel in ein eingebettet ist Artikel: Im Prinzip steht der Inhalt des inneren Artikels im Zusammenhang mit dem Inhalt des äußeren Artikels. Beispielsweise sollte in einem Blog-Beitrag der Artikel, der vom Benutzer eingereichte Kommentare enthält, innerhalb des enthaltenden Blog-Beitrags-Artikels ausgeblendet werden.

Die Frage ist, was als „vollständig unabhängiger Inhalt“ gilt. Eine der einfachsten Möglichkeiten, dies festzustellen, besteht darin, zu prüfen, ob der Inhalt im RSS-Feed vollständig ist. Prüfen Sie, ob der Inhalt ohne seinen Kontext vollständig und unabhängig ist.

Beispiel:

<article>
    <header>
        <h1>The Very First Rule of Life</h1>
        <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there&#39;s a microphone anywhere near you, assume it&#39;s hot and sending whatever you&#39;re saying to the world. Seriously.</p>
    <p>...</p>
    <footer>
        <a href="?comments=1">Show comments...</a>
    </footer>
</article>
<article>
    <header>
        <h1>The Very First Rule of Life</h1>
        <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there&#39;s a microphone anywhere near you, assume it&#39;s hot and sending whatever you&#39;re saying to the world. Seriously.</p>
    <p>...</p>
    <section>
        <h1>Comments</h1>
        <article>
            <footer>
                <p>Posted by: George Washington</p>
                <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
            </footer>
            <p>Yeah! Especially when talking about your lobbyist friends!</p>
        </article>
          <article>
            <footer>
                <p>Posted by: George Hammond</p>
                <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
            </footer>
            <p>Hey, you have the same first name as me.</p>
        </article>
    </section>
</article>

Zusammenfassung

p Abschnittsartikel, die Semantik wird von Grund auf neu erstellt und schrittweise verbessert. p hat keine Semantik und wird nur als Styling- oder Skript-Hook verwendet. Für einen thematischen Inhalt ist der Abschnitt anwendbar. Wenn dieser Inhalt vom Kontext getrennt und als vollständiger und unabhängiger Inhalt verwendet werden kann, dann ist dies der Fall Artikel anwenden. Wenn Sie „article“ verwenden können, können Sie im Prinzip auch „section“ verwenden. Wenn die Verwendung von „article“ jedoch angemessener ist, verwenden Sie „section“ nicht. Dasselbe gilt für die Verwendung von nav und aside. Diese beiden Tags sind ebenfalls spezielle Abschnitte. Wenn die Verwendung von nav und aside besser geeignet ist, verwenden Sie keinen Abschnitt.

Die Unterscheidung zwischen p und Abschnitt, Artikel und anderen Tags ist relativ einfach. Die Unterscheidung zwischen Abschnitt und Artikel mag auf den ersten Blick schwierig erscheinen. Tatsächlich kommt es darauf an, ob dieser Inhalt noch als vollständiger und unabhängiger Inhalt existieren kann, ohne vom Ganzen getrennt zu werden. Denn tatsächlich kann der im Abschnitt enthaltene Inhalt auch als eigenständiges Stück betrachtet werden, er kann jedoch nur als Teil des Ganzen betrachtet werden, und der Artikel ist ein vollständiges Ganzes.

Da manchmal jeder seine eigene Meinung hat, ist es unvermeidlich, dass es schwierig sein wird, eine Entscheidung zu treffen. Was soll ich tun?

In den HTML5-Designprinzipien gibt es eines, das speziell zur Lösung ähnlicher Situationen entwickelt wurde:

Priorität des Endbenutzers (Priorität der Wahlkreise)

„Im Konfliktfall die Benutzer berücksichtigen.“ über Autoren über Implementierer über Spezifizierer über theoretische Reinheit.“ Sobald Konflikte auftreten, haben die Endbenutzer Vorrang, gefolgt von den Autoren, dann den Implementierern, dann den Standardsetzern und schließlich der theoretischen Perfektion.

Es wird empfohlen, die HTML5-Designprinzipien mehrmals zu lesen. Dies ist das ultimative Geheimnis hinter der komplizierten Welt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Austausch von Lösungen zur Verbesserung der Browserkompatibilität von Video-Tags in HTML5

Über die H5 pushState-Nutzungsanalyse von replaceState

So verwenden Sie HTML5 Shiv, um das Problem zu lösen, dass IE nicht mit HTML5-Tags kompatibel ist

Das obige ist der detaillierte Inhalt vonAnalyse der Unterschiede zwischen Div, Abschnitt und Artikel in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!