前端优化：语义标签进化史
内容提要
语义标签的应用，在SEO优化中是最为基础的内容，语义标签的发展与进化，是随着HTML和CSS版本的升级而不断进化来的，随着HTML5的普及，SEO语义化的发展也向前大大的迈进了一步。这主要体现在语义标签和微数据的应用上。一个使用语义标签+微数据编写前端代码的网站，在搜索排名与搜索样式展现的丰富性上具有无与伦比的优势。
HTML 4.0：表格布局时代
记得刚上大学的时候，学习网页设计这门课程就是从html4.0开始的，当时用到最多的语义标签就是 h1-h6、p、table、当时的css还没有真正的得到普及，所有样式属性都是写在html代码中的，而且标签是否闭合，也没有严格要求，网格布局系统更是遥不可及的梦想。
当时为了实现两栏或多栏布局只能使用表格套表格的模式进行操作。编写出来的页面代码层级繁多，且不易修改。表格布局的唯一优势是：在不同浏览器中都能得到很好的兼容。时至今日表格布局依然在EDM营销中发挥着不可替代的作用。
div+css：病态的极简风
随着CSS技术的发展成熟，div+css布局逐渐成为了潮流，各种DUV+CSS主题QQ群数不胜数，大家都在一起研究CSS，以及如何用div+css布局取代传统的table布局。典型的例子是利用css的display属性模拟table。
使用这种div+css布局的优势是：从传统的表格布局过度到DIV布局思路转换清晰，且在浏览器大战的年代可以少写很多css hack，大大提升了前端代码编写速度。
但不知从何时起，出现了div+span两个标签走天下的病态极简风。甚至连表格布局时代常用的h标签和p标签都被div所取代了，大家都去研究css了，而忽略了html标签的本质。这其实是一种倒退。
XHTML与web标准：语义标签的萌芽
随着XHTML和web标准的兴起，以及对seo的重视，div+span走天下的局面得到了有效遏制，大家不仅开始研究html标签的语义与应用场景，CSS的命名规范也朝着语义化的方向发展。这主要是因为语义化可以带来如下好处：
代码结构呈现优势:使页面没有css的情况下，也能够呈现出很好的内容结构
有利于SEO:爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
便于团队开发和维护:语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
方便其他设备解析:如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
随着语义标签的出现，ol li 布局，ul li布局，dl dt dd布局逐渐兴起，替代了div这个毫无语义的块儿级元素的布局方法，css也发展出了面向对象 OOP CSS 的编写模式，为了顺应了语义化发展的大趋势，css的文件名及class、id属性命名也开始了其规范化、语义化的进程。
CSS的命名规范是SEOer和前端开发工程师沟通的有利工具，我们可以通过语义化的css属性名称快速的判定html标签使用是否规范，是语义化重构和代码优化中的重要参考。
HTML5：语义化标签时代
在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没有“语义”的标签因为html5的出现消失了。
HTML5语义标签布局结构图
div与span的正确使用方式
div 是一个无语义的块级容器，span是一个无语义的行内容器，当没有其他语义标签可使用时，才会用到，一般用来辅助css实现特殊样式。
语义标签现状
由于前端技术发展迅猛，以及开发时间的紧迫性，前端开发程序员都去研究前端框架了，很可能忽略了语义标签的使用，所以，标签语义化的重任就压在了每一位SEO从业者的肩头，我们应该辅助前端程序员写出：优雅、简洁、易读，有利于搜索引擎抓取的前端代码。
本文仅对常用的语义标签加以说明，更多HTML5语义标签的使用方法请点击查看原文。