H5新特性之语义化标签

语义化标签

HTMl标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，不论是谁都能够看懂这块内容是什么，并且有利于搜索引擎。

标签语义化的好处：
1. HTML结构清晰
2. 代码可读性较好
3. 无障碍阅读
4. 搜索引擎可以根据标签的语言确定上下文和权重问题
5. 移动设备能够更完美的展现网页（对css支持较弱的设备）
6. 便于团队维护和开发

section

类似于div，section更偏向划分区域

<section></section>

article

更偏向于内容的展示(定义外部的内容，其中的内容独立于文档的其余部分)

<article></article>

aside

在一旁的，在一边的，侧边(如侧栏、文章的一组链接、广告、友情链接、相关产品列表)

<aside></aside>

header

表示内容的头部、网页头部、头部区域

<header></header>

footer

表示网页的底部、内容的底部、底部区域

<footer></footer>

nav

导航连接、导航区域

<nav></nav>

figure

表示一块独立的内容

<figure></figure>

figcaption

figure的标题（一般放在figure的第一位或者最后一位）

<figcaption></figcaption>

main

主题内容（IE不兼容）

<main></main>

hgroup

用于对网页或区段的标题进行组合

<hgroup></hgroup>

mark

高亮显示 默认背景为黄色（可以更改背景 内联元素）

<mark></mark>

time

放时间的(文本内容必须是合法的日期或者时间格式)

<time></time>

dialog

类似于微信的对话框（默认display:none 默认定位 默认边框）

<dialog></dialog>

语义化标签还有很多，以上列出的只是比较常用的几个！