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

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【

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

】

大家好，我是IT修真院西安分院第5期的学员阮少凡，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css任务四，深度思考中的知识点——如何理解HTML结构的语义化？

 

 

1.背景介绍

HTML结构语义化，是最近几年才提出来的，以前的html结构，都是一堆的没有语义的冷冰冰的标签。最泛滥的就是div+css,以前的页面，一上来就是一堆的div+css, 

为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方w3c，也在HTML5给出了几个新的语义化的标签。 

2.知识剖析

什么是语义化？

字面意思就是说根据我们所说的话，就能了解其中的含义。

语义化，故名思意，就是你写的HTml结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。

什么是HTML语义化？

首先标签语义化是指HTML，不是CSS, 语义化标签只是HTML，CSS不存在语义化。HTML是标签，CSS是属性。

在最初html里标签的语义，我们看到table,就会知道这是列表，看到p，就知道这是段落，看到img知道是图片，看到input就知道这是一个表单，h1~h6是标题。 机器和人类相比笨多了，但是只要我们设定好程序，上面的标签的意思机器也能读懂。

 但是也有些是无语义化的如div---division并不能表示div标签里面内容的属性和表现样式

 HTML 标签语义化是让大家直观的通过标签(markup)和属性(attribute)来知道其用途和作用。

怎样判断标签是否语义化

去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

写HTML代码时应注意什么？

1.尽可能少的使用无语义的标签div和span；

2.在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3.不要使用纯样式标签，如：b、font、u等，改用css设置。

4.需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

5.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

6.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来

                    

3.常见问题

实现HTML语义化好处有哪些？

4.解决方案

 1.清晰的页面结构。去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。

 2.支持更多的设备。屏幕阅读器会完全根据你的标记来“读”你的网页。更好的支持浏览器的阅读模式等。

 3.有利于SEO(搜索引擎优化)。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

 4.便于团队开发和维护。在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

 5.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

5.编码实战

 

6.扩展思考

b标签，i标签 ，strong标签，em标签的区别

        (b)，(i)标签 是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在HTML4.01中并不被推荐使用。

       (em)、(strong)是表达要素(phrase elements)。(em) （emphasized text）表示一般的强调文本，而(strong) （strong emphasized text）表示比(em) 语义更强的的强调文本。

        在新的HTML5工作草案中：（em）和（strong）仍旧是表达要素(phrase elements)。但这时的（strong）表示html页面上的强调（emphasized text），（em） 表示句子中的强调（即强调语义）

 

 

7.参考文献

参考一：HTML5新标签

参考二：html语义化PPT 

 

8.更多讨论

 

9.结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~