html语义化

html是一种非专业程序员也懂得编写的超文本标记语言，虽然html看上去很简单，但实际html是典型的“入门容易，精通困难”，那么接下来我们就说说html语义化

语义类标签是什么，使用它有什么好处？

语义类标签其实是大家工作中经常会用到的一类标签，这类标签的特点是视觉表现上互相都差不多，主要的区别在于它们各自表示了不同的语义，比如大家会经常见到的center、nav、p，这些都是语义类标签。

那么我们为什么要用语义呢

现在很多前端工程师写代码，只靠div 和 span就完成页面的布局。这样做行不行呢？行。那这样做好不好呢？额.其实是好的

这是因为在现代互联网产品里，HTML用于描述“软件界面”多过于“富文本”，而在软件里，实际上几乎是没有语义的。比如，我们做了电影展示页，我们是否一定要遵循使用ul标签？再比如说，购票这个按钮，我们是否一定要使用Button？在这里，电影展示页跟文本中的列表，以及购票这个按钮与表单中的Button，已经不是相同的语义，所以，我觉得在“软件界面”的场景中，直接使用div这类标签是好的。

但与此同时，语义化标签也能带来很多好处。

1.语义类标签对开发人员更为友好，增强了可读性，即便是在没有CSS的class，id的时候，开发人员也能够清楚地看出网页的结构，也更为便于团队的开发和维护。

2.除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性变得越来越重要。应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。

不过，不恰当地使用语义标签，反而会造成负面作用。我们都知道ul是无序列表，ol是有序列表，所以很多前端工程师，特别喜欢给所有并列关系的元素都套上ul。

ul多数出现正在行文中间，它的上文多数在提示：要列举某些项。但是，如果所有并列关系都用ul，会造成大量冗余标签。错误地使用语义标签，会给机器阅读造成混淆、增加嵌套，给CSS编写加重负担。

所以对于语义类标签应该是追求正确使用，而不是胡乱套上