什么是语义化
其实说到语义化的问题,显而易见是有段不那么语义化的历史的。
最早的时候,前端并不是一个细分的岗位。通常由PHP后端来写HTML,但是他们并不会CSS,于是就用table来进行布局。但我们都知道,table其实是用来展示表格的,这一条就与语义化严重相悖。
后来前端慢慢分离成一个单独的岗位,他们会使用DIV+CSS布局,并且主要利用float和绝对定位进行布局,相比较使用table来布局,稍微符合了语义化。
前端发展到现在,对于整个页面各部分内容,都已经有相对应的标签去展示,比如会用h1展示标题,ul,ol等去展示列表,还有诸如p、ul、section、footer、nav等等标签。
所以语义化,其实就是用恰当的标签,去展示恰当的内容,而非table、div一把梭的方式。
为什么要尽量语义化
通过使用恰当语义的标签,可以让页面具有良好的结构和含义,因此好处也是显而易见的:
- 更省代码:更少的HTML代码。如果技术的革新不是为了省代码,那将毫无意义;
- 更清晰的DOM结构:你不再需要些一堆冗余且意义不明的标签,有利于书写css和js;
- 更有利于SEO:可以提高搜索引擎的有效爬取,提高网站的流量;
- 可读性:如果不幸网站的样式丢失,清晰的结构依然使你的页面可读性较高;
- 互用性:没人喜欢维护一坨烂代码,语义化的HTML代码,让你的团队维护更轻松。