Explication détaillée des différences entre div, section et article dans les compétences du didacticiel HTML5_html5

Lorsque je suis entré en contact avec HTML5 pour la première fois, j'étais très mal à l'aise avec ses balises, et je me sentais même un peu dégoûté. Surtout pour les balises div, section et article, je ne sais vraiment pas quand elles doivent être utilisées.
div

Spécifications HTML :

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

Cette balise est celle que nous voyons et utilisons le plus. 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.
rubrique

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

Contrairement à la sémantique de div, en termes simples, 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 ? Lire ensuite :

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.

L'article doit être utilisé à la place de la section lorsque le contenu des éléments est agrégé pour avoir plus de sens.

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 des informations de contact.

Les scénarios typiques pour l'application de

sections incluent des chapitres d'articles, des onglets dans la boîte de dialogue des onglets ou des sections numérotées dans le document. 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 véhiculées ici, car je pense que la section et l'article présentés 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.

Sachez que le W3C prévient é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 l'élément div à 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 serait répertorié explicitement dans le plan du document. "

section est plus qu'une simple balise de conteneur ordinaire. Lorsqu'une balise est uniquement destinée au style ou à faciliter la création de scripts, div doit être utilisé. De manière générale, une section est appropriée lorsque le contenu de l'élément apparaît explicitement dans le plan du document.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <article>     
2.     <hgroup> <h1 >Pommesh1> <h2>Fruits savoureux et délicieux !h2> hgroup>  
3.     <p>La pomme est le fruit à pépins du pommier.p>    
4.     <section>    
5.         <h1>Rouge Délicieuxh1>    
6.         <p>Ces pommes rouge vif sont les plus communes trouvées dans de de nombreux supermarchés.p>    
7.     section>    
8.     <section>    
9.         <h1>Mamie Smithh1>  
10.         <p>Ces pommes vertes juteuses font une excellente garniture pour les tartes aux pommes.p>    
11.     section>    
12. article>    

article

Spécifications 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 indépendamment, 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é. Généralement, un article aura une section de titre (généralement contenue dans l’en-tête) et parfois un pied de page. Bien qu’une section soit également un contenu thématique, l’article lui-même est indépendant et complet en termes de structure et de contenu.

La spécification HTML répertorie ensuite certains 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.

Lorsque l'article est intégré dans l'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 :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <article>     
2.     <en-tête>    
3.         <h1>La Toute Première Règle de Vieh1>    
4.         <p><heure pubdate datetime="2009-10-09T14:28-08:00">< /heure>p>  
5.     en-tête>    
6.     <p>S'il y a un microphone n'importe où près de vous, supposez qu'il fait chaud et envoie ce que vous dis au monde. Sérieusement.p>    
7.     <p>... p>    
8.     <pied de page>  
9.         <a href="?commentaires =1">Afficher les commentaires...a>  
10.     pied de page>    
11. article>  
12.   
13. <article>     
14.     <en-tête>    
15.         <h1>La Toute Première Règle de Vieh1>  
16.         <p><heure pubdate datetime="2009-10-09T14:28-08:00">< /heure>p>    
17.     en-tête>  
18.     <p>S'il y a un microphone n'importe où près de vous, supposez qu'il fait chaud et envoie ce que vous dis au monde. Sérieusement.p>    
19.     <p>... p>    
20.     <section>  
21.         <h1>Commentairesh1>    
22.         <article>  
23.             <pied de page>  
24.                 <p>Publié par : George Washingtonp>  
25.                 <p><heure pubdate datetime="2009-10-10T19:10-08:00">< /heure>p>    
26.             pied de page>  
27.             <p>Ouais ! Surtout quand on parle de vos amis lobbyistes !p>    
28.         article>    
29.           <article>  
30.             <pied de page>    
31.                 <p>Publié par : George Hammondp>  
32. <p><時間 pubdate datetime="2009-10-10T19:15-08:00">< /時間>p>
33. フッター>
34. <p>やあ、あなたは私と同じ名をお持ちですね。p>
35. 記事>
36. セクション>
37. 記事>

总结

div セクションの記事、説明は何もなく、段階的に強化されています。div には何も説明はなく、単に形式化またはスクリプト化するためのフック (フック) であり、第 1 段階の主な内容に適したセクションです。基本的に、このセクションのコンテンツは、完全に独立して存在するセクションのコンテンツとして、コンテキストを削除できるため、記事の使用に適しています。 nav と aside の使用も同様で、この 2 つのセクションも特殊なセクションであり、nav と aside を使用するのがより適切な場合には、セクション 了も使用する必要はありません。

div とセクション、アーティクル、およびその他のセクションの区別は非常に難しく、そのセグメントのコンテンツが完全に独立したものとして機能することはできないと見なすことが最も重要です。内容が存在するため、このセクションに含まれる内容も独立したブロックとして構成されますが、それらは全体の一部としてのみ構成され、記事は完全な全体となります。

各人が独自の閲覧法を持っているため、断続的な天候を避けることができます。

に

HTML5 の原則

があり、一条は专门用に解决类似情况的： 最终用户优先(選挙区の優先順位)

「矛盾がある場合は、理論的な純粋さよりも、作成者よりも実装者よりも、指定子よりもユーザーを考慮してください。」 クラッシュに遭遇すると、最もユーザーが優先され、次が作成者、次が実行者、次が標準制定者、最後が合理的なユーザーになります。

推荐各位多读几遍

HTML5 設計原理

、これは最も有名な世界の次の最終奥義です。