Analyse des différences entre div, section et article en HTML5

Cet article présente principalement l'explication détaillée de la différence entre p, section et article en HTML5. Il est extrait des instructions du W3C et répertorié avec des exemples de code. Les amis qui en ont besoin peuvent s'y référer

Quand. Je viens juste de commencer à m'intéresser au HTML5, je me posais beaucoup de questions sur son étiquetage qui était inconfortable, voire un peu rebutant à un moment donné. Surtout pour les balises div, section et article, je ne sais vraiment pas quand elles doivent être utilisées.
div

Spécification HTML :

L'élément p n'a aucune signification particulière.

Cette balise est celle que nous voyons et utilisons le plus de balises. Il n'a pas de sémantique en soi et est utilisé comme point d'ancrage pour la mise en page, le style ou la création de scripts.
section

Spécification HTML : « L'élément section représente une section générique d'un document ou d'une application. Une section, dans ce contexte, est un regroupement thématique de contenu, généralement avec un. titre."

est opposé au div non sémantique. Pour faire simple, une section est un div avec une sémantique, mais ne pensez pas que ce soit vraiment aussi simple. Une section représente un élément de contenu d'actualité, généralement avec un titre. En voyant cela, nous pouvons penser qu'un article de blog ou un commentaire séparé peut simplement utiliser une section ? Continuez à lire :

Les auteurs sont encouragés à utiliser l'élément article au lieu de l'élément section lorsqu'il serait logique de syndiquer le contenu de l'élément. Lorsqu'ils font référence à un objet, l'article doit être utilisé à la place de la section.

Alors, quand faut-il utiliser la section ? Continuez à lire :

Des exemples de sections seraient les chapitres, les différentes pages à onglets d'une boîte de dialogue à onglets ou les sections numérotées d'une thèse. La page d'accueil d'un site Web pourrait être divisée en sections pour une introduction, des actualités. et les informations de contact.

Les scénarios d'application typiques incluent des chapitres d'articles, des onglets dans des boîtes de dialogue d'onglets ou des sections numérotées dans des articles. La page d'accueil d'un site Web peut être divisée en sections telles que l'introduction, les actualités et les coordonnées. En fait, je suis très intéressé par les informations transmises ici, car je pense que la section et l'article à présenter ci-dessous sont plus adaptés aux applications modulaires. Ce sujet sera abordé dans un article spécial à l'avenir, je le passerai donc ici. pour l'instant.

Notez que le W3C avertit également :

L'élément section n'est pas un élément conteneur générique. Lorsqu'un élément est nécessaire à des fins de style ou pour faciliter la création de scripts, les auteurs sont encouragés à utiliser le. p à la place. Une règle générale est que l'élément section n'est approprié que si le contenu de l'élément est répertorié explicitement dans le plan du document. "

section n'est pas simplement une balise de conteneur ordinaire. Lorsqu'une balise est juste Pour à des fins de style ou de script, p doit être utilisé. De manière générale, la section

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

article

est appropriée lorsque le contenu de l'élément apparaît clairement dans le plan du document. 🎜>Spécification HTML : L'élément article représente une composition autonome dans un document, une page, une application ou un site et qui est, en principe, distribuable ou réutilisable de manière indépendante, par exemple en syndication.

article est une balise de section spéciale, qui a une sémantique plus claire que la section. Elle représente un bloc indépendant et complet de contenu associé. De manière générale, l'article aura une partie titre (le contenant généralement. (dans l'en-tête), et parfois aussi. contient le pied de page. Bien que la section soit également un élément de contenu thématique, l'article lui-même est indépendant et complet en termes de structure et de contenu

Spécifications HTML. Ensuite, j'ai répertorié quelques scénarios applicables pour l'article

Il peut s'agir d'un message de forum, d'un article de magazine ou de journal, d'une entrée de blog, d'un commentaire soumis par un utilisateur, d'un widget ou d'un gadget interactif, ou de tout autre élément de contenu indépendant.

Lorsqu'un article est intégré. dans un article, en principe, le contenu de l’article intérieur est lié au contenu de l’article extérieur. Par exemple, dans un article de blog, l'article contenant les commentaires soumis par l'utilisateur doit être masqué dans l'article de blog contenant.

La question est de savoir ce qui compte comme « contenu indépendant complet » ? L'un des moyens les plus simples de le savoir est de voir si le contenu est complet dans le flux RSS. Vérifiez si le contenu est complet et indépendant sans son contexte.

Exemple :

Résumé

article de la section p, la sémantique est repartie de zéro et progressivement améliorée. p n'a pas de sémantique et n'est utilisé que comme élément de style ou de script. Pour un élément de contenu thématique, la section est applicable. Si cet élément de contenu peut être séparé du contexte et utilisé comme un élément de contenu indépendant complet, alors il suffit de l'appliquer. article. En principe, lorsque vous pouvez utiliser article, vous pouvez également utiliser section, mais en fait, si l’utilisation d’article est plus appropriée, n’utilisez pas section. La même chose est vraie pour l'utilisation de nav et side. Ces deux balises sont également des sections spéciales. Lorsque l'utilisation de nav et side est plus appropriée, n'utilisez pas section.

La distinction entre p et section, article et autres balises est relativement simple. La distinction entre section et article peut paraître difficile à première vue. En fait, l’essentiel est de voir si ce contenu peut exister en tant que contenu complet et indépendant sans être séparé du tout. L’accent est ici mis sur l’exhaustivité. Parce qu'en fait, le contenu contenu dans la section peut également être considéré comme un élément indépendant, mais il ne peut être considéré que comme une partie d'un tout, et l'article est un tout complet.

Parce que parfois chacun a ses propres opinions, il est donc inévitable qu'il soit difficile de prendre une décision. Que dois-je faire ?

Dans les principes de conception HTML5, il y en a un spécifiquement conçu pour résoudre des situations similaires :

Priorité de l'utilisateur final (Priorité des circonscriptions)

« En cas de conflit, considérez les utilisateurs sur les auteurs, sur les implémenteurs, sur les prescripteurs, sur la pureté théorique. » En cas de conflit, les utilisateurs finaux viennent en premier, suivis des auteurs, puis des implémenteurs, puis des normalisateurs, et enfin de la perfection théorique.

Il est recommandé de lire plusieurs fois les principes de conception HTML5. C'est le secret ultime derrière ce monde compliqué.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Partage de solutions pour améliorer la compatibilité des balises vidéo dans les navigateurs en HTML5

À propos de pushState d'utilisation de H5 analyse de replaceState

Comment utiliser HTML5 Shiv pour résoudre le problème selon lequel IE n'est pas compatible avec les balises HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!