HTML5的语义化标签都有哪些，作用是啥
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5的语义化标签都有哪些，作用是啥相关的知识，希望对你有一定的参考价值。
求SEO大神帮忙解释一下语义性问题
标签种类：
<header>：定义页眉
<nav>：定义导航
<section>：定义文档中的区段
<time>：定义日期和时间
<article>：定义文章
<aside>：定义文章的侧边栏
<figure>：定义一组媒体对象以及文字
<figcaption>：定义figure的标题
<footer>：定义页脚
标签作用：
header与footer标签用于表示页面、应用或某个模块的头部和尾部；
nav用于表示导航；
article标签表示文章；
aside标签和article标签用法类似，只是表示内容会出现在侧边栏；
figure标签表示一段自包含的内容——独立的流内容（图像、图标、照片、代码等）
在开发当中，可以使用section和article标签替代过度的div标签，用这些标签来对页面进行内容划分。
想了解更多，可点击《如何让旧浏览器支持html5新标签》
参考技术Ahtml5的语义化标签有这些，作用是这些 - https://21xrx.com/full_stack/Html/html5_semantics.html
html5的语义化标签都有哪些及其作用?
参考技术A<header>
<header>元素描述了文档的头部区域
<nav>
标签定义导航链接的部分。
<section>
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<article>
<article> 标签定义独立的内容。
<aside>
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
<figcaption>
<figcaption> 标签定义 <figure> 元素的标题.
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure>
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<footer>
<footer> 元素描述了文档的底部区域. 参考技术B 一：(理论)语义化标签是什么？语义化标签就是尽量使用有相对应的结构的含义的Html的标签，以Table为例：
<table>
<tr>
<td>消费项目</td>
<td>消费金额</td>
</tr>
<tr>
<td>吃饭</td>
<td>20元</td>
</tr>
</table>
你看出了上面的Table有什么毛病吗？嘿嘿，那你看这个语义化的标签
<table>
<caption>花费记账</caption>
<thead>
<tr>
<th>消费项目</th>
<th>消费金额</th>
</tr>
</thead>
<tbody>
<td>吃饭</td>
<td>20元</td>
</tbody>
</table>
这两块代码的标签不一样，第二个表格的这些标签代码，无疑更符合Web标准.
<caption>:表格的标题;
<thead>:一表格的表头;
<th>:表的某一列的列头。
再说我们习以为常的
<title>博客园简介</title><body>博客园是一个软件开发的技术乐园，它于2004年创办，这里...</body>
你看，为什么我们看一篇文章，一下就知道标题在哪呢？在浏览器的顶端。那为什么搜索引擎能抓取呢？就是它知道这个语义化标签<title>里的就是文章标题，要是我们不遵守这个，而是：
<span>博客园简介</span><span>博客园是一个软件开发的技术乐园，它于2004年创办，这里...<span>
那搜索引擎怎么就知道谁是标题，谁是内容了呢？它又靠什么去抓取标题呢?其实语义化不仅可以是标签语义化,还可以延伸成结构语义化.举例:
#leftfloat:left;margging-left:50px;
#rightfloat:right;margin-top:100px;
<div id="left">content..</div>
<div id="right">content..</div>
这个例子里对id的命名稍微有点夸张,但是类似的情况却使有的,当我们想把#left这个div放到页面的右边,和#right调换位置时,难道你可以把样式改成这样?
#leftfloat:right;margin-left:50px;
#rightfloat:left;margin-top:100px;
那样看着多别扭,多误导人这两个div的布局啊.
应该写成这样.
<div id="main">content..</div>
<div id="sidebar">content..</div>
那样既一目了然这几个div里是什么内容也方便对其中的样式进行修改.
二：(理论)语义化标签怎么样？
1.结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)。
2.更有利于特殊终端的阅读(手机，个人助理等）。
三：(行动)语义化标签怎么办？
尽量用有结构含义的,少用无语义的，如<span>,<div>无意义，看不出是什么东西,可是<address>一看就知道这里面的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。
那么，怎么判断你的页面是否符合Web标准之一：语义化标签呢？你可以把你的页面暂时去掉样式后看可读性怎么样，如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎么样，而如果你的页面去掉样式了感觉依然不是杂乱无章的，那么，就说明你的页面结构清晰，语义化标签比较可以了。 参考技术C
html5语义化标签有这些及其作用 - https://21xrx.com/full_stack/Html/html5_semantics.html
以上是关于HTML5的语义化标签都有哪些，作用是啥的主要内容，如果未能解决你的问题，请参考以下文章