HTML标签语义化
什么叫HTML语义化?
用合理的HTML标签以及其特有的属性去格式化文档内容.
HTML语义化的好处
- 优化SEO
更好地支持搜索引擎的爬虫, 使搜索引擎抓取到页面上更多的有效信息
- 对盲人阅读器和其它阅读器友好
- HTML代码的可读性, 可维护性, 开发效率更高(减少规范不一致带来的沟通成本)
- 浏览器们都在推动语义化, 遵循HTML语义化可能会得到更好的展示效果
怎么做语义化?
核心是减少无意义的<div>, 使用有表达意义的标签.
那么<div>用在哪? 用在做容器的时候, 仅仅用来构建外观和结构.
结构(节元素)标签的语义化
遵循HTML的结构标签用法和作用范围
<header>内容区域的头部内容<section>区别于<article>定义一个完整的内容,<section>定义一个独立的小节, 内容相对比较短, 可能会有标题.<section>经常嵌套在<article>中<nav>定义文档的导航链接, 指向当前页面的关键部分, 或者其它页面. 但是不要用于页脚和其它区域转向链接(应该用<address>).<article>包裹一个独立内容区域, 一般包含标题和正文. 允许嵌套. 其实是一个特殊的section.<aside>常用于定义侧边栏, 或者广告. 当被用在<article>中时, 又表示一个特殊的<section>, 包裹一些与当前文章有关的附属信息. 比如名词解释.<footer>常用于定义页脚或某个区域的底部
文本标签的语义化
不同的文本标签, 本质并不是要定义样式, 而是要区分内容.
<span>无语义<a>anchor, 超链接<b>bold, 纯粹吸引注意力, 但不传达重要性, 不加强语气<em>emphases, 起局部强调作用, 声明重点内容, 常用于句子内<strong>全文强调, 程度更高<i>意大利手写体, 在英文文本中, 声明内容的特殊性(不同一般, 奇怪), 但在中文中斜体很少用, 一般用作引用字体图标<q>较短的引文<blockquote>较长的引文<cite>引文的出处<time>定义日期, 加上pubdate属性常表示发布日期<code>代码块<pre>预格式文本, 保留空格和换行符, 等宽字体, 常用于 长 代码块<abbr>缩写名词, 可以在它的title属性中写出全称<dnf>定义一个术语<br>文本内的换行符, 如果是想在页面上实现换行效果, 应该用display属性将其块级化<figure>定义一块独立内容, 该内容被删除不影响周围内容, 一般用于包裹图片, 图表, 音频, 代码等.<figcaption>是它专用嵌套属性, 声明标题.