html语义化

写在前面

我刚开始自学前端的时候，是听的燕十八老师的8小时学会HTML网页开发。这个对于零基础的人来说，真的是一个入门的好选择。当时感觉前端好简单的啊，都是div，然后就慢慢走上了前端这条不归路。由于是入门课程，加上视频教程也比较老了，所以当时视频里面在进行网页结构布局的时候，运用了大量的div元素，所以在很长一段时间内，任何的网页布局在我的眼睛里面都是一个个div。但是随着学习的深入，以及见识到更多的优秀的代码之后，我才逐渐意识到除了div很多更加适合的标签应该被我们在网页中应用。

是什么？

html语义化是什么呢？

这个我并没有找到官方的权威解释，对于这个概念，只代表我自己的理解。

html语义化是指：利用适合内容含义的标签，去构建网页布局，让代码更加正确的被理解。

举个例子，当我们在做一个网页的导航区域的内容的时候应该使用<nav>标签，而不是其他的标签。

好处？

那么我们为什么要语义化呢？

可能有的人就说了，为什么一定要多花记忆力去多记一些标签呢？div怎么了？罗老师都说过，又不是不能用！

又不是不能用

答案当然是可以用的，但是能用和好用就是两码事情了。做为一个有追求的前端，必须要追求更好用，而不仅仅是能用。

下面是语义化几个主要的优点：

1. 可以更好的被搜索引擎捕获正确的信息，有利于搜索优化。
2. 让网页的整体结构更加清晰，易读。
3. 有利于团队以及后期的代码的维护。

举一些例子

用特定的标签包裹特定的元素，关于语义化可以从多个方面去分析，而我在此只是针对网页的布局方面的标签去举一些例子 。

• <section>:表示文档中的一个章节
• <nav>:表示只包含导航链接的章节
• <article>:表示可以独立于内容其余部分的完整独立内容块
• <aside>:表示与内容关联度较低的内容
• <h1><h2><h3><h4><h5><h6>:表示六层文档标题。<h1>最大，<h6>最小
• <header>:表示页面或者章节的头部，主要包括logo、页面标题、和导航等
• <footer>:表示页面或者章节的尾部，主要包括版权信息、法律信息、相关网址等
• <address>:表示联系信息的一个章节
• <header>:表示文档中的主要内容

html的语义化，不仅仅包括网页布局方面，还有文字形式、嵌入内容以及交互元素等，这些在MDN上都有详细的介绍。总之，对于页面上的任何一个元素，都应该用最适合它的含义的标签去表达。