如何做到html语义化,HTML语义化

近来看面试题的时候，经常看到一个问题：HTML语义化是什么意思？

w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改，由于不了解H5的新定义，就很容易弄错标签之间的意思。例如：既然i标签是指斜体的意思，那么为什么font-awesome这类字体要用i标签呢？这不是反语义化了吗？除此之外，em和strong都是有强调的意思，又有什么区别呢？可能这个时候又会有人说，我用div+span+css就可以实现同样的页面效果，为什么非得用什么语义化的,

• 来表示呢？

问题很多，我们一个一个来看。

【均为学习过程中的个人理解，可能有误。若有误解请指出，谢谢！】

HTML语义化是什么？

语义化是指根据内容的结构化(内容语义化)，选择合适的标签(代码语义化)，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

为什么要语义化？

有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。

语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

方便其他设备的解析

便于团队开发和维护

易混淆的HTML标签详解

i 标签

The HTML

i标签效果，i标签通常表示因为某种原因和正常文本不同的文本，例如专业术语、外语短语或排版用的文字。通常表现为斜体。

这也解决了我们之前提到的“为什么font-awesome这类字体是用i标签”这个问题。

em 标签

The HTML element emphasis

em标签效果。em表示强调的文本。视觉上也是斜体的效果

strong标签

The HTML Strong Element (

strong标签效果。以加粗的形式展现。表示这个文本的重要性，在HTML4中表示特别强调，HTML5中描述为“strong importance for its contents”

b标签

The HTML

b标签效果。表示的文本风格不同于正常的文本，没有表达任何特殊的重要性和相关性。通常用于关键字回顾，回顾中的产品名称或者是其他需要表现为粗体的文本。另一个例子是标志每个段落的lead sentence。

在HTML4之前b元素是为了使文本变为黑体，HTML4后样式信息已经被弃用，所以b元素的意义已经更改了。

不要使用b标签来标记标题，标题使用

~

标签。而且，当它们没有必要显示为粗体时，样式表可以改变这些元素的默认样式。

为了传达更多的语义信息，可以给b元素添加class属性，例如 b class ="lead"来标记每个段落的第一个句子。

如果没有语义上的目的，使用css属性的font-weight:bold来让文本加粗会更好。

mark

The HTML Mark Element () represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.

mark的效果如下图。表现为高亮文本。例如我们在网页上查找关键字时，找到的结果就会以高亮的形式展现。

不要使用mark元素来实现语法高亮，而是用span元素。

mark元素通常是表示跨越不同的上下文中的相关文本。

HTML5新标签

section

表示文档中的一个区域(或节)，比如，内容中的一个专题组，一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (

-

element) 作为子节点来辨识每一个。一般来说，一个 应该出现在文档大纲中。

artical

元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

不同标签的区别

em vs i

虽然em标签也是显示为斜体的效果，但不能说因为效果一样就使用i标签来代替em标签。因为二者表示的含义不同。

举个例子。em标签：just do it already!

那么一个人或者一个软件在读这句话时，就会以强调加重的语气来读do这个单词。

对于i标签：The word the is an article。那么在这句话中斜体并没有强调的语气。只是表明the是一个article，而不是我们平时的冠词。

em vs strong

在HTML4中，strong一般指的是更强的强调。HTML5中strong表示的是内容的重要性。em被用来改变一个句子的含义，例如" I love carrots" vs " I love carrots"。而strong通常用来给部分句子增加重要性。例如"Warning!This is very dangerous"

strong vs b

strong 和 b 算是最相似的两个元素了。那么二者之间的差别。strong表示的是一种逻辑状态，而bold表示的是物理状态。逻辑状态是从内容中分离出来，以各种不同的形式来展现，可能你想标记为红色或者下划线或者其他，那么改变strong的属性比改变bold的属性更有意义。因为bold只是making bold，并不做任何重点性强调性的区分。

参考资料：