HTML5 brings out a series of new elements. The following two new elements are confusing: article and section. We often mention under what conditions we should use these elements. Next we will introduce the application of the two elements, for more information, see
HTML5 brings out a series of new elements and will be widely used in the future. However, some elements are easily confused when used, including the following two new elements: .
The most frequently asked question is: under what circumstances should we use these elements? And how should we correctly use these elements?
Section Element
This is the most ambiguous element. It corresponds
What are the differences between elements? We have been using
To divide paragraphs.
When can we use this element. 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"
From the description, we can see that The function of an element is segmentation, which is more or less similar
. 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::
First, although section elements can be designed technically, we recommend that you use the p element when there are complex styles or scripts.
Second, similar
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:
The Code is as follows:
Blog Post Title
Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.
Blog Post Title
Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.
Blog Post Title
Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.
This is just an example, Element can also be used for other purposes.
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.
The Code is as follows:
This is Blog Post Title
- Author Name
- Save in Categories
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.
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.
The Code is as follows:
This is Blog Post Title
- Author Name
- Save in Categories
This is the Sub-Heading
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.
This is another Sub-Heading
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 brownie jelly biscuit. Powder croissant jelly beans pastry.
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.
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. 
