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

This article mainly introduces "what is the difference between div and section and article in HTML5". In daily operation, I believe many people have doubts about the difference between div and section and article in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "what is the difference between div and section and article in HTML5?" Next, please follow the editor to study!

HTML specification:

The div element has no special meaning at all.

This tag is the one we see most and use the most. It does not have any semantics and is used as a hook for layout and styling or scripting. Part

HTML specification: "the section element represents a common part of a document or application. In this case, a section is a topic grouping of content, usually with a title."

In contrast to the non-semantic nature of div, section is simply div with semantics, but don't think it's that simple. Section represents a paragraph of thematic content, usually with a title. See here, we may think, so the article blog article, or a single comment is just right to use section? Then look at:

When encouraging authors to federate the content of elements, use the article element instead of the section element.

When the content of the element is aggregated to make more sense, you should replace the section with an article.

So, when should section be used? Let's move on to:

Examples of sections include chapters, tabbed pages in tabbed dialogs, or numbered sections of papers. The home page of a website can be divided into several sections for introduction, news and contact information.

Typical scenarios for some applications are the chapter of the article, the tab in the middle of the chapter and tag, or the numbered part of the paper. The home page of a website can exchange profiles, news and contact information. In fact, I am interested in conveying the message here, because I feel that the section and the artilce to be introduced below are more suitable for alternative applications, which will be discussed in a special article in the future, which will be skipped here for the time being.

Note that the W3C also warns:

The section element is not a generic container element. If you need an element for styling purposes or for ease of scripting, authors are encouraged to use div elements instead. The general rule is that the section element applies only if the content of the element is explicitly listed in the outline of the document. "

In general, section is applicable when the content of the element appears explicitly in the document outline.

XML / HTML code copies content to text

Apple

Delicious fruit!

Apples are the pear fruits of apple trees.

Red delicious

These bright red apples are most commonly found in many supermarkets.

Granny Smith

These juicy, green apples make apple pie a great filling.

Article

HTML specification:

Article elements represent independent components of a document, page, application, or site and can in principle be distributed or reused independently, such as in a federated organization.

In general, an article has a title section (usually included in the header) and sometimes a footer. Although the part is also a part of the theme, the article itself is independent and complete in terms of structure and content.

The HTML Spec then lists some of the scenarios where the article applies.

This could be forum posts, magazine or newspaper articles, blog entries, user-submitted comments, interactive widgets or gadgets, or any other independent content.

When the article is embedded in the article, in principle, the content of the internal article is related to the content of the outer article. For example, in a blog post, an article that contains comments submitted by the user should be absconded in the post containing the blog post.

The question is how to count as "complete independent content"? The easiest way to judge is to see if the content is complete in RSS feed. See whether this paragraph is complete and independent without the context in which it is located.

Example:

XML / HTML code copies content to text

The first rule of life

If you have a microphone nearby, assume it's hot and send what you have to say to the world. Seriously.

...

Show comments.

The first rule of life

If you have a microphone nearby, assume it's hot and send what you have to say to the world. Seriously.

...

Comment

Published by: George Washington

Wow! Especially when talking about your lobbyist friends!

Published by: George Hammond

Hey, you have the same name as me.

At this point, the study on "what is the difference between div and section and article in HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.