前端标签语义化---前端入门教程

通过之前的学习，我们可以发现，使用一些不同的标签能够达到相同的效果，这个时候我们应该如何选择要使用的标签呢？

这就需要涉及标签语义化的内容了，根据语义来选择使用的标签。

什么是标签语义化？

标签语义化就是使用标签的时候要根据标签所代表的的含义来使用，不要因为一些效果而随意使用标签。

例如之前学习的p标签和div标签。

在没有设置样式的时候，两个标签的效果看起来一样。

这个时候如果是定义一个段落的话，选择使用p标签而不是div标签，因为p标签的语义就是段落的意思。

标签为什么要语义化？

1、手持移动设备的无障碍阅读

手持移动设备如PDA、智能手机等可能对CSS的解析能力较弱，这时可能就需要更语义的标签来体现一个页面的易读性

2、盲人等一些障碍人士的更好地阅读

屏幕阅读器对不同标签所发出的声音是不同的，使用更语义的标签以能传达不同信息的重要性

3、搜索引擎的友好收录

虽然各大搜索引擎的排名规则不断的再变化，但规则里的正则始终是要匹配标签的，如果能用更语义的标签，蜘蛛爬行能够根据标签的使用来确定上下和各关键字的权重。

4、技术趋势所趋

正如html诞生时的初衷那样，各个标签的本义就是希望能在特定的地方使用合适的标签，而不是去用样式来表现一个不语义的标签。HTML5新增了更多的语义化的标签，原本用来实现的结构，通过Html5的标签我们可以更完美的表现。

5、便于团队项目的可持续运作及维护

语义化的命名能够使我们在多人协作一个项目时更加有序和快捷，而不需要去纠结另一位伙伴的CSS命名是什么意思。如果是个人项目，也便于后期其他同事的修改，语义化的命名时一个项目的可读性更高。