Understanding and use of Article and Section elements in HTML5

CommentsHTML5 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 confusing 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?

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"

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::
First, although section elements can be designed technically, we recommend that you use div elements when there are complex styles or scripts.
Second, 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:

The Code is as follows:
<Div class = "blog">
<Section class = "post">
<H2 class = "post-title"> Blog Post Title <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 <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 <P class = "post-excerpt"> Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. </p>
</Section>
</Div>

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

The Code is as follows:
<Article class = "post">
<Header>
<H1> This is Blog Post Title <Div class = "post-meta">
<Ul>
<Li class = "author"> Author Name </li>
<Li class = "categories"> Save in Categories </li>
</Ul>
</Div>
</Header>
<Div class = "post-content">
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.
</Div>
</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.

The Code is as follows:
<Article class = "post">
<Header>
<H1> This is Blog Post Title <Div class = "post-meta">
<Ul>
<Li class = "author"> Author Name </li>
<Li class = "categories"> Save in Categories </li>
</Ul>
</Div>
</Header>
<Div class = "post-content">
<Section>
<H2> 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.
</Section>
<Section>
<H3> 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.
</Section>
</Div>
</Article>

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.