Article and section elements in html5

Article and section elements in html5

HTML5 brings out a series of new elements and will be widely used in the future. However, some elements are easy to confuse when used, including the following two new elements:And

.

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

Article Element

From the name, it has interpreted itself well, but we still need to see how it is described in the official documentation:

"An independent part of a document, page, application, or site can be allocated independently or used repeatedly, for example, during release. This can be Forum posts, magazines, news, blog entries, comments submitted by users, interactive gadgets or gadgets, or any other independent project content ."

From the above description, we can summarize the elements used for structured articles, especially those we want to publish, such as blogs, page content or forum posts.

The following example shows how to build a blog post. Well-developed 5-year UI front-end framework!

. Code

3. This is Blog Post Title
5. • Author Name
   • Save in Categories
10. Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
11. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
12. Cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
13. Halvah gummies danish biscuit applicake gingerbread jelly-o pastry.

16. In addition, the element can be combined with the section element and can be used when necessary.

    The article is divided into several paragraphs, as shown in the following example. Well-developed 5-year UI front-end framework!
    . Code
    3. This is Blog Post Title
    5. • Author Name
       • Save in Categories
    11. This is the Sub-Heading
    12. Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
    13. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
    14. Tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
    15. Gummies danish biscuit applicake gingerbread jelly-o pastry.
    19. This is another Sub-Heading
    20. Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
    21. Toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
    22. Cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
    23. Cheesecake gummi bears drag é e jujubes drag é e brownie jelly biscuit. Powder croissant jelly beans pastry.

    27. Section Element

        This is the most ambiguous element. What is the difference between it and elements? We have been used to divide paragraphs, So when should we use this element after division. We will refer to the official document to describe it. According to the WHATWG document

        The element is described as follows:

        "

        The element represents a general section in a document or application-WHATWG "carefully developed the UI front-end framework for 5 years!

        From the description, we can see that

        The function of an element is segmentation, which is more or less similar to that of an element. However, it still has a special case. In this document, a special statement is added:

        "When an element is used only for style styles or for script convenience, we encourage the author to use it.

        The element applies when the content of the element needs to be explicitly listed. -WHATWG"

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

        1. Although section elements can be designed technically, we recommend that you use div elements when there are complex styles or scripts.

        2. Similar

        3. The section element is used to list the content.

           Therefore, in actual examples

           The reason for the element is to list the Blog content in a structured manner. The Code is as follows:
           . Code
           3. Blog Post Title

           4. Ice cream tart powder jelly-o.

           5. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

           8. Blog Post Title

           9. Ice cream tart powder jelly-o.

           10. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

           13. Blog Post Title

           14. Ice cream tart powder jelly-o.

           15. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

           17. This is just an example,

               Element can also be used for other purposes.
               Summary

               As predicted by the authors of the world wide and W3C directors, all the new elements created by HTML5 are designed to make the network structure more semantic. There is still a debate between network developers and designers on how to correctly apply these elements. Well-developed 5-year UI front-end framework!

               In any case, do not confuse the viewpoint. As I mentioned earlier, as long as it is a reasonable situation and you see that using it makes the structure significant, please use it.