如何理解HTML语义化的？

什么是语义化

其实说到语义化的问题，显而易见是有段不那么语义化的历史的。
最早的时候，前端并不是一个细分的岗位。通常由PHP后端来写HTML，但是他们并不会CSS，于是就用table来进行布局。但我们都知道，table其实是用来展示表格的，这一条就与语义化严重相悖。
后来前端慢慢分离成一个单独的岗位，他们会使用DIV+CSS布局，并且主要利用float和绝对定位进行布局，相比较使用table来布局，稍微符合了语义化。
前端发展到现在，对于整个页面各部分内容，都已经有相对应的标签去展示，比如会用h1展示标题，ul，ol等去展示列表，还有诸如p、ul、section、footer、nav等等标签。

所以语义化，其实就是用恰当的标签，去展示恰当的内容，而非table、div一把梭的方式。

为什么要尽量语义化

通过使用恰当语义的标签，可以让页面具有良好的结构和含义，因此好处也是显而易见的：

1. 更省代码：更少的HTML代码。如果技术的革新不是为了省代码，那将毫无意义；
2. 更清晰的DOM结构：你不再需要些一堆冗余且意义不明的标签，有利于书写css和js；
3. 更有利于SEO：可以提高搜索引擎的有效爬取，提高网站的流量；
4. 可读性：如果不幸网站的样式丢失，清晰的结构依然使你的页面可读性较高；
5. 互用性：没人喜欢维护一坨烂代码，语义化的HTML代码，让你的团队维护更轻松。