An in-depth analysis of the difference between article and section in HTML5

Content blocks refer to units that logically divide HTML pages. For page websites, each part such as the navigation menu, article text, and article comments can be called a content block.

The article element represents independent, complete content in a document, page, or application that can be independently referenced externally. It can be a blog or newspaper article, a forum post, a user comment or a stand-alone plug-in, or any other stand-alone content. In addition to the content, an article element usually has its own title (usually placed inside a header element) and sometimes its own footnotes.

 <article> <header> <h1>Title</h1> <p>Published date: <time pubdate=pubdate>2010/10/10</time></p> </header> <p>How to use article </p> <footer> <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p> </footer> </article>

Note: Article elements can be nested, and the inner content needs to be associated with the outer content in principle. For example, in a blog post, comments on the article can be nested using article elements; the article element used to present the comments is included in the article element that represents the overall content.

The nested code is as follows:

 <article> <header> <h1>How to use the article element</h1> <p>Publication date: <time pubdate=pubdate>2010/10/10</time></p> </header> <p>This The tag displays the main content of the entire article, and the section element below contains the comments on the article</p> <section> <h2>Comments</h2> <article> <header> <h3>Published by: maizi</h3> <p><time pubdate datetime=2016-6-14>1 hour ago</time></p> </header> <p>This article is very good, Give it a thumbs up! </p> </article> <article> <header> <h3>Published by: Xiaoni</h3> <p><time pubdate datetime=2016-6-14T:21-26:00>1 hour ago< /time></p> </header> <p>This article is very good, it explains the article in detail</p> </article> </section></article>

The sample content is divided into several parts. The article title is placed in the header element, the article text is placed in the p element after the header element, and then the section element distinguishes the text from the comments (it is a blocking element used to divide the content on the page), in section The content of the comment is embedded in the element. Each person's comment in the comment is relatively independent and complete, so an article element is used for them all. The article element of the comment can be divided into titles and comments. The content part is placed in the header element and p element respectively.

1. The section element is used to divide the content on the page in the website or application. The function of the section element is to divide the content on the page into sections, or to divide the article into sections;

2. A section element usually consists of content and its title. It is generally not recommended to use the section element for content that does not have a heading.

3. The section element is not an ordinary container element; when a content needs to be styled directly or behavior defined through a script, it is recommended to use p instead of the section element;

4. If the article, nav, and aside elements all meet certain conditions, then do not use the section element to define them;

5. The content in the section element can be stored separately in the database or output to a word document.

 <section> <h1>The </h1> title of the section element <p>The topic part of the section block</p> </section>

In HTML5, you can include all subordinate parts of the page, such as navigation bars, menus, copyright notices, etc., into a unified page so that they can be decorated using CSS styles. Finally, the taboos on using the section element are summarized as follows:

1) Don't use the section element as a styled page container, that's the p element's job.

2) If the article element, aside element or nav element is more suitable for use, do not use the section element.

3) Do not use the section element for content blocks without titles.

So much has been said above, what is the difference between the two? In fact, in HTML5, the article element can be regarded as a special type of section element, which emphasizes independence more than the section element. That is, the section element emphasizes segmentation or chunking, while article emphasizes independence. Specifically, if a piece of content is relatively independent and complete, you should use the article element, but if you want to divide a piece of content into several paragraphs, you should use the section element. In addition, in HTML5, the p element becomes a container. When using CSS styles, an overall CSS style can be applied to this container.

The above is the difference between article and section in HTML5 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!