Ausführliche Erläuterung der Unterschiede zwischen Div, Abschnitt und Artikel im HTML5_HTML5-Tutorial

Als ich zum ersten Mal mit HTML5 in Kontakt kam, waren mir die Tags sehr unangenehm und ich fühlte mich sogar ein wenig angewidert davon. Insbesondere bei den Tags „div“, „section“ und „article“ weiß ich wirklich nicht, wann sie verwendet werden sollten.
div

HTML-Spezifikation:

Das div-Element hat überhaupt keine besondere Bedeutung.

Dieses Tag sehen und verwenden wir am häufigsten. 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, normalerweise mit einer Überschrift.“

Im Gegensatz zur Semantik von div ist section einfach ausgedrückt 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? Weiterlesen:

Autoren wird empfohlen, das Artikelelement anstelle des Abschnittselements zu verwenden, wenn es sinnvoll wäre, den Inhalt des Elements zu syndizieren.

Artikel sollte anstelle von Abschnitt verwendet werden, wenn der Inhalt der Elemente aggregiert wird, um mehr Sinn zu ergeben.

Wann sollte der Abschnitt verwendet werden? Weiterlesen:

Beispiele für Abschnitte wären Kapitel, die verschiedenen Registerseiten in einem Registerdialogfeld oder die nummerierten Abschnitte einer These, die in Abschnitte für eine Einleitung, Neuigkeiten und Kontaktinformationen unterteilt werden könnten.

Typische Szenarien für die

Abschnittsanwendung sind Kapitel von Artikeln, Registerkarten im Registerkartendialogfeld oder nummerierte Abschnitte in der Arbeit. 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 Stilzwecke oder zur Vereinfachung der Skripterstellung benötigt wird, wird empfohlen, stattdessen das Abschnittselement zu verwenden Der Inhalt des Elements würde explizit in der Gliederung des Dokuments aufgeführt.“

Abschnitt ist mehr als nur ein gewöhnlicher Container-Tag. Wenn ein Tag nur zur Gestaltung oder zur Erleichterung der Skripterstellung dient, sollte div verwendet werden. Im Allgemeinen ist ein Abschnitt geeignet, wenn der Inhalt des Elements explizit in der Dokumentgliederung erscheint.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Artikel>     
2.     <hgroup> <h1 >Äpfelh1> <h2>Leckere, köstliche Früchte!h2> hgroup>  
3.     <p>Der Apfel ist die Kernfrucht des Apfelbaums.p>    
4.     <Abschnitt>    
5.         <h1>Red Delicioush1>    
6.         <p>Diese leuchtend roten Äpfel sind die am häufigsten in vielen Supermärkten zu findenden Äpfel.p>    
7.     Abschnitt>    
8.     <Abschnitt>    
9.         <h1>Granny Smithh1>  
10.         <p>Diese saftigen, grünen Äpfel eignen sich hervorragend als Füllung für Apfelkuchen.p>    
11.     Abschnitt>    
12. Artikel>    

Artikel

HTML-Spezifikation:

Das Artikelelement stellt eine eigenständige Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Website dar und ist grundsätzlich unabhängig verteilbar oder wiederverwendbar, z. B. bei der Syndizierung.

Artikel ist ein spezielles Abschnitts-Tag, das eine klarere Semantik als Abschnitt hat. Es stellt einen unabhängigen und vollständigen Block verwandter Inhalte dar. Im Allgemeinen verfügt ein Artikel über einen Titelabschnitt (normalerweise in der Kopfzeile enthalten) und manchmal auch über eine Fußzeile. Obwohl es sich bei einem Abschnitt auch um einen thematischen Inhalt handelt, ist der Artikel selbst hinsichtlich seiner Struktur und seines Inhalts unabhängig und vollständig.

Die HTML-Spezifikation listet dann einige anwendbare Szenarien für den Artikel auf.

Dies kann ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, ein vom Benutzer eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderer unabhängiger Inhalt sein.

Wenn ein Artikel in einen Artikel eingebettet ist, bezieht sich der Inhalt des inneren Artikels grundsätzlich auf den 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:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Artikel>     
2.     <Kopfzeile>    
3.         <h1>Die allererste Lebensregelh1>    
4.         <p><Zeit pubdate datetime="2009-10-09T14:28-08:00">< /Zeit>p>  
5.     Kopfzeile>    
6.     <p>Wenn irgendwo in Ihrer Nähe ein Mikrofon steht, gehen Sie davon aus, dass es heiß ist und sendet, was auch immer Sie möchten Ich sage es der Welt. Im Ernst.p>    
7.     <p>... p>    
8.     <Fußzeile>  
9.         <a href="?comments =1">Kommentare anzeigen...a>  
10.     Fußzeile>    
11. Artikel>  
12.   
13. <Artikel>     
14.     <Kopfzeile>    
15.         <h1>Die allererste Regel des Lebensh1>  
16.         <p><Zeit pubdate datetime="2009-10-09T14:28-08:00">< /Zeit>p>    
17.     Kopfzeile>  
18.     <p>Wenn irgendwo in Ihrer Nähe ein Mikrofon steht, gehen Sie davon aus, dass es heiß ist und sendet, was auch immer Sie möchten Ich sage es der Welt. Im Ernst.p>    
19.     <p>... p>    
20.     <Abschnitt>  
21.         <h1>Kommentareh1>    
22.         <Artikel>  
23.             <Fußzeile>  
24.                 🎜>p>                   pubdate datetime="2009-10-10T19:10-08:00">
25. < /Zeit>p>                 Fußzeile>               <p>Ja! Vor allem, wenn du über deine Lobbyisten-Freunde sprichst!
26.         Artikel>    
27.           <Artikel>               <Fußzeile>
28.                      🎜>p>  
29.                 <p><heure pubdate datetime="2009-10-10T19:15-08:00">< /heure>p>  
30.             pied de page>  
31.             <p>Hé, tu as le même prénom que moi.p>  
32.         article>    
33.     section>    
34. article>    

总结

article de la section div ，仅仅用作样式化或者脚本化的钩子(hook)，对于Section 一段主题性的内容，则就适用，而Il y a un article sur l'article. article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav et à côté 的使用也是如此,这两个标签也是特殊的 section，在使用 nav et à côté 更合适的情况下，也不Section 要使用 了。

对于 div et section、 article 以及其他标签的区分比较简单。对于 section et article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的Section 内容而存在，这里面的重点又在完整身上.是它只能算是组成整体的一部分，article 才是一个完整的整体。

在

HTML5 设计原理

中，有一条是专门用来解决类似情况的： 最终用户优先(Priorité des circonscriptions)

« En cas de conflit, privilégiez les utilisateurs plutôt que les auteurs, plutôt que les implémenteurs, plutôt que les spécificateurs, plutôt que la pureté théorique. » 一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

推荐各位多读几遍

HTML5 设计原理

，这才是纷繁世界背后的最终奥义。