Detailed introduction to the difference between HTML5 article and section

Content block refers to a unit that logically divides an HTML page. For page websites, each part such as the navigation menu, article text, and article comments can be called a content block.
Article element
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>标题</h1>           
<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>　　
</header>
　　<p>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 is in In principle, it needs to be related to the outer content. 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>article元素使用方法</h1>
　　　　<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
　　</header>

　　<p>此标签里显示的是article整个文章的主要内容，，下面的section元素里是对该文章的评论</p>
      
　　<section>
            <h2>评论</h2>
　　　　<article>
                  <header>
　　　　　　　　<h3>发表者：maizi</h3>
　　　　　　　　<p><time pubdate datetime="2016-6-14">1小时前</time></p>
　　　　　　</header>  
　　　　　　<p>这篇文章很不错啊，顶一下！</p>
           </article> 
　　　　<article>
                  <header>            
　　　　　　　　<h3>发表者：小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>
　　　　　　</header>
　　　　<p>这篇文章很不错啊，对article解释的很详细</p>  
　　　　</article>
      </section>
</article>

The sample content is divided into several parts. The article title is placed in the header element, and the article text is placed in In the p element after the header element, the section element distinguishes the text from the comments (it is a blocking element used to distinguish the content on the page). The content of the comment is embedded in the section element. Each element in the comment Human comments are relatively independent and complete, so they all use an article element. The article element of the comment can be divided into title and comment content parts, which are 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 section element is used to divide the content on the page into sections, or Speaking of dividing 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 without titles.

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

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

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

　<section>
　　　　<h1>section元素的</h1>标题
　　　　<p>section区块的主题部分</p>
　　</section>

In HTML5, you can combine the subordinate parts of all pages, such as navigation bars, menus, copyright notices, etc., into a unified in the page so that CSS styles can be used uniformly for decoration. Finally, the taboos on using the section element are summarized as follows:
1) Do not use the section element as a page container for setting styles, that is the job of the p element.
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.
3. The difference between the two:
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 detailed content of Detailed introduction to the difference between HTML5 article and section. For more information, please follow other related articles on the PHP Chinese website!