Une analyse approfondie de la différence entre article et section en HTML5

Un bloc de contenu fait référence à une unité qui divise logiquement une page HTML. Pour les sites Web de pages, chaque partie telle que le menu de navigation, le texte de l'article et les commentaires de l'article peut être appelée un bloc de contenu.

L'élément article représente un contenu indépendant et complet dans un document, une page ou une application qui peut être référencé indépendamment en externe. Il peut s'agir d'un article de blog ou de journal, d'un message sur un forum, d'un commentaire d'utilisateur ou d'un plug-in autonome, ou de tout autre contenu autonome. En plus du contenu, un élément d'article possède généralement son propre titre (généralement placé à l'intérieur d'un élément d'en-tête) et parfois ses propres notes de bas de page.

 <article> <header> <h1>Titre</h1> <p>Date de publication : <time pubdate=pubdate>2010/10/10</time></p> </header> <p>Comment utiliser l'article </p> <footer> <p><small>Copyright @ yiiyaa.net Tous droits réservés</samll></p> </footer> </article>

Remarque : les éléments de l'article peuvent être imbriqués et le contenu interne doit en principe être associé au contenu externe. Par exemple, dans un article de blog, les commentaires sur l'article peuvent être imbriqués à l'aide d'éléments article ; l'élément article utilisé pour présenter les commentaires est inclus dans l'élément article qui représente le contenu global.

Le code imbriqué est le suivant :

 <article> <header> <h1>Comment utiliser l'élément article</h1> <p>Date de publication : <time pubdate=pubdate>10/10/2010</time></p> </header> <p >Cette balise affiche le contenu principal de l'article entier, et l'élément section ci-dessous contient les commentaires sur l'article</p> <section> <h2>Commentaires</h2> <article> <header> <h3>Publié par : maizi</h3> <p><time pubdate datetime=2016-6-14>il y a 1 heure</time></p> </header> <p>Cet article est très bon, donnez c'est un coup de pouce ! </p> </article> <article> <header> <h3>Publié par : Xiaoni</h3> <p><time pubdate datetime=2016-6-14T:21-26:00>il y a 1 heure</ time></p> </header> <p>Cet article est très bien, il explique l'article en détail</p> </article> </section></article>

L'exemple de contenu est divisé en plusieurs parties. Le titre de l'article est placé dans l'élément header, le texte de l'article est placé dans l'élément p après l'élément header, puis l'élément section distingue le texte des commentaires (c'est un élément bloquant). utilisé pour diviser le contenu de la page), en section Le contenu du commentaire est intégré dans l'élément. Le commentaire de chaque personne dans le commentaire est relativement indépendant et complet, donc un élément article est utilisé pour tous. L'élément article du commentaire peut être divisé en titres et en commentaires. est placé respectivement dans l'élément d'en-tête et l'élément p.

1. L'élément section est utilisé pour diviser le contenu de la page du site Web ou de l'application. La fonction de l'élément section est de diviser le contenu de la page en sections ou de diviser l'article en sections ;

2. Un élément de section se compose généralement du contenu et de son titre. Il n'est généralement pas recommandé d'utiliser l'élément section pour un contenu qui n'a pas de titre.

3. L'élément section n'est pas un élément conteneur ordinaire ; lorsqu'un contenu doit être stylisé directement ou un comportement défini via un script, il est recommandé d'utiliser p à la place de l'élément section ;

4. Si les éléments article, nav et side remplissent tous certaines conditions, n'utilisez pas l'élément section pour les définir ;

5. Le contenu de l'élément section peut être stocké séparément dans la base de données ou sorti dans un document Word.

 <section> <h1>Le </h1> titre de l'élément de section <p>La partie sujet du bloc de section</p> </section>

En HTML5, vous pouvez inclure toutes les parties subordonnées de la page, telles que les barres de navigation, les menus, les mentions de droits d'auteur, etc., dans une page unifiée afin qu'elles puissent être décorées à l'aide de styles CSS. Enfin, les tabous sur l’utilisation de l’élément section sont résumés comme suit :

1) N'utilisez pas l'élément section comme conteneur de page pour le style, c'est le travail de l'élément p.

2) Si l'élément article, l'élément side ou l'élément nav est plus approprié, n'utilisez pas l'élément section.

3) N'utilisez pas l'élément section pour les blocs de contenu sans titres.

Tant de choses ont été dites ci-dessus, quelle est la différence entre les deux ? En fait, en HTML5, l’élément article peut être considéré comme un type spécial d’élément section, qui met davantage l’accent sur l’indépendance que l’élément section. Autrement dit, l'élément section met l'accent sur la segmentation ou le regroupement, tandis que l'article met l'accent sur l'indépendance. Concrètement, si un élément de contenu est relativement indépendant et complet, vous devez utiliser l'élément article, mais si vous souhaitez diviser un élément de contenu en plusieurs paragraphes, vous devez utiliser l'élément section. De plus, en HTML5, l'élément p devient un conteneur. Lors de l'utilisation de styles CSS, un style CSS global peut être appliqué à ce conteneur.

Ce qui précède est la différence entre l'article et la section en HTML5 introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !