HTML5 语义化标签

为什么会有h5 语义化标签

在HTML5出现之前，我们一般采用DIV+CSS布局页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签。

语义标签的概念

维基百科

语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。

通俗来说：语义化的意思是从名称一眼就能看出其内容和作用是什么，语义化标签就是通过使用浅显易懂的元素名和属性名来实现语义化的

语义标签有什么用？

• 可以提高页面的可访问性，即在css丢失的情况下，页面结构仍然可以比较清晰的展现；
• 提高用户体验，用户不够清楚地方可以得到良好的解释；
• 有利于页面seo，让搜索引擎更容易明白页面结构和内容的主次顺序；
• 有利于页面维护者理解代码结构，降低维护成本；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页

常用语义标签有哪些？

h1到h6标签 表示不同等级的标题

• 可以用来表现文本内容的层级结构

元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构

• 可以嵌套使用，但是他们必须是部分与整体的关系
• 元素的作者信息可通过

  元素提供，但是不适用于嵌套的

  元素
• 元素的发布日期和时间可通过 元素的pubdate属性表示

定义侧栏标签

• 如果使用多个
  ，标签应该在主要内容的后面，这样有利于SEO的搜索与提升可访问性
• 如果是与文章的主要内容有关系的图像需要用

  标签代替

元素表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）

• 如果元素内容可以分为几个部分的话，应该使用
  而不是
• 不要把
  元素作为一个普通的容器来使用。 一般来说，一个

  应该出现在文档大纲中

元素用来表示一些前言性质或导航类的内容。它可以包含一些标题性质元素，也可以放置一些比如logo，搜索框，或其它的

元素等

• 元素并不是一个可以形成段落内容的元素，所以，不需要在内容目录里体现出来

元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息

• 元素内的作者信息应包含在

  元素中
• 元素不是章节内容，因此在outline中不能包含新的章节

描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表

• 并不是所有的链接都必须使用
  元素,它只用来将一些热门的链接放入导航栏
• 一个网页也可能含有多个
  元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表
• 对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容

,

,

(自定义列表)

• dl: 英文意思为definition list，作用是定义列表
• dt: 英文意思为defines terms，作用是定义列表中的项目
• dd: 英文意思为defines description，作用是定义列表中项目的注释

/ 元素默认均展示为加粗

• 表示“文体突出”文字，通俗讲就是突出不安分的文字。像概要中的关键字，产品名。或者代表强调的排版方式
• 表示重程度的强调

/ 元素默认均展示为斜体

• 表现为在文章中突出不同意见或语气或的一段文本,例如外语，科技术语、或者是排版用的斜体文字
• 表示强调

用来突出显示文本，他的效果就像是用荧光笔给重点的语句做标一样

元素可以让作者为它最近的

或者 祖先元素提供联系信息。在后一种情况下，它应用于整个文档

• 当表示一个和联系信息无关的任意的地址时，应使用

  元素

• 这个元素不能包含除了联系信息之外的任何信息，比如出版日期
• 通常，
  元素可以放在当前section的

  元素中，如果存在的话

这个元素是用来引入图表、图形、照片等，对应的场景就是像是杂志中的图片一样

• 元素可以包含多个内容块，但是只能有一个

  （可以理解成给图表加标题）标签

• 可以用

  ~

  来给

  增加标题；

• 不能单独出现，需要有配套的内容一起出现

可以通过这个标签标记一个具体的时间或日期，应用场景通常就是一篇文章的发表时间

• datetime中的时间最好与 标签中的文本元素日期一样，写法可以不一样
• 如果这个时间是代表整个文章或是页面的时间需要添加pubdate属性
• 不要在 标签中使用不确切的时间如：“今天中午”、“上周末”
• 如果 使用pubdate属性需要注意的是要在同一个父标签下面不要出现张冠李戴的问题
• 标签不能在嵌套另一个 标签
• datatime中的时间格式需要是标准的机器可能的时间 如:YYYY-MM-DDThh:mm:ss

注意

• 尽可能少的使用无语义的标签div和span
• 在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来