这几天捣鼓CSSPod的主题，顺便边学习边尝试试用HTML 5。在HTML 5引入的新元素中，显然<section>是比较难以理解的一个，至少对我来说是这样的，致使我使用<section>时诚惶诚恐，在查阅资料时看到了这篇文章，顺手翻译了一下，兴许能帮助初接触HTML 5的朋友解除一些疑惑。我的英文水平实在一般，个别地方只是按照我的理解来翻译，错误之处，望不吝赐教。

以下是原文及翻译：

HTML 5 introduces new elements like <section>, <article> and <footer> for structuring the content in your webpages. They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source. But if you just go through your document and blindly replace all the <div>s with <section>s you are doing it wrong.

HTML 5引进了诸如<section>、<article>、<footer>等新元素用来组织网页中的内容。它们可以用在当前使用<div>的许多情境中，以助提高HTML源代码的可读性、可维护性。但是如果只是盲目地用<section>替换掉网页中的<div>，那就错了。

This is not just semantic nit-picking, there is a practical reason to use these elements correctly.

这不只是挑剔其语义，有实际的理由去正确地使用这些元素。

In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free). So a document like the following:

HTML 5中有一个构造文档大纲的算法，可以被诸如AT（不知何意，屏幕阅读器一类？）用来帮助用户通览文档。<section>及其他的新元素是这个算法的重要组成部分。每嵌套一个<section>，大纲的深度就增加一级（如果你想把这种模型的优势和传统的<h1>-<h6>模型比较，想象一下一个基于Web的Feed阅读器通过组合在一起的内容整合网站的页面结构，在HTML 4中，这意味要解析所有的内容并重新把所有的标题重新编号；HTML 5则可以在恰当的文档层级结束标题。）比如下面这样的页面：

<body>
  <h1>This is the main header</h1>
  <section>
    <h1>This is a subheader</h1>
    <section>
      <h1>This is a subsubheader</h1>
    </section>
  </section>
  <section>
    <h1>This is a second subheader</h1>
  </section>
</body>

has an outline like:

有一个类似下面的大纲：

This is the main header
+--This is a subheader
+--This is a subsubheader
+--This is a second subheader

If you just blindly convert all the <div>s on your pages to <sections> it's pretty unlikely your page will have the outline you expected. And, apart from being a semantic faux-pas, this will confuse the hell out of people who rely on headings for navigation.

如果只是盲目地把所有的<div>换成<section>,你的页面不太可能解析成想要的大纲,而且不当的语义化嵌套，会让依赖标题导航的用户困惑。

Hopefully, in time, we will get tools that make this kind of mistake obvious and CSS support for selecting headings based on depth. Until then remember <section> is not just a semantic <div>

希望假以时日，我们会有避免这类错误的工具，并让CSS支持选择基于页面层级的标题。在此之前，请记住，<section>不仅仅是语义化的<div>。