什么是语义化
其实说到语义化的问题，显而易见是有段不那么语义化的历史的。
最早的时候，前端并不是一个细分的岗位。通常由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代码，让你的团队维护更轻松。
那些被滥用语义化标签
很多语义化标签有自带的样式，被用来做不正确的事情了：
-
p：一些开发者用<p> </p>来为标签之间增加额外的空白，但其实应该用CSS的margin/padding来实现； -
ul：一些开发者向<ul>中添加文本来达到文本缩进的目的，这种做法严重违反语义化，<ul>中只应含有<li>标签； -
<h1>~<h6>：这个标签用于表示标题，而一些开发者利用该标签实现文字的加粗、字体放大等目的，实现方式应以CSS的font-weight和font-size为佳； -
blockquote：该标签可以实现文本缩进，但该标签从语义上来说，应该用于展示应用内容。要实现缩进，请选择CSS的margin属性代替。
一个没有使用div标签的页面（图片来源于网络）
易混淆的语义化标签
i和em：
i是italic（斜体）的缩写，它的出现不会改变语义。通常在一段普通文本中，因为某种原因，部分内容与正常文本不同（如专业术语、外语短语等），此时会用i来包裹特殊内容。
一段文本中，如果插入了语言不同的专业术语，需要在i标签中加入lang属性作为注解。em是emphasize（强调）的缩写，表达对文本内容的强调，在语义上来说，位于句子不同位置的强调，会对语义带来变化。
由于i和em的表现都是斜体，因此会造成混淆，区分的关键在于语义是否被改变。
但需要注意的是，<em>并不适用于需要传达重要性的内容，传达重要性的语义应该使用<strong>。更具体一点则是，<em>强调句子中的重要内容，<strong>强调在整个html中的重要内容。
b和strong：
b是bold（粗体）的缩写，它的出现不会改变语义。strong也是加粗的表现形式，但它用于强调被包裹的内容在整个html页面的重要性。
无论从何种角度来说，违背语义化的标签，都应该让它消失在历史的长河之中。
