结构

article 元素

article 元素代表文档、页面或应用程序中独立的、完整的、可以独立被外部引用的内容。它可以时一篇博客或者报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容

除了内容部分，一个 ateicle 元素通常有它自己的标题(一般放在一个 header 元素里面)，有时还有自己的脚注

<!DOCTYPE html>
<meta charset="UTF-8">
<title>苹果</title>
<article>
  <header>
    <h1>苹果</h1>
    <p>发表日期：<time pubdate="pubdate">2010/10/09</time></p>
  </header>
  <p><b>苹果</b>，植物类水果，多次花果...("苹果"文章正文)</p>
  <footer>
    <p><small>著作权归***公司所有</small></p>
  </footer>
</article>

article 元素时可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套 article 元素的方式；用来呈现评论的 article 元素被包含在表示整体内容的 article 元素里面

<!DOCTYPE html>
<meta charset="UTF-8">
<article>
  <header>
    <h1>苹果</h1>
    <p>发表日期：<time pubdate="pubdate">2010/10/09</time></p>
  </header>
  <p><b>苹果</b>，植物类水果，多次花果...("苹果"文章正文)</p>
  <section>
    <h2>评论</h2>
    <article>
      <header>
        <h3>发表者：xxx</h3>
        <p>
          <time pubdate datetime="2010-10-10T19:10-08:00">1小时前</time>
        </p>
      </header>
      <p>我喜欢苹果，我最喜爱的品种时红富士。</p>
    </article>
    <article>
      <header>
        <h3>发表者：hhh</h3>
        <p>
          <time pubdate datetime="2010-10-10T19:10-08:00">1小时前</time>
        </p>
      </header>
      <p>🍎我不喜欢，我喜欢吃🍊</p>
    </article>
  </section>
</article>

section 元素

section 元素用来对网站或应用程序中页面上的内容进行分块，一个 section 元素通常由内容及其标题组成。但 section 元素并非一个普通的容器元素；当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用 div 元素而非 section

我们可以这样理解：section 元素中的内容可以单独存储到数据库中或输出到 word 文档中

<!DOCTYPE html>
<meta charset="UTF-8">
<section>
  <h1>苹果</h1>
  <p><b>苹果</b>，植物类水果，多次花果。。。("苹果"文章正文)</p>
</section>

通常不推荐使用那些没有标题的内容使用 section

section 元素的作用是对页面上的内容进行分块，或者说对文章进行分段，不要将它与表示“有着自己的完整的、独立的内容”的article 元素混淆

<!DOCTYPE html>
<meta charset="UTF-8">
<article>
  <h1>苹果</h1>
  <p><b>苹果</b>，植物类水果，多次花果。。。("苹果"文章正文)</p>
  <section>
    <h2>红富士</h2>
    <p>红富士是从普通富士的芽(枝)变中选育出的着色系富的统称。。。</p>
  </section>
  <section>
    <h2>国光</h2>
    <p>国光苹果品，又名小国光、万寿。原产美国，1600 年发现的偶然实生苗。。。</p>
  </section>
</article>

这是一段独立的、完整的内容，因此使用 article 元素。该内容是一篇关于苹果的文章，该文章分为 3 段，每一段都有一个独立的标题，因此使用了两个 section 元素。记住，对文章分段的工作也是使用 section 元素完成的。这里会有人问，为什么没有对第一段使用 section 元素，其实是可以使用 section 元素的，但是由于这里的结构比较清晰，分析器是可以识别第一段内容在一个 section 元素里的，所以也可以将第一个 section 元素略去不写，但是如果第一个 section 元素里还要包含子 section 元素或子 article 元素，那么必须写明第一个 section 元素

在 HTML 5 中，article 元素可以看成是一种特殊种类的 section 元素，它比 section 元素更强调独立性。section 元素强调分段或分块，而 article 强调独立性，具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用 article 元素，但是如果想将一块内容分为几段的时候，应该使用 section 元素进行分段。另外，在 HTML 5 中，div 元素变成了一种容器，当使用 CSS 样式的时候，可以对这个容器进行一个总体的 CSS 样式的套用

另外再补充一点，在 HTML 5 中可以将所有页面的从属部分，譬如导航条、菜单、版权说明等包含在一个统一的页面中，以便统一使用 CSS 样式进行装饰

最后，关于 section 元素的使用禁忌如下：

不要将 section 元素用作设置样式的页面容器，因为那是 div 元素的工作
如果 article 元素、aside 元素或 nav 元素更符合状况，不要使用 section 元素
不要为没有标题的内容区块使用 section 元素

nav 元素

<!DOCTYPE html>
<meta charset="UTF-8">
<body>
  <h1>技术资料</h1>
  <nav>
    <ul>
      <li><a href="/">主页</a></li>
      <li><a href="/events">开发文档</a></li>
      ...more...
    </ul>
  </nav>
  <article>
    <header>
      <h1>HTML 5 与 CSS 3 的历史</h1>
      <nav>
        <ul>
          <li><a href="#HTML5">HTML 5 的历史</a></li>
          <li><a href="#CSS3">CSS 3 的历史</a></li>
        </ul>
      </nav>
    </header>
    <section id="HTML5">
      <h1>HTML 5 的历史</h1>
      <p>讲述 HTML 5 的历史的正文</p>
    </section>
    <section id="CSS3">
      <h1>CSS 3 的历史</h1>
      <p>讲述 CSS 3 的历史的正文</p>
    </section>
    ...more...
    <footer>
      <p>
        <a href="?edit">编辑</a>
        <a href="?delete">删除</a>
        <a href="?rename">重命名</a>
      </p>
    </footer>
  </article>
</body>

注意，在 HTML 5 中不要用 menu 元素代替 nav 元素。过去很多 Web 应用程序的开发人员喜欢用 menu 元素进行导航，有必要再次强调的是，menu 元素是被用在一系列发出命令的菜单上，是一种交互性的元素，或者更确切地说是使用在 Web 应用程序中的

aside 元素

aside 元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分

header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的 LOGO 图拍呢

footer 元素可以作为其上层父级内容区块或一个根区块的脚注。footer 通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。

main 元素

main 元素表示网页中的主要内容。主内容区域指与网页标题或应用程序中页面主要功能直接相关或进行扩展的内容。该区域应该为每一个网页中所特有的内容，不能包含整个网站的导航条、版权信息、网站 LOGO、公共搜索表单等整个网站内部的共同内容

每个网页只能放置一个 main 元素。不能将 main 元素放置在任何 article、aside、footer、header 或 nav 元素内部

main 元素不会对网页大纲产生任何影响

大纲

组织大纲的时候，不能使用 div 元素，因为 div 元素只能当作容器，用在需要对网页中某个局部使用整体样式时