语义类标签是什么，使用它有什么好处？

语义类标签也是大家工作中经常会用到的一类标签，它们的特点是视觉表现上互相都差不多，主要的区别在于它们表示了不同的语义，比如大家会经常见到的section、nav、p，这些都是语义类的标签。
语义是我们说话表达的意思，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。

很多工作场景里，语义类标签有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处。

• 语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有CSS的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
• 除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

语义化标签学习的总结：

1）ul,ol的区别：

ul是无序列表，ol是有序列表，ul可以用来做菜单栏包裹，ol可以用作有顺序的列表，如：1.内容一

2.内容二

3.内容三

2）语义化标签的作用

1.自然语言表达能力补充，如：<em>用来表达词语的肯定，<strong>用来加粗字体

2.文章标题摘要，如：合理运用h1,h2标签来表述标题的上下关系

3.适合机器阅读的整体结构，如：<time datetime="2015-07-09">9 July 2015</time>这句就更容易让机器阅读。

3）常见的以及一些有用的标签

• <section>：从HTML 5开始，我们有了section标签，这个标签可不仅仅是一个“有语义的div”，它会改变h1-h6的语义。section的嵌套会使得其中的h1-h6下降一级，因此，在HTML5以后，我们只需要section和h1就足以形成文档的树形结构：

<section>
<h1>HTML语义</h1>
<p>balah balah balah balah</p>
<section>
<h1>弱语义</h1>
<p>balah balah</p>
</section>
<section>
<h1>结构性元素</h1>
<p>balah balah</p>
</section>
......
</section>

• <code>：code可以包裹html语句而不会被浏览器再去解析。
• <pre>，<samp>：这是一段HTTP协议的内容描述，因为这段内容的换行是非常严格的，所以我们不需要浏览器帮我们做自动换行，因此我们使用了pre标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。

又因为这是一段计算机程序的示例输出，所以我们可以使用samp标签：

<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>

• <aside>：一般用作侧边栏的包裹标签
• <hgroup>：h标签的标签组，

<hgroup> <h1>World Wide Web </h1> <h2>From Wikipedia, the free encyclopedia</h2> </hgroup>。

• <nav>:一般用作导航栏。

个人学习笔记，如有错误欢迎指正~