Detailed explanation of HTML5 semantic markup Section and Article examples

Webpage production cnn6 article introduction: The most frequently asked question is: Under what circumstances should we use these elements? And how should we use these elements correctly?

HTML5 brings a series of new elements and will be widely used in the future. However, there are some elements that can be confusing to use, including two new elements: 23c3de37f2f9ebcb477c4a90aac6fffd and 2f8332c8dcfd5c7dec030a070bf652c3.

The most commonly asked question is: under what circumstances should we use these elements? And how should we use these elements correctly?

Section element

This is the most ambiguous element. How is it different from the e388a4556c0f65e1904146cc1a846bee element? We have been using e388a4556c0f65e1904146cc1a846bee to divide paragraphs, so besides e388a4556c0f65e1904146cc1a846bee, when do we use this element. We quote the official documentation to illustrate it. According to the WHATWG documentation, the 2f8332c8dcfd5c7dec030a070bf652c3 element is described as follows:

"The 2f8332c8dcfd5c7dec030a070bf652c3 element represents a common paragraph in a document or application - WHATWG"

From the description We can see that the function of the 2f8332c8dcfd5c7dec030a070bf652c3 element is to segment, more or less similar to e388a4556c0f65e1904146cc1a846bee. But it still has a special case. In the document, a special statement was added:

"When an element is used solely for style or for script convenience, authors are encouraged to use e388a4556c0f65e1904146cc1a846bee. The 2f8332c8dcfd5c7dec030a070bf652c3 element applies when When the content of an element needs to be explicitly listed. - WHATWG”

Based on this, we can summarize the following two points:

First, although the section element can technically be styled , but we still recommend using the p element when there are complex styles or scripts.

Second, similar to the 25edfb22a4f469ecb59f1190150159c6 element, the section element is used to list content.

So in a real example, the reason for using the 2f8332c8dcfd5c7dec030a070bf652c3 element is to structure the content of the blog. The code is as follows:

<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>

This is just an example, the 2f8332c8dcfd5c7dec030a070bf652c3 element Can also be used for other purposes.

Article element

From the name, it has already explained itself well, but we still have to look at how the official document describes it:

"In A document, page, application or section of a site that is, in general, independently redistributable or reusable, for example in a forum post, a magazine or news article, a blog entry, or a user submission. Comments, interactive widgets or widgets, or any other stand-alone item of content.”

From the above description, we can conclude that the 23c3de37f2f9ebcb477c4a90aac6fffd element is dedicated to structured articles, especially what we want. Published, such as blog, page content or forum posts.

The following example shows how to use 23c3de37f2f9ebcb477c4a90aac6fffd to build a blog article.

<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>

In addition, the 23c3de37f2f9ebcb477c4a90aac6fffd element can also be combined with the section element. When necessary, the 2f8332c8dcfd5c7dec030a070bf652c3 element can be used to divide the article into several paragraphs, as shown in the following example.

<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>

Summary

As predicted by the founders of the World Wide Web and the directors of the W3C, all the new elements created by HTML5 are intended to make the web structure more semantic. The correct application of these elements is still a matter of debate among web developers and designers.

In any case, don’t mix up the ideas. As I mentioned before, if it makes sense and you see the structure making sense using it, then use it.

The above is the detailed content of Detailed explanation of HTML5 semantic markup Section and Article examples. For more information, please follow other related articles on the PHP Chinese website!