如何理解HTML结构的语义化

╰半夏微凉° 2024-04-17 16:09 57阅读 0赞

### 如何理解HTML结构的语义化 ###

*  语义
 *  HTML语义化背景
 *  什么是语义化?
 *  为什么要使用语义化标签?
 *  如何语义化
 *  写HTML代码的时候要注意什么?
 *  例子
 *  参考

# 语义 #

语言所蕴含的意义就是语义(semantic)。简单的说，符号是语言的载体。符号本身没有任何意义，只有被赋予含义的符号才能够被使用，这时候语言就转化为了信息，而语言的含义就是语义。语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。[百度百科:语义][Link 1]

在程序中, 语义 指的是一段代码的含义 — 例如 “运行这行代码会产生怎样的影响?”, 或者 “这个HTML的元素有什么作用，扮演了什么样的角色” (不只是 “它看上去像是什么?”。)

例如,“h1” 元素是一个语义化元素, 充当了“这个页面中最高级别标题功能“的角色 (或含义) 。

<h1>This is a top level heading</h1>

一般情况下，它将会被赋予一个很大的字号尺寸从而使它看上去更像是一个标题 (虽然你可以把它格式化为任何你想要的样式), 但是更重要的是它的语义会被在很多地方以不同的方式被使用到， 例如搜索引擎会把它包含的内容作为一个重要的关键词，从而影响这个页面在搜索结果中的排序 (参见SEO),而且屏幕阅读器会使用它来帮助视障用户更好的使用这个页面。

另一方面，你可以通过样式（CSS）来让任何的元素看上去像是一个最高级别的标题，就像下面所展示的方法一样：

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

这将会把这个元素渲染得像是一个最高级别的标题，但是它的值没有对应到最“最高级别标题”这一语义，所以在此之上，它不会获得更多额外的描述（只是一个普通“span”元素而不是“最高级别标题”这一语义）。所以在恰当的需求下使用恰当的HTML元素是一个不错的主意。[MDN文档][MDN]

# HTML语义化背景 #

随着互联网的发展，WEB也承载越来越多的信息（图片，声音，视频等），人们开始用机器来处理网络信息，就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。

# 什么是语义化? #

通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构，在去掉或样式丢失的时候依然能让页面呈现清晰的结构。

# 为什么要使用语义化标签? #

1.  清晰的页面结构  
    去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
2.  有利于 seo 优化,利于被搜索引擎收录(更便于搜索引擎的爬虫程序来识别)  
    利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
3.  方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。  
    PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对 CSS的支持较弱),使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。
4.  便于团队开发和维护  
    W3C 给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

# 如何语义化 #

# 写HTML代码的时候要注意什么? #

1.  根据文档上下文结构合理的选用最适合表达当前语义的标签；
2.  尽可能少的使用无语义的标签div和span；
3.  不要使用纯样式标签，如：b、font、u等，一切表现改用css设置；
4.  h标签的使用应该根据重要性逐级递减，没有断层。并且一个页面只能有一个h1；
5.  提高关键词密度，如图片替换alt，链接说明title；
6.  正确使用内容容器，如段落p，列表ul, ol, li, dl, dt, dd；
7.  需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
8.  使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

# 例子 #

打开淘宝页面可以清楚的看到整个页面中只有一个<h1>标签。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70]  
nav部分的标题用了<h2>，逐层递增；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 1]  
尽管这些东西都是用div+css就能搞出来的，但是它还是专门使用了相应的语义化标签来强调作用。

# 参考 #

1.  [谈谈对HTML语义化的理解][HTML]
2.  [百度百科 语义][Link 1]
3.  [HTML5语义化][HTML5]
4.  [对HTML语义化的一些理解和记录][HTML 1]

[Link 1]: https://baike.baidu.com/item/%E8%AF%AD%E4%B9%89
[MDN]: https://developer.mozilla.org/zh-CN/docs/Glossary/%E8%AF%AD%E4%B9%89
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7e7d259fd5da4453aaebf219a2d8fa22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/09344804636347f2b3e9d0863c2afdf9.png
[HTML]: http://ju.outofmemory.cn/entry/226311
[HTML5]: https://www.w3cplus.com/html5/semantics-tags.html
[HTML 1]: https://juejin.im/post/5ae029bcf265da0b7155f15d