摘要：例如盲人借助屏幕阅读器，也可以上网购物。如果网站的购物车按钮是用写的，那么屏幕阅读器识别起来会非常的困难。有时候可以被其他标签替代，我们可以表示语气的不同，用包裹那些外来或者特殊意义的名词。
什么是HTML
HTML全称是HyperText Markup Language，翻译过来就是超文本标记语言。它定义了网页的内容和结构。
为什么要使用语义化标签可读性、可维护性
html有很多标签，每个标签都有它的语义，比如 h1～h6 表示不同重要程度的标题。虽然平时很多同学用无语义的标签 div 、span 等也能实现相同的效果，但是可读性就差了很多。也许有同学觉得可读性没有变差啊，那是因为我们当中很多人平时就没有使用语义标签的习惯，全都是 div。
由于 html 是标记语言，是声明式写法，不具有可编程性，逻辑表达能力不强。html 标签就像其他可编程语言例如：Java 、C 、Javascript 等的变量，如果一位程序员随意给变量命名，代码的可读性会非常差，后期维护成本也会非常高。
SEO
由于绝大多数网站的域名难以记住，很多人上网都是通过门户网站上网。但是，搜索引擎出来以后，使用搜索引擎上网越来越成为一种趋势。搜索引擎可以根据你输入的关键字，直接搜出相关网站和内容，免去人工一个一个去查找。
可是搜索引擎是如何知道网站是我们要找的内容呢，搜索引擎派出爬虫会时时刻刻的去访问网络上的各种网站，当它获取到一个个网站的 html 文档，会根据文档头部内容里面的 meta 数据判断出网站类型以及内容，并保存到数据库。（恶意诱导爬虫另当别论）
seo 重要吗？当然非常的重要。seo 能给网站带来流量，流量就像网站的血液一般，没有访问量，网站就等于不存在。seo 现在已经成为了互联网的一个垂直行业。做得好的，年入百万不是梦。但是，seo运营并仅仅包含这些。
可访问性
一个好的网站应该尽可能让更多的人无障碍浏览。例如盲人借助屏幕阅读器，也可以上网购物。如果网站的购物车按钮是用 div 写的，那么屏幕阅读器识别起来会非常的困难。我们为什么要让盲人也可以上网呢，这是一个非常有意思的问题。因为我们每天要花许多的时间用手机或其他设备浏览网页，万一以后眼瞎了，我们以后还可以冲浪啊。（不仅如此，这个世界上还有盲人游戏、盲人程序员）
常见HTML标签语义关于 html 标签语义的讨论和文章，已经数不胜数，也有很多网站开发人员想竭尽全力去遵守，可是一旦到了开发的时候，就想不起该用什么标签了。于是，就开始挠头皮，时间久了，就秃了。
下面列举一些标签的用法：
article: 翻译过来就是文章的意思，其内容应当是一篇独立完整的文章。可以是杂志、报纸、技术或学术文章、论文或报告、博客或其他社交媒体文章。article 可以嵌套，但是其内容必须是相关的。每个 article 都应该有一个标题（h1～h6）。
section: 段落。比如一篇文章（article）的片段。每个段落应该有一个标题（h1～h6），当section 作为 arcticle 的子元素时，标题字号不要大于文章的标题（否则看起来很怪异）。也不建议对 section 使用样式或者作为脚本切入点（大致意思，就是不要用js操作它），应该使用 div 来替代它干这些事。它和 p 标签有区别。我们平时写文章换行、起头空两个字，这个表示一个段落，可以用p 表示。而 section 可以是一个或多个 p 段落。这几个段落表达的意思相近或者构成一个完整的意思。类似于中小学语文课，老师让学生分段一样。
nav: 导航块。比如包含跳转到其他页面或者本页面的链接。nav 的内容可以是列表也可以不是。例如：
不过，在网站的底部一般都有很多链接，例如地址、联系方式等。这个时候一般没必要用 nav。
aside: 与当前位置段落相关的独立内容。例如相关文字、段落、广告、导航
h1 ～ h6: 重要程度不一的标题。
header、footer: body、article、 aside、 nav、 section都可以有一个头部或者脚部。header 通常用来包裹顶部的搜索框、目录、logo等，也可以包裹标题 h1 ～ h6，但不是必须的。
figure、figure-caption: 两个结合使用，可用于注释插图、图表、照片、代码列表等。例如：
Listing 4. The primary core interface API declaration. interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequencedata); void initSelfDestruct(); }
div: 没有任何语义。可以用来包裹一系列相关的子节点，以及将相关内容定位布局。
ol、ul、dl: 前面两个使用更为平常，分别是有序列表和无序列表。dl 有点像二维的无序列表。例如：
blockquote、q: 都是引用的意思。一篇文章里面引用了另一篇的内容。如果需要展示引用的地址或者相关信息，可以配合使用 cite 标签。不同的地方是，blockquote 将包含 cite 标签在底部；q 引用内容更短小一些，像短语或者词语，且 cite 会作为其兄弟节点出现在它前面。虽然 q 的表现与双引号一样。但是，却有不同的使用场景。例如：说过的话，可以用引号包裹强调，可能不适合 q。
s、del: 两者默认外观差不多，都有中贯线。但是， s 表示没那么重要了，而 del 意味着已经废除。
strong、em: 两者都有加强的意思。strong 着重强调相关内容，而 em 强调的是语气，像英语口语中的重音。
i: 外来或者专有名词，或交替出现的心情或者声音等情景。前半句比较好理解，后半句比较难理解。先看一个例子：
雷曼开始睡觉了.
这艘船周二离港的, 他梦见. 船上有许多人, 其中有一个叫凯莉的公主. 他看着凯莉，日复一日，希望她能够注意到他，可是，她从来都没有.
终于，有一天晚上，雷曼鼓足了勇气对她说——
这时，一段火警发出的报警声把雷曼吵醒了.
上面的例子，雷曼睡觉和醒来是现实的描写，而梦境是虚拟的，是另一种场景，都用 i 扩起来了。有时候 i 可以被其他标签替代，我们可以 em 表示语气的不同，用 dfn 包裹那些外来或者特殊意义的名词。
b: 强调，引起注意，但不一定是重要的，对此，无须做出任何解释。比如，搜索高亮、一段文字的开头。下面是一个反例：
注意! 不要在巴比纳吐口水!
这里更适合用 strong。
u: 很难辨认（发音）、拼写错误或者中国名字。
time: 与时间相关的内容，例如时间、时区等。
code: 代码片段。
var: 数学或者编程及其他地方用到的变量。例如：
x的值是5
samp: 表示一个例子或者对计算结果输出的引用。
span: 与 div 一样，也是没有任何的语义的。可以用来包裹行内元素或者文本，进行样式改造。
未完......
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53823.html
摘要：可能一些有心的开发者会把的写的语义明白些，比如导航栏的用，边栏的用。 0. HTML5中最看重的理念语义化相比HTML有什么区别？ 在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容，这里搜集整理了一些语义化标签方面的问题和解答，以供大家参考。 语义化这个概念应该说是伴着HTML5应运而生，那么什么是HTML5中所谓的语义化？ 简单来说就是：描述...
摘要：代码示例语义化语义化语义化语义化语义化年月日小维语义化标签包括还有等。而没有语义化的元素如则推荐使用。语义化包含了标签语义化和命名语义化。 什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
阅读 2953·2021-11-17 09:33
阅读 3118·2021-11-16 11:52
阅读 481·2021-09-26 09:55
阅读 2974·2019-08-30 15:52
阅读 1312·2019-08-30 15:44
阅读 1257·2019-08-30 13:59
阅读 794·2019-08-30 13:08
阅读 1156·2019-08-30 10:50
