H5语义化标签

什么是标签语义化

MDN：意思是指我们应尽可能地用正确的 HTML 标签来表达正确的意图。

使用正确的标签代表正确的页面元素，这样做的好处有：

1. 方便开发---使你的 HTML 结构更加便于理解和维护

2. 适配移动端---语义化的 HTML 文件比非语义化的 HTML 文件更加轻便，并且更易于响应式开发

3. 便于 SEO 优化---搜索引擎对页面结构的关键字（标题，链接等）有更高的搜索兴趣，能够使你的网站在搜索结果中靠前

接下来我会介绍 HTML5 新增的语义化标签，帮助你的页面 “升级”

标签	说明
header	网站头部
footer	网站底部
nav	网站导航
main	主内容区
aside	网页侧边栏
selection	网页区块
article	网页文章

header

一般和 nav 联用,代表网站主要入口区域和网站介绍

<header>
  <h1>网站标题</h1>
  <nav>
    <li>功能入口</li>
  </nav>
</header>

footer

常用于补充说明网站的其他信息，比如：备案信息、版权、合作方等

<footer>
    <p>备案信息<p>
</footer>

nav

网站各功能入口导航

 <nav>
    <li>首页</li>
    <li>收藏</li>
    <li>个人中心</li>
  </nav>

main

网站内容主要区域

<main>
   <hgroup>
     <h2>内容标题</h2>
     <h3>内容副标题</h3>
   <hgroup>
   <article>内容</article>
</main>

aside

主要用于当前内容区域的导航，比如：目录索引

<aside>
  <h2>标题</h2>
  <p>段落1</p>
  <p>段落2</p>
</aside>

selection

特殊内容区块，一般用于内容的其他信息说明，比如：章节，页脚，页眉等

  <article>
        <h2>章节标题</h2>
        <p>内容<p/>
        <section>
            <h3>其他</h3>
        </section>
    </article>

article

文章内容区块，代表完整的一块内容区域

<article>
    <h1>标题</h1>
    <p>内容</p>
    <footer>
       COPYRIGHT @Mr.orange
    </footer>
</article>

总结

好的语义化标签，能够提升网站质量，方便页面维护。

掘金 个人博客

参考文档