section
section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节,或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section,分别代表introduction, news items和contact information。
如果元素的内容集中到一起显示可以表达相应的意思的话,那就可以定义成article元素,而没必要使用section元素。
section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或者script脚本的话,那推荐使用div元素,section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里。
下面的例子代码来自苹果网站页面的一部分,代码里包含了2个短小的section:
Apples
The apple is the pomaceous fruit of the apple tree.
Red Delicious
These bright red apples are the most common found in many supermarkets.
Granny Smith
These juicy, green apples make a great filling for apple pies.
可以看到,在section里可以任意使用h1元素,而不用考虑这个section是顶级的,还是二级或者三级元素。
下面的代码是一个毕业典礼的页面,包含2个section,一个是显示将要毕业人的名单,一个是显示毕业典礼的形式。
<html>
Graduation
Ceremony
Opening Procession
Speech by Validactorian
Speech by Class President
Presentation of Diplomas
Closing Speech by Headmaster
Graduates
article
article代表了一个文档内容的独立片段,例如,博客条目或报纸文章,
article 是一个特殊的section 标签,它比section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说,article 会有标题部分(通常包含在header 内),有时也会 包含footer 。虽然section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。
当article 内嵌article 时,原则上来说,内部的article 的内容是和外层的article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的article 就应该潜逃在包含博客文章article 之中。
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac......
aside
HTML5提供的
根据目前的规范,
n 被包含在
n 在
下面的代码示例综合了以上两种使用方法:
My Blog
My Blog Post
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Glossary
作者 汤姆大叔