摘要：主要总结标签语义化方面的内容。的标签都是有语义的。为什么要使用语义化标签由于很强大，无论有没有按照语义选择标签，都可以实现需要的设计。如何确定你的标签是否语义良好去掉样式，看网页结构是否组织良好有序，是否仍然有良好的可读性。
主要总结标签语义化方面的内容。
HTML的标签都是有语义的。下面列出一些常见的标签及其语义：
完整标签列表及更多HTML5标签请参考：
http://www.w3school.com.cn/tags/index.asp
这里提一下，我们常用的列表相关的标签有ol, ul, dl. 那么什么时候用dl， 什么时候用ol ul 呢？
-- 对于重复的条目，如果打乱顺序，不影响语义就是无序列表（ul）；否则就是有序列表(ol).
-- 如果内部带一个term, description的用dl.
比如图片带个文字说明，图片带个问题说明....如此重复的采用dl比较好。
由于css 很强大，无论有没有按照语义选择标签，都可以实现需要的设计。但这也是把双刃剑。事实上，css布局只是web标准的一部分。在html, css, js 三个元素中，hmtl才是最重要的，结构是重点，样式是用来修饰结构的。
so, 正确的做法是：先确定html, 确定语义的标签，再选用合适的css。
此外，搜索引擎是看不到视觉结果的，它看到的只是代码。它只能通过标签来判断内容的语义。如何确定你的标签是否语义良好?
-- 去掉样式，看网页结构是否组织良好有序，是否仍然有良好的可读性。
有个工具很好用，web-developer。浏览器可以安装此插件，开启后，disable all styles 禁用css，可以帮助我们查看页面结构。
常见标签应用场景 一、标题和内容有很多静态页面结构是标题+内容的布局，例如：
在这里使用div + h2 + p 标签的方式要优于全部使用div标签的方式。要记住，div span标签是用来辅助实现设计需求的。在写页面的时候，首先选择语义化的标签，然后配合css设计样式来达到实现设计需求的目的。
二、表单很多场景涉及表单填写：
这里：使用label + input标签的方式要优于 div + input的方式。
同时，表单域要用fieldset标签包起来，并用legend标签说明表单的用途。（fieldset默认有边框，legend也有默认样式，我们可以设置fieldset border 为none , legend display 为none 来兼顾语义化和设计两方面的需求）
此外，label 标签的for属性应该与input 标签的id关联起来。
css布局日益流行，很多人患上了“table恐惧症”，其实table也有自己的语义和用途，它在二维数据展现上是比较好的。
使用table时注意：表格标题要用caption; 表头要用thead, 主体用tbody， 尾部用tfoot. 表头和一般单元格要分开，分别用th, td.
四、语义化标签时应注意的一些其他问题尽可能少地使用无语义标签div 和span；
语义不明显的既可以用p也可以用div的地方，尽量用p；
不要使用纯样式标签，如font, b， u等，改用css设置。语义上需要强调的文本可以使用em strong标签等。
加强“不可见”内容的可访问性
背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。
[1].编写高质量代码-Web前端开发修炼之道 -- 曹刘阳.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50330.html
摘要：代码示例语义化语义化语义化语义化语义化年月日小维语义化标签包括还有等。而没有语义化的元素如则推荐使用。语义化包含了标签语义化和命名语义化。 什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
阅读 2702·2021-11-25 09:43
阅读 2084·2021-11-24 09:39
阅读 1952·2021-11-17 09:33
阅读 2748·2021-09-27 14:11
阅读 1838·2019-08-30 15:54
阅读 3223·2019-08-26 18:27
阅读 1263·2019-08-23 18:00
阅读 1810·2019-08-23 17:53
