html语义化标签详解

什么是语义化标签？

语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用

<p>一行文字</p>
<span>一行文字</span>

如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫更好地解析。
使用语义化标签有诸多好处：

1. 因为像部分标签自带样式如h1系列，p等，使用语义化的标签可以在样式加载不出的时候有基本样式，而不显混乱
2. 语义化标签也有利于SEO，语义化标签可以有利于爬虫抓取到网页，因为爬虫依赖于标签来确定上下文和各个关键字的权重。
3. 语义化标签的实现有利于一些特殊设备的解析，比如盲人阅读器，这为他们浏览网页带来了便利
4. 语义化标签代码可读性良好，便于代码维护

语义化的理解

• 用正确的标签做正确的事情！
• HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

语义化标签的实现？

• 尽可能少的使用div, span等无意义的标签，div和span没有含义，也因此十分适合作为容器标签
• 尽量不要使用纯样式标签如<font><b><u>等，用css替代
• 需要强调的地方，可以使用strong和em，不要使用b
• label for标签的使用，将输入框和对应文字联系起来
• alt除了做图片解释以外，可以作为页面未加载出来的文字
• 使用br增加行间距的行为是错误的，<br />标签主要用于文本内容换行
• 表格的caption,thead,tbody等的使用
• html5新加的语义化标签，如<header>,<aside>,<article>,<section>,<footer>,<nav>等