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

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

总结：

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