# HTML5 结构元素介绍

刚开始学习 HTML 时，总是对 HTML5 新增的语义化标签的使用情景有所迷糊，在小实战中纠结于到底应该什么时候使用这些标签元素才是合理的。虽然使用这些标签使得页面对搜索引擎来说更加具有可读性，但是错误地使用这些标签，反而会误导搜索引擎，从而影响了页面的SEO。于是，清楚地认识这些标签的使用范围并合理地使用它们是非常有必要的，尽管它们并不会为我们带来什么样式上的变化。

header 元素通常用来包含放在页面的头部的内容，除此之外也可以用来作为一个内容区块（如 artice）的顶部内容。

# nav

nav 即 navigator 导航栏，用来定义导航链接。将页面具有导航性质的链接元素（如站内导航、页内导航、翻页导航等）归纳于 nav 元素区域内。

# article

article 元素往往定义的是一篇比较独立的文章、日志、评论之类的内容，其内部常常包含 header 元素、section 元素与 h1~h6 元素。所谓独立便是页面其他内容与该 article 元素内容无直接关联，在此处更换内容性质类似的 article 并不会影响整个页面的布局。

# section

section 元素经常被新手与 div 元素混用。section 元素用于对页面中的某些内容进行“分块”，但 section 元素的内部应该需要有标题，没有标题的内容区块应该使用其他的标签。

仅仅是为了选择设置样式的页面容器，应该使用 div 标签。（所以 div 标签在使用频率上要比 section 多很多）

同时，如果内容更适合用其他语义化标签（article、aside、nav），优先使用其他标签。

# aside

aside 元素用于定义页面的侧边栏，往往内容是一些介绍、内容相关的其他信息甚至广告等。宽度一般小于正文栏。

footer 元素定义定义一个页面或者区域的底部内容，在这方面它和 header 元素非常的相似。一般底部内容都是相关信息或者一些信息标识。

# 示例

最后做一个简单的“无样式”示例，使用以上H5结构元素构建一个页面：

<body>
  <header>
    <h1>个人网站</h1>
    <span>一个兴趣使然的个人网站</span>
  </header>

  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">博客</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </nav>

  <div style="display: flex;">
    <div style="flex: 1;">
      <article>
        <header>
          <h1>一篇文章</h1>
          <span>作者：ceynri</span>
        </header>

        <h2>章节一</h2>
        <p>文段一</p>

        <footer>
          <p>本文允许转载，禁止用于商业用途</p>
        </footer>
      </article>

      <article>
        <h1>评论</h1>
        <section>
          <header>
            <h1>Well</h1>
            <span>评论者：Tom</span>
          </header>
          <p>Explosion is art!</p>
        </section>

        <section>
          <header>
            <h1>OMG!</h1>
            <span>评论者：Mary</span>
          </header>
          <p>I'm coming</p>
        </section>
      </article>
    </div>

    <aside>
      <h1>广告</h1>
      <img src="ad.png" alt="ad">
    </aside>
  </div>

  <footer>
    <a href="#">关于本站</a>
    <a href="#">友情链接</a>
  </footer>
</body>

效果如下：

← HTML 常用标签 Emmet 入门教程 →