什么是语义化?

语义化是指根据内容的结构,选择合适的标签,便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。
前端HTML语义化有利于SEO!-厦门SEO

为什么会出现语义化?

其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的,包括段落、表格、图片、标题等等,但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地,机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档,但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义,因为太多已有的内容都是专门为了可视化的浏览器设计的。面对这种情况,出现了两种观点:我们可以让机器的理解能力越来越接近人类,人能看懂、听懂的东西,机器也能理解;我们应该在发布内容的时候,就用机器可读的、被广泛认可的语义信息来描述内容,来降低机器处理 Web 内容的难度(HTML 本身就已经是朝这个方向迈出的一小步了)。

为什么要语义化?

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
前端HTML语义化有利于SEO!-厦门SEO
上图的意思是内容的语义表达能力和 AI 的智能程度决定了机器分析处理 Web 内容能力的高低。上面观点 1 的方向是朝着人类水平的人工智能努力,而观点 2 的方向正是万维网创始人 Tim Berners-Lee 爵士提出的美好愿景:语义网。语义网我就不多说了,简单来说就是让一切内容和包括对关系的描述都成为 Web 上的资源,都可以由唯一的 URI 定义,语义明确、机器可读。显然,两条路都的终极目标都很遥远,第一条路技术上难以实现,而第二条路实施起来障碍太多。

语义化带来的好处:

  • 页面结构清晰
    去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。
  • 支持更多设备
    方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页。
  • 利于SEO优化
    和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
  • 便于团队开发和维护
    在团队中大家都遵循W3C标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。
前端HTML语义化有利于SEO!-厦门SEO

怎样才是语义化?

具体的语义化标签探析
本文主要是为了探析部分HTML标签在语义化中的差别。同时也探索HTML5新加入的语义化标签。

ul/ol(列表标签):

ul和ol虽然都是列表项,但是具体使用时,差别还是很大的。

  • ul(无序列表)
    说明: ul的英文全称为unordered list,翻译成中文就是无序列表。表示列表中的项目。是没有先后顺序的。网页中大部分列表均为无序列表。
<ul>
  <li>Lxxyx的博客</li>
  <li>Lxxyx的评论</li>
  <li>联系Lxxyx</li>
</ul>
<!-- 列表中的三个项目,均没有前后顺序的分别。 -->
  • ol(有序列表)
    说明: ol的英文全称为ordered list,表示列表中的项目。是有先后顺序的。这一点是ol和ul的本质区别。
<ol>
  <li>1. Lxxyx的第一篇文章</li>
  <li>2. Lxxyx的第二篇文章</li>
  <li>3. Lxxyx的第三篇文章</li>
</ol>
<!-- 列表中的三个项目,有前后顺序的分别。 -->

dl,dt,dd(定义列表):

说明: dl,dt,dd是自定义列表,但是使用上又与前面的ul/ol有所不同。自定义列表不仅仅是一列项目,而是项目及其注释的组合。
dl: 英文意思为definition list,作用是定义列表。
dt: 英文意思为defines terms,作用是定义列表中的项目。
dd: 英文意思为defines description,作用是定义列表中项目的注释。
举例:

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

b/strong(强调):

说明: 在HTML中,b和strong都是加粗,i和em都是斜体。但是从HTML4到HTML5中,又发生了转变。所以有必要写下来。

  • b/strong(加粗)
    说明:虽然b和strong的展示效果一样,都是将字体加粗表示。但是b在HTML5中又发生了变化。

b标签(bold):
HTML4的定义:

The <b> tag is for "offset text conventionally styled in bold,without conveying any extra emphasis or importance.
// 意思为b标签仅仅表示加粗,不带有任何强调的意味。(只是为了排版或者好看)

HTML5的定义:
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.
// 意思为表示“文体突出”文字,通俗讲就是突出不安分的文字。像概要中的关键字,产品名。或者代表强调的排版方式

  • strong标签(全称是stronger emphasis):
<strong> represents a span of text with strong importance.a <strong> tag within another <strong> tag has even more importance.

// 意思为strong 标签是语气加重,更为重要的强调,如果两个strong标签嵌套还表示极度重要。strong的重要程度是要大于em标签的
总结:b仅仅只是加粗,并没有任何语义。但是strong标签则有语气加重的强调的意思。

i/em(斜体):

说明:就像b和strong的关系一样。i和em的对应关系也很容易理解。
i标签(全称是italic):
HTML4的定义:

The <i> tag is for "text conventionally styled in italic". There is no semantic meaning.
// HTML4意思为i标签仅仅只是将字体显示为斜体,无任何语义化意思

HTML5的定义:

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
// 意思为i元素现在表现为在文章中突出不同意见或语气或的一段文本,例如外语,科技术语、或者是排版用的斜体文字

em(全称是emphasis):

The <em> represents a span of text with emphatic stress.
// 意思是说em有强调的意思

总结: i仅仅只是斜体显示,并没有任何语义。但是em标签则有加强的语义在内。
5.em/strong(强调标签)
说明:在上面的介绍中,已经介绍了em和strong,个中差别,看英文既能分辨。
em的全称是:emphasis,意思为强调。
strong的全称是:stronger emphasis,意思就是语气更强的强调。
总结:em和strong标签均带有强调的语义,但是strong标签所表现的强调语气要大于em的。
除了这些html4中的标签以外,很多html5新增标签基本上都是语义化标签。