Maison > interface Web > Tutoriel H5 > Introduction détaillée à la différence entre l'article et la section HTML5

Introduction détaillée à la différence entre l'article et la section HTML5

黄舟
Libérer: 2018-05-15 15:49:45
original
2901 Les gens l'ont consulté

Le 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ément article
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>标题</h1>           
<p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>  
</header>
  <p>article的使用方法</p>        
  <footer>            
  <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>  
  </footer>
  </article>
Copier après la connexion

Remarque : les éléments de l'article peuvent être imbriqués, le contenu interne doit en principe être lié 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>article元素使用方法</h1>
    <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  </header>

  <p>此标签里显示的是article整个文章的主要内容,,下面的section元素里是对该文章的评论</p>
      
  <section>
            <h2>评论</h2>
    <article>
                  <header>
        <h3>发表者:maizi</h3>
        <p><time pubdate datetime="2016-6-14">1小时前</time></p>
      </header>  
      <p>这篇文章很不错啊,顶一下!</p>
           </article> 
    <article>
                  <header>            
        <h3>发表者:小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>
      </header>
    <p>这篇文章很不错啊,对article解释的很详细</p>  
    </article>
      </section>
</article>
Copier après la connexion

L'exemple de contenu est divisé en plusieurs parties. Le titre de l'article est placé dans l'élément d'en-tête, et le corps de l'article est placé dans l'élément p après l'élément header, l'élément section distingue le texte des commentaires (c'est un élément bloquant utilisé pour distinguer le contenu de la page. Le contenu du commentaire est intégré dans la section). Dans le commentaire Le commentaire de chaque personne 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 une partie titre et une partie contenu du commentaire, qui sont placées dans l'élément d'en-tête et. p respectivement.
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. morceaux, ou Lorsqu'il s'agit de diviser un 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 du contenu sans titres,

3. L'élément section n'est pas un élément conteneur ordinaire lorsqu'un contenu doit l'être ; être stylisé directement Ou lors de la définition du comportement via un script, il est recommandé d'utiliser p au lieu de l'élément section

4. Si les éléments article, nav et apart remplissent tous les Si certaines conditions sont remplies, alors n'utilisez pas l'élément section pour le définir

5. Le 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>section元素的</h1>标题
    <p>section区块的主题部分</p>
  </section>
Copier après la connexion

Dans HTML5, vous pouvez inclure les parties subordonnées de toutes les pages, telles que les barres de navigation, les menus, les notes de droits d'auteur, etc. Dans une page unifiée, les styles CSS peuvent être utilisés pour la décoration. Enfin, les tabous sur l'utilisation des éléments section sont résumés comme suit :
1) Ne pas utiliser l'élément section comme conteneur de page pour définir les styles, 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.
3. La différence entre les deux :

Cela dit, 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 le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal