Differences and usage introduction of div, article and section in HTML5_html5 tutorial skills

I am learning html5 recently. I am new to html5 and I feel a little uncomfortable because some tags have changed, especially the three tags div and section article. I checked some information and tried to use html5 and css3 to layout the web page. I have a little idea. , and below is a simple web page that I just laid out for your reference. Take a look at it first, and at least have some idea of ​​the structure of html5.

div

HTML Spec: “The div element has no special meaning at all.”

This tag is the one we see and use the most of a label. 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 relevant, article should be used to replace section.

So, when should section be used? Then look at:

“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.”

Typical application scenarios include chapters of articles, tabs in tag dialog boxes, or numbered sections in papers. The homepage of a website 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 the 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 div 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 more than just an ordinary container tag. When a tag is just for styling or to facilitate scripting, div should be used. Generally speaking, a section is appropriate when the element's content appears explicitly in the document outline.


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, and represents an independent and complete block of related content. Generally, an article will have a title section (usually contained within the header) and sometimes a footer. Although a section is also a thematic piece of content, the article itself is independent and complete in terms of structure and content.

The HTML Spec then 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 article is embedded in 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:

html page:

Copy codeThe code is as follows:

• 首题


• 
  
• 服务


• information


• 联系

HTML5 CSS3 webpage

The pain itself is important, the coaching elitVivamus will be pursued and it was targeted. Maecenas hates that ferment. The class is suitable for the silent partners who turn to the shores through our marriages, through the Hymenaean projects. Fusce sagittis porta mauris, it is important to put fear into the arrows of the law enforcement. But the members of the medical staff need pain relief. Until the time of the pulvinar. But it's a bad idea, and it's been said. I'm afraid of the boat, it's important to be pregnant, it's a big drink. We live and now we are talking. The customer is very important, the customer will be followed by the customer. In someone just a little bit. The members of the ultricies are responsible for the results. Jasmine sauce my eros. The home will be followed by real estate vehicles. It was cold or mass.

A demonstration of list items

• 
  
• 
  
• 
  
• 
  
• 
  

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   

< p> In such a way that the author just The Bureau is as complete as ever. Aenean vulputate interdum ague, sed dapibus mi ultricies convallis. Chat from now on, and decorate it if you don't. To always invest the layer. tomorrow eu nibh lorem But it is important to care about the life of the medical staff and hate it. He is not a rich man and he is very easy to eleifend. Maecenas wants football to be fun and not to be targeted. It's completely soft, that's why it's flattering. Everyone is expected to take care of the property. Children's life of children's grief. The customer is very important, the customer will be followed by the customer. But the course of the campaign to be the valley of the ullamcorper. Until life is big, there is no swimming pool, or even a backyard. In the case of Morbidity, it is important to take care of the ulcer, and not the fever itself, nor the course of the bed. Until he doesn't even get into the salad. If it's not ugly, who's going to take up a career in life now.

© Copyright Dave Woods 2009

css page:

copy the code

@charset "utf-8";
/* CSS Document */
#container{
width: 840px;
margin: 20px auto;
background:#fff;
padding:30px;
overflow:hidden;
}
/*--------------- header ----------------*/
#main-navigation{
border-bottom:5px solid #666;
}
#main-navigation ul{
overflow:hidden;
width:100%;
list-style:none;
font-size:1.6em;
}
#main-navigation li{
float:left;
}
#main-navigation li a{
background:#999;
margin: 0 5px 0 0;
padding:5px 30px;
display:block;
color:#fff;
text-decoration:none;
}
#main-navigation li.current a{
background:#666;
}
#main-navigation li a:hover{
background:#777;
}
/*-------------------------- article ------------------------*/
article{
width:100%;
overflow:hidden;
}
section{
float:left;
width:500px;
}
/*-------------------------- article ------------------------*/
aside{
float:right;
width:310px;
}
/*-------------------------- article ------------------------*/
footer{
width:840px;
margin:20px auto;
font-size:1.4em;
text-align:center;
}

总结：
div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体。

最后附上我的首个html5页面源码：http://xiazai.jb51.net/201308/yuanma/demoh5_jb51.net.rar