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

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

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

w3schools上的定义:

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

延伸:

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

Bruce Lawson的规则总结:

如果你仅仅是需要一个标签来设置他的样式和javascript控制点,那么你需要的是div标签而不是section

如果article,aside或则nav用起来更适合你的需要请不要使用section

除非section元素很自然的含有一个heading,不然你都不要使用它

 

如果元素的内容集中到一起显示可以表达相应的意思的话,在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 id="swag">
<section id="free-stickers" class="swag">
<div>
<h3>Free Stickers!</h3>
<p>Send a Self-Addressed, Stamped Envelope and we'll send you three cool HTML5 stickers&mdash;just like that, free! Envelopes must be received by July 15, 2011.</p>
<img src="img/html5-stickers.png" alt="HTML5 Stickers" title="HTML5 Stickers" id="sticker-image" width="220" height="184">
<address>
HTML5 Sticker<br>
PO Box 615<br>
Belmont, CA 94002-0615
</address>
<p>Please send a No. 10 business envelope to accommodate all three stickers, see below for more details and international shipping.</p>
<footer> Make sure to include enough postage to return a sticker pack via U.S. mail. It's less than one ounce, so a standard $0.44 stamp will do if you're in the United States; enclose an international reply coupon (IRC) if you're outside of the U.S. And be sure to send your envelope in soon -- one per person please.<br/>
Your contact information won't be maintained in any way. Void where prohibited and only while supplies last. We just want to send you stickers. </footer>
</div>
</section>
<section id="apparel" class="swag">
<div>
<h3>WEAR IT NOW FOR THE FUTURE</h3>
<p>A number of people are taking the HTML5 logo and emblazoning everything from t-shirts to pajamas. Here's a peek:</p>
<a href="http://html5shirt.com" id="shirt-link"><img src="img/html5-shirts.png" alt="HTML5 T-Shirts" title="HTML5 T-SHIRTS" id="shirt-image" width="443" height="214"></a>
<h3><a href="http://html5shirt.com">THE HTML5 SHIRT &mdash; BUY IT!</a></h3>
<p>Every Man, Woman and Child can show their HTML5 Pride! A portion of every sale is donated to the development of the <a href="http://www.w3.org/html/wiki/Testing">W3C HTML5 Test Suite</a>.</p>
</div>
</section>
</section>

代码三:独立的section元素使用,标题内容块复杂例子(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/

posted @ 2012-03-07 15:25 红草帽 阅读(...) 评论(...) 编辑 收藏