HTML语义化的应用

3 min read

什么是HTML语义化

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

为什么要语义化

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

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

如何正确的使用语义化

阶段一:正确的使用HTML标签(包括HTML5新增的语义化标签)

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

文本内容

使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构,而这对于 accessibility 和 SEO 很重要。

标签名 英文全拼 中文翻译
<p> paragraph 段落
<blockquote> block quotation 块级引用
<hr> horizontal rule 水平分割线
<ul> unordered list 无序列表
<ol> ordered list 有序列表
<li> list item 列表项目
<dl> definition list 定义列表
<dt> definition term 定义术语
<dd> definition description 定义描述
<div> devision 分区
<figure> figure 独立单元
<figcaption> figure caption 单元名称
<main> main 主要内容
<pre> preformatted 预格式

内联文本语义

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

标签名 英文全拼 中文翻译
<q> quotation 引用
<cite> citation 引自
<code> code 代码
<a> abchor
<br> break 换行
<span> span 范围
<b> bold 粗体
<strong> strong 加重
<i> italic 斜体
<em> emphasized 加重
<u> underlined 下划线
<s> strikethrough 删除线
<mark> marked 标记
<sub> subscripted 上标
<sup> superscripted 下标
<abbr> abbreviation 缩写
<dfn> definition 定义

编辑标识

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

标签名 英文全拼 中文翻译
<del> delete 删除
<ins> insert 插入

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

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标签主要是用来标识出文档<body>或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的,不包含任何在一系列文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框等。

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

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

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

<b>、<strong>、<i>、<em>的区别

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

<em>、<strong>是表达要素(phrase elements)。<em> (emphasized text)表示一般的强调文本,而 <strong> (strong emphasized text)表示比< em > 语义更强的的强调文本。

在新的HTML5工作草案中:<em>和<strong>仍旧是表达要素(phrase elements)。但这时的<strong>表示html页面上的强调(emphasized text),<em> 表示句子中的强调(即强调语义)。

<s>与<del>、<u>与<ins>的区别

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

<mark>的使用场景是什么?

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

<dfn>和<abbr>标签

<dfn> 元素标记了被定义的术语;术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对)中给出。被定义术语的值由下列规则确定:

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

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

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

内容分区

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

元素 描述
<address> <address>可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下,它应用于整个文档。
<article> <article>表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。
<aside> <aside>表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。
<footer> <footer>表示最近一个章节内容或者根节点(sectioning root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header> <header>表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。
<h1>~<h6> 标题(Heading)元素拥有六个不同的级别,<h1>是最高级的,而<h6>则是最低的级别。一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用,例如,自动构造某个文档中的内容表(就像本文档右边浮动栏一样)。
<hgroup> <hgroup>代表一个段的标题。它规定了在文档轮廓里(the outline of the document )的单一标题是它所属的隐式或显式部分的标题。
<nav> <nav>描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。
<section> <section>表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>-<h6>) 作为子节点 来辨识每一个<section>。

hgroup的作用是什么?

<hgroup> 标签被用来对标题元素进行分组。当标题有多个层级(副标题)时,<hgroup> 元素被用来对一系列 <h1> – <h6> 元素进行分组。应用场景,比如一篇文章有主标题和副标题,则可以将主标题和副标题分在一个组。

hgroup使用注意:

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

图片和多媒体

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

元素 描述
<img> <img>代表文档中的一个图像。
<audio> <audio>用于在文档中表示音频内容。
<video> <video>用于在HTML或者XHTML文档中嵌入视频内容。
<track> <track>被当作媒体元素<audio>和<video>的子元素来使用。它允许指定计时字幕(或者基于事件的数据),例如自动处理字幕。
<area> <area>在图片上定义一个热点区域
<map> <map>属性与<area>属性一起使用来定义一个图像映射(一个可点击的链接区域).

表格内容

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

标签名 英文全拼 中文翻译
<table> table 表格
<caption> caption 表格标题
<tr> table row 表格行
<th> table heading 表头
<td> table data 表值
<thead> table header 表头
<tbody> table body 表内容
<tfoot> table footer 表尾

<thead>、<tbody>、<tfoot>如何使用?

案例:

表单

标签名 英文全拼 中文翻译
<form> form 表单
<fieldset> field set 分类
<legend> legend 分类标题
<label> label 标签
<select> select 选项
<option> option 选项分组
<optgroup> option group 选项清单
<datalist> data list 选项数据
<input> input 输入框
<output> output 输出内容
<textarea> text area 文本域
<button> button 提交按钮

<optgroup>和<datalist>如何使用?

<optgroup> 会创建包含在一个 <select> 元素中的一组选项。label为选项组的名字,案例:

<datalist> 包含了一组<option>元素,这些元素表示其它表单控件可选值。案例:

如果需要对选项内容分级,则使用<optgroup>,否则可使用<datalist>。

output有什么如何使用?

<output> 标签表示计算或用户操作的结果。案例:

总结:

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

更多参考:

阶段二: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

更多参考:

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

RDFa

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

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

缺点:

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

参考资料:

微格式(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文档内容,例如以下文档片段:

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

Elemental microformat

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

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

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

三种微格式的实现

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

参考资料:

微数据(Microdata)

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

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

HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论、人物信息或事件。每种信息都描述特定类型的项,例如人物、事件或评论。例如,事件可以包含 venue、starting time、name 和 category 属性。微数据使用 HTML 标记(常为 <span> 或 <div>)中的简单属性为项和属性指定简要的描述性名称。

上面的释义过于学术化,我们可以将其搁置一边,先看个简单的关于微数据的例子。平时,我们要在页面上显示对一个人的描述,HTML代码可能如下:

您会发现,HTML代码量多了不少,还出现了很多自定义的属性,如itemscope, itemtype, itemprop等。这些属性就是方面机器识别的特定的标记。其含义等依次如下:

itemscope 定义一组名值对,称为项。

itemprop=”属性名”

添加一个数据项属性。这个属性名可以是个单词或是个URL,与元素包含的文本值相关:

  • 对于大部分元素,属性名值就是元素标签里面的文本值(不是所有标签)。
  • 对于有URL属性的元素,该值就是URL(如<img src=””>, <a href=””>, <object data=””>等)。
  • 对于<time>元素,该值就是datetime=””属性。
  • 对于<meta itemprop=”” content=””>, 该值就是content=””属性。

itemref=””

允许微数据项通过指向特定ID(含有需要属性的元素)包含非后代属性。

itemtype=””

微数据定义的类型。其值为URL,扮演词汇表名称的作用。

itemid=””

允许词汇表给微数据项定义一个全局标识符,例如书的ISBN数值,在同样元素上使用itemid作为数据项的itemscope和itemtype属性。

Microdata 的优势

Microformats 在 HTML4.01/XHTML1.0 中本身就是可用的,这也是为什么 class 属性在这里以一种新的方式使用。虽然在 HTML4.01 规范中提到 class 可以有更广泛的应用,但它只是被 CSS 用作风格样式选择器。这意味着我们工作在单一的一个全局命名空间中,而这个命名空间已经被 CSS 类名所污染。

Microformats 和随机的 CSS 类名唯一不同的就在于树结构。这种树结构也有局限性,这意味着你需要为所有的元素找到一个公共祖先。Microformat 的存在似乎是在加重系统化技术的负债。

RDF 模型使用主语 — 谓语 — 宾语的三元组结构。如下面的例子:

这里 XML 命名空间的使用有些奇怪。在 XML 中前缀是被用于元素和属性名,而这里却被用于属性值。

相比之下,Microdata 基于 HTML 现有的元素添加语义,不久的将来可以使用 DOM API 来获取这些语义,能够被搜索引擎用来组合更加结构化的搜索结果,并且 Google 已经致力于测试 Microdata 语法,Google 搜索结果已经支持 Microdata。

Google推出的测试工具:https://search.google.com/structured-data/testing-tool

参考链接:

其他参考:

打赏作者
微信支付标点符 wechat qrcode
支付宝标点符 alipay qrcode

C语言学习:size_t

在学习C语言的时候,遇到了一个新的数据类型size_t,截止目前也没有完全理清这个类似的具体场景及出现的原因。
44 sec read

C语言学习:main()函数的正确写法

C语言虽然是一门古老的语言,但是其标准一直在完善,所以很多以前支持的语法在到当前已经不能在使用了。 C语言的版
41 sec read

Scipy数学函数的Scala实现

最近在推进项目的时候,遇到需要将线下的Python代码转化成线上的集群代码,由于机器代码环境是Scala,所以
4 min read

发表评论

电子邮件地址不会被公开。 必填项已用*标注