Commentaire: HTML5 apporte une série de nouveaux éléments, les deux nouveaux éléments suivants: L'article et la section sont assez déroutants. Nous mentionnons souvent quelles circonstances nous devons utiliser ces éléments. Ensuite, nous présenterons les applications des deux. Ceux qui sont intéressés peuvent y faire référence.
HTML5 apporte une série de nouveaux éléments et sera largement utilisé à l'avenir. Cependant, certains éléments sont facilement confus lorsqu'ils sont utilisés, y compris les deux nouveaux éléments suivants: <Reticle> et <Action>.
La question la plus courante est: dans quelles circonstances devrions-nous utiliser ces éléments? Et comment devrions-nous utiliser ces éléments correctement?
Élément de section
C'est l'élément le plus ambigu. Quelle est la différence entre elle et l'élément <v>? Nous utilisons <v> pour diviser les paragraphes, donc à l'exception de <v>, quand utilisons-nous cet élément? Nous citons la documentation officielle pour l'illustrer. Selon la documentation de Whatwg, la description suivante est faite pour l'élément <Section>:
<Section> L'élément représente un paragraphe commun dans un document ou une application - Whatwg
D'après la description, nous pouvons voir que la fonction de l'élément <section> est la segmentation, plus ou moins similaire à <v>. Mais il a toujours un cas spécial. Dans le document, une déclaration spéciale est ajoutée:
Lorsqu'un élément est utilisé uniquement pour le style ou pour les scripts, nous encourageons les auteurs à utiliser <v>. L'élément <Section> convient au moment où le contenu de l'élément doit être explicitement répertorié. - whatwg
Sur la base de ce point, nous pouvons résumer les deux points suivants:
Premièrement, bien que les éléments de section soient techniquement style, nous recommandons toujours d'utiliser des éléments div lorsqu'il existe des styles ou des scripts complexes.
Deuxièmement, similaire à l'élément <li>, l'élément de section est utilisé pour énumérer le contenu.
Ainsi, dans un exemple réaliste, la raison de l'utilisation de l'élément <Section> est de structurer le contenu du blog, le code est le suivant:
<div>
<segction>
<h2> Titre du billet de blog </h2>
<p> Jelly-O à poudre de crème glacée.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramissu Jelly-O. </p>
</ section>
<segction>
<h2> Titre du billet de blog </h2>
<p> Jelly-O à poudre de crème glacée.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramissu Jelly-O. </p>
</ section>
<segction>
<h2> Titre du billet de blog </h2>
<p> Jelly-O à poudre de crème glacée.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramissu Jelly-O. </p>
</ section>
</div>
Ce n'est qu'un exemple, et l'élément <section> peut également être utilisé à d'autres fins.
Éléments d'article
D'après le nom, il s'est déjà bien interprété, mais nous devons encore voir comment il est décrit dans la documentation officielle:
Une section distincte sur un document, une page, une application ou un site et généralement peut être allouée ou réutilisée indépendamment, par exemple lors de la publication. Il peut s'agir d'une publication de forum, d'un magazine ou d'une nouvelle, des entrées de blog, des commentaires soumis à l'utilisateur, des widgets ou des widgets interactifs, ou du contenu pour tout autre projet autonome.
D'après la description ci-dessus, nous pouvons résumer que l'élément <bands> est dédié aux articles structurés, en particulier ceux que nous voulons publier, tels que les blogs, le contenu de la page ou les publications de forum.
L'exemple suivant montre comment créer un article de blog à l'aide de <article>.
<Re article>
<dique>
<h1> Ceci est le titre de blog Titre </H1>
<div>
<ul>
<li> Nom de l'auteur </li>
<li> Enregistrer dans les catégories </li>
</ul>
</div>
</-header>
<div>
Sweet Roll Halvah Biscuit Toffee Liquorice Pudding Pudding Sesame Snaps.
Biscuit Powder Jelly-O Fruitcake Faworki Barbolate. Boudin d'avoine
Cake Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Gummies
halvah gummies biscuit danois applique la pâte à gelée de pain d'épice.
</div>
</article>
De plus, l'élément <boupre> peut également être combiné avec l'élément de section. En cas de besoin, vous pouvez utiliser l'élément <salction> pour diviser l'article en plusieurs paragraphes, comme indiqué dans l'exemple suivant.
<Re article>
<dique>
<h1> Ceci est le titre de blog Titre </H1>
<div>
<ul>
<li> Nom de l'auteur </li>
<li> Enregistrer dans les catégories </li>
</ul>
</div>
</-header>
<div>
<segction>
<h2> C'est le sous-tête </h2>
Sweet Roll Halvah Biscuit Toffee Liquorice Pudding Pudding Sesame Snaps.
Biscuit Powder Jelly-O Fruitcake Faworki Barbolate. Gâteau à l'avoine du pudding
Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Gummies Halvah
Gummies Danish Biscuit appliquez une pâtisserie en gingembre.
</ section>
<segction>
<h3> Il s'agit d'un autre sous-capteur </h3>
Topping Cheesecake Sweet Pie Carrot Cake Sweet Roll. Gummi porte des gouttes de citron
Toffee Sesame Snaps Tart Topping Chupa Chups Apple Pie Gummies. Chocolat à la tranche
gâteau. Barre de chocolat à prune à sucre garniture de crème glacée Gâteau de carotte Bonbon danois.
Gummi Cheesecake Bears Dragate Jujubes Dragate Dragate Brownie Jelly Biscuit. Poudre Croissant Jelly Beans Pastry.
</ section>
</div>
</article>
Résumer
Comme prévu par le fondateur du World Wide Web et les directeurs de W3C, tous les nouveaux éléments créés par HTML5 sont dans le but de rendre la structure du réseau plus sémantique. Il y a encore un débat entre les développeurs Web et les concepteurs comment appliquer correctement ces éléments.
Quoi qu'il en soit, ne confondez pas le point de vue. Comme je l'ai mentionné précédemment, tant qu'il s'agit d'une situation raisonnable et que vous voyez que l'utiliser rend la structure significative, veuillez l'utiliser.