https://www.cnblogs.com/Lee-ahao/p/6555771.html
WHAT（何为语义化）
很多时候我们写HTML，为了方便都会直接使用div和span标签，再通过class来确定具体样式。网站哪一部分为标题，哪一部分为导航，哪一部分为头部和底部，都只能通过class进行确定，但class命名规范却又没有一套统一的标准，因此导致很多时候无法确定整体网站的结构。
因此，在HTML5出现后，添加了关于页面布局结构的新标签。而在HTML书写过程中，根据不同的内容使用合适的标签进行开发，即为语义化。
WHY（为什么要语义化）
语义化的优势主要在于下面几点：
1.其他开发者便于阅读代码，通过不同标签明白每个模块的作用何区别；
2.结构明确、语义清晰的页面能有更好的用户体验，在样式（css）没有加载前也有较为明确的结构，更如img这一类的，在图片无法加载的情况下有alt标签告知用户此处图片的具体内容；
3.利于SEO，语义化便于搜索引擎爬虫理解，和搜索引擎建立良好的沟通，能让爬虫爬去更多关键有效的信息；
4.方便其他设别阅读（如屏幕阅读器，盲人设备和移动设备等）。
HOW（如何语义化）
语义化大致如下图所示
一般的网站分为头部、导航、文章（或其他模块）、侧栏、底部，根据不同的部位，使用不同的标签进行书写。
表示页面不同位置的标签：header、nav、article、section、footer、aside
表示具体元素的作用或者意义的标签：a、abbr、address、audio、blockquote、caption、code、datalist、del、detail、ol、ul、figure、figuration、img、input、mark、p......
具体太多不详细列了，可以去
http://www.w3school.com.cn/ 查一下
除了页面具体结构不再只使用div进行布局，还有在一些标签的使用上也需要注意，如关于b标签和strong标签的例子。
在w3c中有这么一段话
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。
我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。(页面地址:http://www.w3school.com.cn/tags/tag_phrase_elements.asp)
b标签这是纯粹的样式标签，表明这段文字需要加粗，但strong标签则是语气标签，除了加粗外，在html结构中表示这个是强调的内容。同样道理的还有i标签与em标签。