Explication détaillée des exemples de sections et d'articles de balisage sémantique HTML5

网页制作cnn6文章简介：最常被问起的问题是：在什么情况下我们应该使用这些元素？以及我们应该如何正确的使用这些元素？

HTML5 apporte une série de nouveaux éléments et sera largement utilisé dans le futur. Cependant, certains éléments peuvent prêter à confusion à utiliser, notamment deux nouveaux éléments :

et

.

La question la plus fréquemment posée est : dans quelles circonstances doit-on utiliser ces éléments ? Et comment utiliser correctement ces éléments ?

Élément de section

C'est l'élément le plus ambigu. En quoi est-il différent de l'élément

Nous utilisons

pour diviser les paragraphes, donc à part

, quand utilisons-nous cet élément. Nous citons la documentation officielle pour l’illustrer. Selon le document WHATWG, l'élément

est décrit comme suit :

"L'élément

représente un paragraphe commun dans un document ou une application - WHATWG"

du description On peut voir que la fonction de l'élément

est de segmenter, plus ou moins similaire à

. Mais il y a quand même un cas particulier. Dans le document, une déclaration spéciale a été ajoutée :

"Lorsqu'un élément est utilisé uniquement pour des raisons de style ou de commodité de script, nous encourageons les auteurs à utiliser

. L'élément

s'applique lorsque lorsque le contenu d'un élément doit être explicitement répertorié. - WHATWG"

Sur cette base, nous pouvons résumer les deux points suivants :

Premièrement, bien que l'élément section puisse techniquement être stylisé, mais nous le faisons quand même. recommandons d'utiliser l'élément p lorsqu'il existe des styles ou des scripts complexes.

Deuxièmement, similaire à l'élément

, l'élément section est utilisé pour répertorier le contenu.

Donc, dans un exemple réel, la raison de l'utilisation de l'élément

est de structurer le contenu du blog. Le code est le suivant :

<p class="blog">  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
</p>

Ceci est juste un. exemple,

Élément d'article

D'après le nom, il s'est déjà bien expliqué, mais il faut encore regarder comment le document officiel le décrit :

" dans Un document, page, application ou section d'un site qui est, en général, redistribuable ou réutilisable de manière indépendante, par exemple dans un message de forum, un magazine ou un article d'actualité, une entrée de blog ou des commentaires d'utilisateur, des widgets interactifs ou tout autre support. seul élément de contenu. »

De la description ci-dessus, nous pouvons conclure que l'élément

est dédié aux articles structurés, surtout si nous le souhaitons, comme le contenu d'un blog, d'une page ou d'un forum. .

L'exemple suivant montre comment utiliser

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oatnbon. Gummies   
        halvah gummies danish biscuit applicak   
        cake tootsie roll sesame snaps lollipop gingerbread boe gingerbread jelly-o pastry.  
    </p>  

</article>

De plus, l'élément

peut également être combiné avec l'élément section. Si nécessaire, l'élément

l'exemple ci-dessous.

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        <section>  
        <h2>This is the Sub-Heading</h2>  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake   
        tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah   
        gummies danish biscuit applicake gingerbread jelly-o pastry.  
        </section>  

        <section>  
        <h3>This is another Sub-Heading</h3>  
        Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops  
        toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate  
        cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.   
        Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. 
        Powder croissant jelly beans pastry.  
        </section>  
    </p>  

</article>

Résumé

Comme le prédisaient les fondateurs du World Wide Web et les directeurs du W3C, tous les nouveaux éléments créés par HTML5 visent à rendre la structure du Web plus sémantique. L’application correcte de ces éléments fait encore l’objet de débats parmi les développeurs et concepteurs Web.

En tout cas, ne mélangez pas les idées. Comme je l'ai mentionné précédemment, si cela a du sens et que vous voyez que la structure a du sens en l'utilisant, utilisez-la.

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!