Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use the HTML5 semantic tags Section and Article, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Section element

This is one of the most ambiguous elements. It has something to do with

What's the difference between elements? We've been using it.

To divide the paragraphs, so except

When do we use this element? We cite official documents to explain it. According to the WHATWG document, the element is described as follows:

"element represents a common paragraph in a document or application-WHATWG"

We can see from the description that the function of an element is segmentation, which is more or less similar to

. But it still has one special case. In the document, a special statement was added:

"when an element is used only for style or for scripting convenience, authors are encouraged to use the

. The element applies when the contents of the element need to be explicitly listed. -WHATWG "

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

First, although the section element can be styled technically, we recommend using the p element when there are complex styles or scripts.

Second, similar to elements, section elements are used to enumerate content.

So in a real-world example, the reason for using the element is to structurally list the content of the blog, 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, and elements can also be used for other purposes.

Article element

In terms of its name, it is a good interpretation of itself, but we still need to see how it is described in the official documentation:

"in a document, page, application, or a separate part of the site, and generally, it can be assigned independently or reused, for example, at the time of publishing. this can be a forum post, magazine or news, blog entry, user-submitted comments, interactive gadgets or gadgets, or the content of any other independent project."

From the above description, we can conclude that elements are dedicated to structured articles, especially those we want to post, such as blogs, page content, or forum posts.

The following example shows how to use to build a blog post.

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 oatnbon. Gummies halvah gummies danish biscuit applicak cake tootsie roll sesame snaps lollipop gingerbread boe gingerbread jelly-o pastry.

In addition, the element can be combined with the section element, which can be used to divide the article into paragraphs when needed, as shown in the following example.

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.

The above is all the content of the article "how to use HTML5 semantic tags Section and Article". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.