什么是HTML语义化

HTML语义化就是根据具体内容，选择合适的HTML标签进行代码的编写。用合理HTML标记以及其特有的属性去格式化文档内容。便于开发者阅读和写出更优雅的代码，同时让搜索引擎的爬虫能更好的识别。

为什么要语义化

相比先前网页开发过程中仅关注布局和功能，在开发过程中使用表格布局或DIV+CSS布局，越来越多的人关注HTML语义化，核心是语义化可以带来显而易见的好处：

• 清晰的页面结构。去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
• 支持更多的设备。屏幕阅读器会完全根据你的标记来“读”你的网页。更好的支持浏览器的阅读模式等。
• 有利于SEO。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
• 便于团队开发和维护。在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

如何正确的使用语义化

阶段一：正确的使用HTML标签（包括HTML5新增的语义化标签）

想要用对标签，先要理解各个常用HTML标签的使用场景：

文本内容

使用 HTML 文本内容元素来组织在开标签

内联文本语义

使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字。

编辑标识

这些元素能标示出某个文本被更改过的部分。

理解上容易产生误用的标签：

blockquote、q和cite的区别

• blockquote：引用长文本，包含换行。
• q：引用短文本，不包含换行。
• cite：注明引用出处

参考资料： http://html5doctor.com/blockquote-q-cite/

figure和figcaption标签的作用

figure用于对元素进行组合，行程单元，figcaption对组合内容进行标识，如设定单元名称，具体应用场景

• 文章中的附加图片，添加图片及图片名称描述
• 文章中的代码示例，添加代码示例和代码示例的名称

参考资料： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure

main标签的作用

main标签主要是用来标识出文档

pre与code标签之间的区别和联系

• 标签， 用于表示计算机源代码。code标签内的文本将用等宽字体显示出来。

• 标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本。

通过定义我们可以知道code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示所必须的样式。基于这样的特性如果是单行代码，则使用标签即可，如果是多行代码，则可以使用

内再嵌套的方式。

、、、的区别

、 是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在HTML4.01中并不被推荐使用。

、是表达要素(phrase elements)。 （emphasized text）表示一般的强调文本，而 （strong emphasized text）表示比 语义更强的的强调文本。

在新的HTML5工作草案中：和仍旧是表达要素(phrase elements)。但这时的表示html页面上的强调（emphasized text）， 表示句子中的强调（即强调语义）。

与、与的区别

• 元素 使用删除线来渲染文本。使用元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用，提倡使用和元素。
• 表示已经从文档中删除的文本范围。此元素通常是（但不必）呈现删除线的文本。
• 元素使文本在其内容的基线下的一行呈现下划线。 在 HTML 4 和 XHTML 1 中废弃，但是在 HTML 5 中使用其它语义引入。如果你想要使用非语义的方式，给文本添加下划线，你应该使用 元素，或者其它语义适当的元素，并且使用 CSS text-decoration 属性和 underline 值为其排版。
• 元素定义已经被插入文档中的文本。此元素通常是（但不必）呈现下划线的文本。

的使用场景是什么？

标签代表突出显示的文字。举个例子，它可以用来显示搜索引擎搜索后关键词。

和标签

元素标记了被定义的术语；术语定义应当在

,

• 如果 元素有一个 title 属性，那么该术语的值就是该属性的值。
• 否则，如果它仅包含一个 元素，该元素拥有 title 属性，那么该术语的值就是该属性的值。
• 否则， 元素的文本内容就是该术语的值。

abbr标签用于标记缩略语，其title属性则表示该缩略语相应的全称。标准规定，在HTML文档中所有的abbr标签都是独立的，也即如果文档中存在两个文本内容一致的abbr标签(标记的缩略语相同)，则一个abbr标签的title属性值不会对另一个abbr标签产生任何影响 — 这一点很好理解，因为在现实生活中，同样的缩略语可以表达多个不同的意思。

参考资料： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn

内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

hgroup的作用是什么？

标题
    
副标题

hgroup使用注意：

• 如果只需要一个h1-h6标签就不用hgroup
• 如果有连续多个h1-h6标签就用hgroup
• 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

图片和多媒体

HTML 支持各种多媒体资源，例如图像，音频和视频。

表格内容

这里的元素用于创建和处理表格数据。元素在一个 元素中可以出现一个或者更多。

案例：

表单

和

会创建包含在一个 元素中的一组选项。label为选项组的名字，案例：

Option 1.1Option 2.1Option 2.2Option 3.1Option 3.2Option 3.3

Choose a browser from this list:

如果需要对选项内容分级，则使用，否则可使用

output有什么如何使用？

标签表示计算或用户操作的结果。案例：

总结：

• 尽可能少的使用无语义的标签div和span。
• 不要使用纯样式标签，如：b、u等，改用css设置。

更多参考：

• http://www.w3school.com.cn/tags/index.asp
• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

阶段二：CSS命名规范（id和class的命名）

如果页面中的标签完全使用语义化标签，或许就用不到特别针对CSS进行id和class命令了。相关的样式可以参考：

https://github.com/igoradamenko/awsm.css

更多的情况下推荐按照选择器命名的惯例进行设置，无论是 ID 还是 class，对任何东西最好总是根据 它是什么而不是 它看上去是什么样子来命名。 常见命名惯例：

• 头：header
• 内容：content .container
• 尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围布局：wrapper
• 左右中：left right center
• 登录条：loginbar
• 标志：logo
• 广告：banner
• 页面主体：main
• 热点：hot
• 新闻：news
• 下载：download
• 子导航：subnav
• 菜单：menu
• 子菜单：submenu
• 搜索：search
• 友情链接：friendlink
• 页脚：footer
• 版权：copyright
• 滚动：scroll
• 内容：content
• 标签页：tab
• 文章列表：list
• 提示信息：msg
• 小技巧：tips
• 栏目标题：title
• 加入：joinus
• 指南：guild
• 服务：service
• 注册：regsiter
• 状态：status
• 投票：vote
• 合作伙伴：partner

更多参考：

• http://ximan.github.io/css-name/
• https://css-tricks.com/semantic-class-names/
• https://github.com/thus-studio/css-name
• https://coderlmn.github.io/code-standards/

阶段三：使用微格式标记数据

RDFa

语义网里面描述数据的方式之一是RDF。RDF基于XML，而HTML中的XHTML是一种XML。 通过HTML的attribute储存语义网数据叫RDFa（Resource Description Framework – in – attributes），这就把HTML/XHTML和语义网技术拉到了一起。

优点：是一个稳定不变的标准。

缺点：

• RDFa最初是为XHTML设计的而不是HTML5，所以在严格的RDFa和松散的HTML5之间存在着争议。
• RDFa很复杂，网页嵌入RDFa之后会显得笨重。

参考资料：

• https://rdfa.info/
• https://en.wikipedia.org/wiki/RDFa
• https://en.wikipedia.org/wiki/XHTML%2BRDFa

微格式（Microformat）

Microformat，有人翻译成“微格式”，是一种对Web网页进行语义注解的方法，这种方法依托于标准的Web页面写作技术，这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的Web页面，在HTML文档中给一些标签（Tag）增加一些属性（attribute），这些属性对信息的语义结构进行注解，处理HTML文档的软件，例如，浏览器等，如果不认识这些属性可以跳过，并不造成任何不良影响。

微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其它的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其它形式重复使用或组合。

微格式通常附加在用于添加样式的class属性上。你可以根据数据的类型，使用某些标准的样式名来标注数据。然后，其他程序可以读取你的标记，提取数据并通过检查class属性来确定数据的含义。目前比较流行的微格式应该是：hCard。

HTML文档中的Microformat代码可以有两类：compound microformat和elemental microformat.

Compound microformat

Compound microformat是一段语义相关的HTML文档内容，例如以下文档片段：

    Shaun Shull
    
USWeb
    

        
1060 Timberline Terrace
        Ashland,
        OR
        97520
    
    
1-866-273-1869

这是一个标准的HTML文档片段，所有浏览器都能够正确显示，同时，每个标签都增加了一个class属性，属性值是符合某个标准的语义注解，上例是符合vCard标准的语义注解。

Elemental microformat

Elemental microformat不是对一段XHTML页面做语义相关的注解，而是针对某个标签个别进行注解，当然，注解时要采用某个公认的标准，否则，别人无法正确理解你的注解。还有一个示例就是XFN微格式。XFN表示的是“XHTML Friends Network”，它使用超链接中的rel属性来描述你与所链接到的那个人之间的关系，可以根据该信息来建立自动生成社会网络（automatically generated social network）。

下面是一个使用 XFN标准的microformat:

Ed Shull

这行代码一般用在包含某个人的信息的页面上，表示指向的页面上的Ed Shull与本页面的人存在亲戚关系，而且碰过面。

三种微格式的实现：

• 使用rel来定义基于链接的关系
• 使用XFN微格式为链接增加人际关系的描述
• 使用hCard微格式来描述人、公司和地点
• 使用hCalendar微格式为那些关于事件和基于时间或地点的活动提供语义和结构化信息。

参考资料：

• http://microformats.org/
• https://en.wikipedia.org/wiki/Microformat

微数据（Microdata）

微数据是尝试解决语义标记问题的另一种选择。它最早是HTML5规范的一部分，后来分离出来成为一个独立的标准。它采用的方法与RDFa相似，但简化了一些。Microdata 是用来对 Web 页面上已经存在的数据提供附加的语义，它并不是被设计用来作为独立的数据格式，它是对 HTML 的一种补充。

另外，它使用自己的属性，因而不存在与样式表规则冲突的风险。但是，采用微数据的网页依然比使用微格式的网页大很多。

HTML5 微数据规范是一种标记内容以描述特定类型的信息，例如评论、人物信息或事件。每种信息都描述特定类型的项，例如人物、事件或评论。例如，事件可以包含 venue、starting time、name 和 category 属性。微数据使用 HTML 标记（常为 或

  我的名字是王富强，但大家叫我小强。我的个人首页是：
  www.example.com
  我住在上海市富贵新村。我是工程师，目前在财富科技公司上班。

而如果使用针对人物的微数据标记，则HTML会如下：


  我的名字是王富强，
  但大家叫我小强。
  我的个人首页是：
  www.example.com
  我住在上海市富贵新村。我是工程师，
  目前在财富科技公司上班。

 
I'm Philip Jägenstedt at
  foolip.org.