摘要：近来看面试题的时候，经常看到一个问题语义化是什么意思里面有标签的含义。因为二者表示的含义不同。参考资料理解语义化语义化的革新语义化标签语义化标签探析
近来看面试题的时候，经常看到一个问题：HTML语义化是什么意思？
w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改，由于不了解H5的新定义，就很容易弄错标签之间的意思。例如：既然i标签是指斜体的意思，那么为什么font-awesome这类字体要用i标签呢？这不是反语义化了吗？除此之外，em和strong都是有强调的意思，又有什么区别呢？可能这个时候又会有人说，我用div+span+css就可以实现同样的页面效果，为什么非得用什么语义化的来表示呢？
问题很多，我们一个一个来看。
【均为学习过程中的个人理解，可能有误。若有误解请指出，谢谢！】
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
为什么要语义化？有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
方便其他设备的解析
便于团队开发和维护
易混淆的HTML标签详解i 标签
The HTML Element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.
i标签效果，i标签通常表示因为某种原因和正常文本不同的文本，例如专业术语、外语短语或排版用的文字。通常表现为斜体。
这也解决了我们之前提到的“为什么font-awesome这类字体是用i标签”这个问题。
em 标签
The HTML element emphasis marks text that has stress emphasis. The element can be nested, with each level of nesting indicating a greater degree of emphasis.
em标签效果。em表示强调的文本。视觉上也是斜体的效果
strong标签
The HTML Strong Element () gives text strong importance, and is typically displayed in bold.
strong标签效果。以加粗的形式展现。表示这个文本的重要性，在HTML4中表示特别强调，HTML5中描述为“strong importance for its contents”
b标签
The HTML Element represents a span of text stylistically different from normal text, without conveying any special importance or relevance. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced. Another example of its use is to mark the lead sentence of each paragraph of an article.
b标签效果。表示的文本风格不同于正常的文本，没有表达任何特殊的重要性和相关性。通常用于关键字回顾，回顾中的产品名称或者是其他需要表现为粗体的文本。另一个例子是标志每个段落的lead sentence。
在HTML4之前b元素是为了使文本变为黑体，HTML4后样式信息已经被弃用，所以b元素的意义已经更改了。
不要使用b标签来标记标题，标题使用
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元素通常是表示跨越不同的上下文中的相关文本。
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，而不是我们平时的冠词。
在HTML4中，strong一般指的是更强的强调。HTML5中strong表示的是内容的重要性。em被用来改变一个句子的含义，例如" I love carrots" vs " I love carrots"。而strong通常用来给部分句子增加重要性。例如"Warning!This is very dangerous"
strong vs bstrong 和 b 算是最相似的两个元素了。那么二者之间的差别。strong表示的是一种逻辑状态，而bold表示的是物理状态。逻辑状态是从内容中分离出来，以各种不同的形式来展现，可能你想标记为红色或者下划线或者其他，那么改变strong的属性比改变bold的属性更有意义。因为bold只是making bold，并不做任何重点性强调性的区分。
参考资料：
理解HTML语义化
HTML语义化
HTML5的革新——语义化标签
HTML element reference
HTML语义化标签探析
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/59983.html
摘要：代码示例语义化语义化语义化语义化语义化年月日小维语义化标签包括还有等。而没有语义化的元素如则推荐使用。语义化包含了标签语义化和命名语义化。 什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
摘要：语义化概念官方解释语义化是指用合理的标记以及其特有的属性去格式化文档内容。大家知道中的也可以加粗文字，的标签也可以加粗文字，但是腾讯都没有使用。常用的语义化标签大部分拥有文本格式化的作用把文本定义为强调的内容。 HTML语义化 概念 官方解释：语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。 我的理解：在我的理...
摘要：逻辑学的语义学着眼点在于逻辑系统的语义解释，是一个理想化的模型系统，不直接涉及自然语言。例如，通过帮助临床研究中的决策，语义技术将跨机构桥接多种形式的生物和医学信息。 showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420); 前端工程师的招聘中，经常有这样的要求：对Web 语义化有深刻理解。那么到底什么才是深刻理解Web语义化...
阅读 638·2021-11-24 10:44
阅读 2462·2021-11-11 16:54
阅读 2658·2021-10-08 10:21
阅读 1760·2021-08-25 09:39
阅读 2627·2019-08-30 15:56
阅读 3292·2019-08-30 13:46
阅读 3337·2019-08-23 18:09
阅读 1744·2019-08-23 17:05
