HTML5页面架构元素 - <section>标签

在HTML5中的<section>标签在所有页面结构中应该是一个比较受到关注的标签。

通过定义探索<section>标签的用法

w3schools上的定义：


延伸：

section元素代表一个页面或则一个内容块的部分，一般作为主题块列表。通常情况下它会带有一个标题和一个内容块。



如果元素的内容集中到一起显示可以表达相应的意思的话，在W3C鼓励使用article元素，而不是section元素。

通过代码探索<section>标签的用法

代码一：section元素在article中的应用，标题+内容块简单应用。来自W3C例子（http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element ）

<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>

代码二：section元素单独使用和嵌套使用，标题加内容块复杂体现。来自W3C的HTML5网站（http://www.w3.org/html/logo/）

View Code
总结：

<section>标签可以理解为一个带语义的div标签，精简版的article标签，它通常带有一个标题和一个内容块。它不会单独为方便设置样式和编写js而生，而为自己的语义和自身内容结构而生。

参考网址：

http://www.w3school.com.cn/html5/tag_section.asp

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

http://www.w3.org/html/logo/