The article and section elements in html5.

The 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:<Article>And<Section>.

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 <article> 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 use <article> to build a blog post. Well-developed 5-year UI front-end framework!

. Code

1. <Article class = "post">
2. <Header>
3. <H1> This is Blog Post Title
4. <Div class = "post-meta">
5. <Ul>
6. <Li class = "author"> Author Name </li>
7. <Li class = "categories"> Save in Categories </li>
8. </Ul>
9. </Div>
10. </Header>
12. <Div class = "post-content">
13. Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
14. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
15. Cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
16. Halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
17. </Div>
19. </Article>

 

In addition, the <article> element can be combined with the section element. When necessary, you can use the <section> element to divide the article into several paragraphs, as shown in the following example. Well-developed 5-year UI front-end framework!

. Code

1. <Article class = "post">
2. <Header>
3. <H1> This is Blog Post Title
4. <Div class = "post-meta">
5. <Ul>
6. <Li class = "author"> Author Name </li>
7. <Li class = "categories"> Save in Categories </li>
8. </Ul>
9. </Div>
10. </Header>
12. <Div class = "post-content">
13. <Section>
14. <H2> This is the Sub-Heading
15. Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
16. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
17. Tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
18. Gummies danish biscuit applicake gingerbread jelly-o pastry.
19. </Section>
21. <Section>
22. <H3> This is another Sub-Heading
23. Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
24. Toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
25. Cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
26. Cheesecake gummi bears drag é e jujubes drag é e brownie jelly biscuit. Powder croissant jelly beans pastry.
27. </Section>
28. </Div>
30. </Article>

 

Section Element

This is the most ambiguous element. What is the difference between it and <div> elements? We have been using <div> to divide paragraphs, so after <div>, when should we use this element. We will refer to the official document to describe it. According to the WHATWG document, the <section> elements are described as follows:

The <section> element represents a general section in a document or application-WHATWG. The UI front-end framework has been developed for 5 years!

From the description, we can see that the <section> element is used for segmentation, more or less similar to <div>. 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 <div>. <Section> 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 to the <li> element, the section element is used to list content.

The reason for using the <section> element is to list the Blog content in a structured manner. The Code is as follows:

. Code

1. <Div class = "blog">
2. <Section class = "post">
3. <H2 class = "post-title"> Blog Post Title
4. <P class = "post-excerpt"> Ice cream tart powder jelly-o.
5. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. </p>
6. </Section>
7. <Section class = "post">
8. <H2 class = "post-title"> Blog Post Title
9. <P class = "post-excerpt"> Ice cream tart powder jelly-o.
10. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. </p>
11. </Section>
12. <Section class = "post">
13. <H2 class = "post-title"> Blog Post Title
14. <P class = "post-excerpt"> Ice cream tart powder jelly-o.
15. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. </p>
16. </Section>
17. </Div>

 

This is just an example. The <section> 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.

In html5, how does aside understand the difference between article and section?

The newly added tags of html5 are all semantic, not only literally, but also in the example.
Article is an independent piece of content, such as a news or article. It contains the subject and auxiliary content.

Section is similar to div, but it is more meaningful than div. It is a part of the content.
Aside is literally a sidebar with reference and content related to the content.
These elements are expressed in rows and must be declared as blocks when used.

Html5 new tag elements such as:

The newly added header and footer labels are mainly used to represent the DOM semantics.
No special style
Before HTML5, both header, body, and footer must be expressed using div.
The new HTML5 labels can be expressed directly using clear labels such as header, article, and footer to make the structure of the document clearer, in the previous design, div and the property id = "container" were required. Now we can use a label similar to article to express it. It is just more convenient to act on DIV.