<h1>文章的标题</h1>

根据应用场景，一些常用的标签元素有：

本身无实在意义，组合其他HTML元素，常用于页面布局:div

设置文本，填充段落:h1~h6, p, span, strong, em…

表现列表：ul, li, ol, dl, dt, dd

表单相关：form,input,select,button

表格相关：table,thead,tbody,tfoot,th,tr,td

用于图像显示：img, canvas

打开链接，发送邮件，段落跳转：a

此外，meta Description/meta keywords等针对搜索引擎和更新频度的描述和关键词的meta标签也会用来实现网页的SEO。

---------------------------------------

header区：

包含标签p h1~h6 hgroup等可以表示标题和副标题。例如：

<header>

  <hgroup>

    <h1>标题</h1>

    <h2>副标题</h2>

  </hgroup>

  <p> 文本或者图片</p>

</header>

---------------------------------------

2.Navigation区

nav标签专门为页面导航功能定义一块区域

<nav>

  <ul>

    <li><a href="#">主页</a></li>

    <li><a href="#">关于我们</a></li>

  </ul>

</nav>

---------------------------------------

3.Article 和 Section 区

Article包含页面的实际内容，包含 Web 内容的相关的组件区。

<article>

    <section>

      Content

    </section>

    <section>

      Content

    </section>

</article>

<section>

  <article>

      Content

  </article>

  <article>

      Content

  </article>

</section>

---------------------------------------

4.figure标记

包含图像、图表和照片。figure标记可以包含figcaption，figcaption表示图像对应的描述文字，与图片产生对应关系。

<figure>

  <img src="/figure.jpg" width="304" height="228" alt="Picture">

  <figcaption>Caption for the figure</figcaption>

</figure>

---------------------------------------

5.媒体元素

一些常用的媒体元素包含：audio/video/source/embed

<audio id="audioPlay">

   <source src="../h5/music/act/iphonewx/shakeshake.mp3" type="audio/mpeg">

           您的浏览器不支持 audio 标签。

</audio>

---------------------------------------

6.aside

包含一些补充性内容，可以被移除而不会影响文章或文章所在的区段或页面所传达的信息。

<aside>

  <h4>补充</h4>

  <p>补充内容</p>

</aside>

---------------------------------------

7.footer等

总之，HTML语义化是反对大篇幅使用无语义化的div+span+class，而鼓励使用HTML定义好的语义化标签。