Analysis of the differences between div, section and article in HTML5

This article mainly introduces the detailed explanation of the differences between p, section and article in HTML5. It is quoted from the W3C's instructions and listed with code examples. Friends in need can refer to it.

When I first started to get in touch with HTML5, it was difficult to understand Its labeling was uncomfortable, even a little off-putting at one point. Especially for the tags div, section, and article, I really don’t know when they should be used.
div

HTML Spec:

The p element has no special meaning at all.

This tag is the one we see and use the most Most tags. It has no semantics per se and is used as a hook for layout and styling or scripting.
section

HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

Contrary to the semantics of div, simply put, section is a div with semantics, but don’t think it is really that simple. A section represents a topical piece of content, usually with a title. Seeing this, we may think that a blog post or a separate comment can just use section? Read on:

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.

When the element contents are aggregated, it makes more sense When referring to an object, article should be used instead of section.

So, when should section be used? Read on:

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

#section Typical scenarios for application are chapters of articles, tabs in tab dialog boxes, or numbered sections in papers. A website's homepage can be divided into sections such as introduction, news, and contact information. In fact, I am very interested in the information conveyed here, because I feel that section and artilce to be introduced below are more suitable for modular applications. This topic will be discussed in a special article in the future, so I will skip it here for now.

Note that W3C also warns:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the p element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline."

section is not just an ordinary container tag. When a tag is just p should be used for styling or scripting purposes. Generally speaking, section is applicable when the element content clearly appears in the document outline.

<article>
    <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup>
    <p>The apple is the pomaceous fruit of the apple tree.</p>
    <section>
        <h1>Red Delicious</h1>
        <p>These bright red apples are the most common found in many supermarkets.</p>
    </section>
    <section>
        <h1>Granny Smith</h1>
        <p>These juicy, green apples make a great filling for apple pies.</p>
    </section>
</article>

article

HTML Spec:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication .

article is a special section tag, which has clearer semantics than section. It represents an independent, complete block of related content. Generally speaking, article will have a title part (usually included in the header (within), and sometimes also contains footer. Although section is also a thematic piece of content, the article itself is independent and complete in terms of structure and content.

HTML Spec continues with Lists some applicable scenarios for article.

This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content .

When an article is embedded in an article, in principle, the content of the inner article is related to the content of the outer article. For example, in a blog post, the article containing user-submitted comments should be hidden within the containing blog post article.

The question is what counts as "complete independent content"? One of the easiest ways to tell is to see if the content is complete in the RSS feed. Check whether the content is complete and independent without its context.

Example:

<article>
    <header>
        <h1>The Very First Rule of Life</h1>
        <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there&#39;s a microphone anywhere near you, assume it&#39;s hot and sending whatever you&#39;re saying to the world. Seriously.</p>
    <p>...</p>
    <footer>
        <a href="?comments=1">Show comments...</a>
    </footer>
</article>
<article>
    <header>
        <h1>The Very First Rule of Life</h1>
        <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there&#39;s a microphone anywhere near you, assume it&#39;s hot and sending whatever you&#39;re saying to the world. Seriously.</p>
    <p>...</p>
    <section>
        <h1>Comments</h1>
        <article>
            <footer>
                <p>Posted by: George Washington</p>
                <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
            </footer>
            <p>Yeah! Especially when talking about your lobbyist friends!</p>
        </article>
          <article>
            <footer>
                <p>Posted by: George Hammond</p>
                <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
            </footer>
            <p>Hey, you have the same first name as me.</p>
        </article>
    </section>
</article>

Summary

p section article, the semantics start from scratch and gradually increase. p has no semantics and is only used as a styling or scripting hook. For a piece of thematic content, section is applicable. If this piece of content can be separated from the context and used as a complete independent piece of content, then Just apply article. In principle, when you can use article, you can also use section, but in fact, if using article is more appropriate, then don’t use section. The same is true for the use of nav and aside. These two tags are also special sections. When using nav and aside is more appropriate, do not use section.

The distinction between p and section, article and other tags is relatively simple. The distinction between section and article is difficult at first glance. In fact, the key point is to see whether this piece of content can exist as a complete and independent content without being separated from the whole. The focus here is on completeness. Because in fact, the content contained in section can also be regarded as an independent piece, but it can only be regarded as part of the whole, and article is a complete whole.

Because actually everyone has their own opinions sometimes, so it is inevitable that there will be times when it is difficult to make a decision. What should you do?

In the HTML5 design principles, there is one specifically designed to solve similar situations:

End user priority (Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” In the event of a conflict, end users come first, followed by authors, then implementers, then standard setters, and finally theoretical perfection.

It is recommended that you read HTML5 design principles several times. This is the ultimate secret behind the complicated world.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About sharing of solutions to enhance browser compatibility of video tags in HTML5

About H5 pushState Usage analysis of replaceState

How to use HTML5 Shiv to solve the problem that IE is not compatible with HTML5 tags

The above is the detailed content of Analysis of the differences between div, section and article in HTML5. For more information, please follow other related articles on the PHP Chinese website!