简单讨论HTML语义化（语义化标签）

2024-04-27 15:12:55

字体：大中小

来源：转载

供稿：网友

随着WEB标准在国内的不断普及，结构表现行为、分离、模块化、语义化、优雅退化等概念也成为考核一名前端人员对WEB标准理解的重要条目，其中，由于SEO背后的商业价值影响，“语义化”得到了突出的重视。

I、什么是HTML语义化

” 语义化“指的是计算机在更少的人类干预下能够收集和分析信息，让网页能够被计算机理解，简单点就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让网络爬虫和计算机更好地解析。通俗点讲就是：“不要把水果当成蔬菜”。下面是粗浅的实例：

我们应该水果当水果，蔬菜当蔬菜是吧！！！

注：以上语法错误的，这样只是更能生动地理解什么是“语义化”。

II、语义化的意义（为什么要语义化）

文档结构--为了在没有CSS的情况下，页面也能很好地将内容结构、代码结构呈现，并选用最符合内容意义的标签，多推敲内容的意义而不是仅仅根据页面效果图做出判断。命名规则--例如title、alt用于解释名词或解释图片信息、label标签的活用，对于ID和Class的规范的命名方案，网上时有出现，总体的原则还是根据内容的意义来做命名，语义化的命名优势显而易见。SEO--有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重。设备解析--方便其它设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；便于个人和团队维护--语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

III、如何实现语义化（写HTML时应该注意什么）

尽可能少的使用无语义的标签div和span；在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利。不要使用纯样式标签，如：b、font、u等，改用css设置，更好得实现内容、样式分离。需要重点突出、强调的文本，可以包含在strong或者em标签中（尽量用CSS设置），strong默认样式是加粗（不要用b），em是斜体（不用i）；表单域要用fieldset标签包起来，并用legend标签说明表单的用途。每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for="inputld"来让说明文本和相对应的input关联起来。