前言
HTML5实际上已经被推出9年时间了，HTML语义化也是随着HTML5标准的推出而被人熟知，然而在实际开发中，尤其是在国内，HTML语义化并未得到很好的实际运用，大量网站中依然div是一把梭的情况，这似乎并不影响网站的展示与开发效率，那么我们为什么鼓励HTML语义化的运用呢？笔者会在本文中给出自己的思考。
滥用div的缺陷
在日常的开发中，大部分前端程序员习惯使用div包装几乎所有的页面元素，最多象征性地使用nav这样的标签来进行语义化，而对于页面中的主要内容，尤其当页面结构趋于复杂的时候，大家更乐意直接使用div，然后在class中为当前元素赋予它真正的含义，也就是我们所说的class语义化。
有人会有疑惑，既然使用class语义化就能让开发者明白当前元素的含义，那么何必要重新去学习HTML语义化标签，使用那几十个标签去定义页面结构呢？明明使用class自定义类名能表达出更丰富和详细的信息。实际上，滥用div存在着三个问题：
- 对于开发人员来说，不同的项目存在着不同的代码风格，也就意味着不同的类名，对于新加入的开发者来说，从大量的
div中去找到class类名并了解它的含义是相当繁琐和痛苦的一件事情。 - 对于浏览器来说，浏览器的搜索引擎对网页的爬取与解析中，语义化标签起到了相当大的作用，滥用
div对于浏览器对网页的解析毫无帮助，使得网站在SEO中处于处于劣势地位。 - 对于用户来说，HTML语义化的提出一个重要的目的就是提供网站的使用人群，世界上依然有庞大的身体障碍用户，现代浏览器的无障碍技术就是基于标签的语义化，借助
WAI-ARIA技术，浏览器可以相当程度地解析网站的内容并提供无障碍服务，但是div并没有真正传递有关文档结构的任何有用信息。
什么是HTML语义化
HTML 中，例如，
<h1>(en-US) 元素是一个语义化元素，赋予了它包裹着的文本“这个页面中最高级别标题功能“的角色 (或含义) 。
通过赋予HTML标签具体的含义，我们就实现了HTML语义化，我们只需要给每一个元素一个正确的语义标签，就能享受语义化所带来的各种好处，只有在实在无法找到能够对应上的语义化标签时，我们才使用div作为元素的容器。
语义化的好处
传统的网页书写风格以类名和id名来划分结构：
<div class="container" id="header"></div>
<div class="container" id="main">
<div class="article-section"></div>
</div>
<div class="container" id="footer"></div>
我们在定义页面结构时，也能在CSS为页面设置样式，这种方式对于代码的创作者来说是较为方便的，但在其他方面的缺陷已经在上文中说过。
语义化的书写风格如下：
<header>
<h1>Super duper best blog ever</h1>
</header>
<main>
<h2>Why you should buy more cheeses than you currently do</h2>
</main>
<footer>
Contact us!
<div class="contact-info">this.is.us@example.com</div>
</footer>
语义化的风格对于编程人员提出了一定要求，你在进行结构设计的时候，需要对网页的每一个部分有着充分的理解，才能给它们赋予正确的语义化标签，这对于初次接触HTML语义化的开发者来说是比较痛苦的，你需要去了解有哪些语义化标签以及它们所代表的含义，但一旦你习惯了语义化的书写风格，你所编写的网页代码对于浏览器来说是相当友好的，然后你就能享受语义化所带来的种种好处：
- 良好的代码结构，抛弃掉以类名作为结构划分的方法，使得开发者可以更专注于HTML的结构设计而不是与CSS进行关联，遵循HTML为骨，CSS为皮，JS为灵魂的开发思想,你的代码对于其他开发者来说将会更加清晰。
- 更便于SEO优化，比起使用非语义化的
div标签，搜索引擎更加重视在“标题、链接”等里面的关键字，使用语义化可使网页更容易被用户搜索到。 - 更好的网页无障碍，这里MDN官网给了一个非常典型的例子，对于一篇文章来说，使用语义化标签为文章的不同结构进行设计，浏览器和屏幕阅读器能够完美地理解文章的结构并传达给身体障碍的用户，同时开发者也无需进行多余的样式设计，因为语义化标签已经携带了对应的样式。
<h1>My heading</h1> <p>This is the first section of my document.</p> <p>I'll add another paragraph here too.</p> <ol> <li>Here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>My subheading</h2> <p> This is the first subsection of my document. I'd love people to be able to find this content! </p> <h2>My 2nd subheading</h2> <p> This is the second subsection of my content. I think is more interesting than the last one. </p>
- 屏幕阅读器会在你浏览内容时读取每个标题，通知你标题是什么，段落是什么等。
- 它在每个元素之后停止，让你以任何适合你的速度前进。你可以在许多屏幕阅读器中跳到下一个/上一个标题。
- 你还可以在许多屏幕阅读器中显示所有标题的列表，使你可以像使用便利的目录一样使用它们以查找特定内容。
总结
HTML语义化在大部分人眼中是一种编程规范，其实不然，HTML语义化所带来的好处实际上已足以我们将其视为一项优秀的前端技术，习惯的转变是困难的，对无障碍的重视程度也还有所欠缺，HTML语义化的推广之路依然很长。
