你真的懂HTML5的语义化吗

什么是语义化

就是用正当、正确的标签来展现内容

语义化的好处

• 代码结构清晰，方便阅读，有利于团队合作开发
• 有利于搜索引擎优化（SEO）

语义化内容标签

• 标题

  h1 一个页面只可有一个，多用于包含logo

  h2 模块标题

  h3 段落的小节标题

  h4, h5, h6 不常用

• 强调内容的重要性

  <strong>智能定制</strong>

  strong和em都表示强调，strong显示为粗体，em显示为斜体，且strong的强调程度要比em更高

• 视觉上突出显示文本

  <mark></mark>

  如：搜索结果中高亮的关键词（百度关键词搜索参照）

• 时间

  <p>文章发表于<time datetime="2019-08-28 20:00">2019-08-28</time></p>

• 定义联络信息

  <address></address>

  可定义article元素的作者信息，但不适用于嵌套的article元素

• 代表一段独立的内容，经常与说明配合使用

  <figure>  <!-- 图片、图表、表格等 -->  <figcaption>标题/说明</figcaption></figure>

  figcaption元素必需是figure元素的第一个或者者最后一个子元素

语义化结构标签

• section使用场景

  对页面中的内容进行分块，一个section元素通常由标题以及内容组成

  <header></header><section>  <h2>标题</h2>  <p>段落内容</p></section><section>  <h2>标题</h2>  <img src="./img/product.jpg" alt="图片说明"></section><section>  <h2>标题</h2>  <p>段落内容</p></section><footer></footer>

  注：不推荐为那些没有标题的内容使用section标签

• article使用场景

  它比section具备更明确的语义，代表一个独立的、完整的相关内容块，可以包含一个或者多个section

  <article>  <header>    <h2>标题</h2>    <p>发表日期：<time datetime="2019-08-28 20:00">2019-08-28</time></p>  </header>  <p>文章内容段</p>  <p>文章内容段</p></article>

• aside使用场景

  独立于内容的一部分，且可以被单独的拆分出来而不会使整体受影响，常用于定义页面侧边栏

  <aside>  <h2></h2>  <ul>    <li></li>    <li></li>  </ul></aside>

• main使用场景

  用来呈现文档或者应用的主体部分，一个页面只能有一个main标签

  <main></main>

• header使用场景

  页面中的header

  <header>  <h1 role="logo">    <a href="/">梦创</a>  </h1>  <nav>    <a href="/">首页</a>    <a href="/product">产品详情</a>    <a href="/about">关于我们</a>  </nav></header>

  分块中的header

  <section>  <header>    <h2>标题</h2>    <p>信息详情</p>  </header>  <p>分块内容段</p></section>

  文章中的header

  <article>  <header>    <h2>标题</h2>    <p>发表日期：<time datetime="2019-08-28 18:00">2019-08-28</time></p>  </header>  <p>文章内容段</p></article>

  注：article、section、aside、nav都可以拥有自己的header和footer

• role属性的使用场景

  用来加强语义性，当现有的HTML标签不能充分表达语义的时候，可以借助role来说明