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 : 23c3de37f2f9ebcb477c4a90aac6fffd et 2f8332c8dcfd5c7dec030a070bf652c3.

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 e388a4556c0f65e1904146cc1a846bee Nous utilisons e388a4556c0f65e1904146cc1a846bee pour diviser les paragraphes, donc à part e388a4556c0f65e1904146cc1a846bee, quand utilisons-nous cet élément. Nous citons la documentation officielle pour l’illustrer. Selon le document WHATWG, l'élément 2f8332c8dcfd5c7dec030a070bf652c3 est décrit comme suit :

"L'élément 2f8332c8dcfd5c7dec030a070bf652c3 représente un paragraphe commun dans un document ou une application - WHATWG"

du description On peut voir que la fonction de l'élément 2f8332c8dcfd5c7dec030a070bf652c3 est de segmenter, plus ou moins similaire à e388a4556c0f65e1904146cc1a846bee. 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 e388a4556c0f65e1904146cc1a846bee. L'élément 2f8332c8dcfd5c7dec030a070bf652c3 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 25edfb22a4f469ecb59f1190150159c6, 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 2f8332c8dcfd5c7dec030a070bf652c3 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 23c3de37f2f9ebcb477c4a90aac6fffd 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 23c3de37f2f9ebcb477c4a90aac6fffd

<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 23c3de37f2f9ebcb477c4a90aac6fffd peut également être combiné avec l'élément section. Si nécessaire, l'élément 2f8332c8dcfd5c7dec030a070bf652c3 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!