Web语义化指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。
语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。
简单来说就是利于 SEO，便于阅读维护理解。
总结：
- 正确的标签做正确的事情
- 页面内容结构化
- 无CSS样子时也容易阅读，便于阅读维护和理解
- 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO
html 语义化标签
HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
代码示例：
<html>
<body>
<article>
<header>
<h1>h1 - WEB 语义化</h1>
</header>
<nav>
<ul>
<li>nav1 - HTML语义化</li>
<li>nav2 - CSS语义化</li>
</ul>
</nav>
<section>
section1 - HTML语义化
</section>
<section>
section2 - CSS语义化
</section>
<time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
<footer> footer - by 小维</footer>
</article>
</body>
</html>
html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。
CSS语义化
CSS语义就是class和ID命名的语义。class属性作为HTML与CSS衔接的纽带，其本意是用来描述元素内容的。指用易于理解的名称对html标签附加的class或id命名。如果说HTML语义化标签是给机器看的，那么CSS命名的语义化就是给人看的。良好的CSS命名方式减少沟通调试成本，易于理解。
CSS命名首先要满足W3C的命名规范和团队的命名规范。其次是高效和可重用性。
就好像.main/.sidebar会比.left_content/.right_content的class命名灵活性更好。
<!-- 以表现为中心 -->
<div class="ft margin10">
<span>用户名：小维</span>
<div>
<!-- 以信息为中心 -->
<p class="user_info">
<em>用户名:小维</em>
<p>
网友评论