做前端开发的同学都知道，一个网页的基本组成部分是 HTML，JavaScript 和 CSS。开发人员通常更关注 JavaScript 和 CSS ，实践着各种语言规范和设计模式。对于 HTML 的关注度则明显偏少，只要能做出设计师画的界面就万事大吉了，不怎么去关心 HTML 是不是规范合理。于是下面的情况随处可见：

1.按钮用的是可点击的<div>而不是<button>元素
2.标题用的是<div>而不是标题元素 (<h1>，<h2>等等)
3.<input>相应的文本标签用的是<div>而不是<label>
4.输入框也用绑定了键盘事件的<div>，而不是<input>
看到没？一招<div>走天下！这样有没有问题？好像也没什么大问题，毕竟页面看起来符合设计，也能正常交互。但是你想过没有，如果<div>能解决一切，为什么还需要其余几十上百种标签呢？这就要说到 HTML 的语义化了。
什么是语义化
语义化就是说，HTML 元素具有相应的含义。它用于描述元素的内容或者跟其他元素的关系。在 HTML 里，除了<div>和<span>，基本上都是语义化的元素。
标签名的表义程度也是不一样的，比如<section>比<article>对内容的描述就更模糊。<section>也是语义化的，因为它表明内容应该从属于一个组。而<article>不仅表示它的内容从属于一个组，还是一篇文章。
为了进一步说明语义化的重要性，下面用标题和按钮元素来举例。