Comment: HTML5 brings a series of new elements, the following two new elements: article and section are quite confusing. We often mention what circumstances we should use these elements. Next, we will introduce the applications of the two. Those who are interested can refer to it.
HTML5 brings 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: <article> and <section>.
The most common 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. What is the difference between it and the <div> element? We have been using <div> to divide paragraphs, so except for <div>, when do we use this element? We cite official documentation to illustrate it. According to the WHATWG documentation, the following description is made for the <section> element:
<section> element represents a common paragraph in a document or application - WHATWG
From the description, we can see that the function of the <section> element is segmentation, more or less similar to <div>. But it still has a special case. In the document, a special statement is added:
When an element is used only for style or for scripting convenience, we encourage authors to use <div>. <section> element is suitable for when the content of the element needs to be explicitly listed. - WHATWG
Based on this point, we can summarize the following two points:
First, although section elements are technically styling, we still recommend using div elements when there are complex styles or scripts.
Second, similar to the <li> element, the section element is used to enumerate content.
So in a realistic example, the reason for using the <section> element is to structure the content of the blog, the code is as follows:
<div>
<section>
<h2>Blog Post Title</h2>
<p>Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section>
<h2>Blog Post Title</h2>
<p>Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section>
<h2>Blog Post Title</h2>
<p>Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
</div>
This is just an example, and the <section> element can also be used for other purposes.
Article elements
From the name, it has already interpreted itself well, but we still have to see how it is described in the official documentation:
A separate section on a document, page, application or site and generally, can be independently allocated or reused, for example at publication. This can be a forum post, magazine or news, blog entries, user-submitted comments, interactive widgets or widgets, or content for any other standalone project.
From the above description, we can summarize that the <article> element is dedicated to 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 using <article>.
<article>
<header>
<h1>This is Blog Post Title</h1>
<div>
<ul>
<li>Author Name</li>
<li>Save in Categories</li>
</ul>
</div>
</header>
<div>
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 apply gingerbread jelly-o pastry.
</div>
</article>
In addition, the <article> element can also be combined with the section element. When needed, you can use the <section> element to divide the article into several paragraphs, as shown in the following example.
<article>
<header>
<h1>This is Blog Post Title</h1>
<div>
<ul>
<li>Author Name</li>
<li>Save in Categories</li>
</ul>
</div>
</header>
<div>
<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 apply 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>
</div>
</article>
Summarize
As predicted by the founder of the World Wide Web and the directors of W3C, all the new elements created by HTML5 are for the purpose of making the network structure more semantic. There is still debate between web developers and designers how to correctly apply these elements.
No matter what, don't confuse the point of view. As I mentioned before, as long as it is a reasonable situation and you see that using it makes the structure meaningful, please use it.