本文最初于 2018-09-21 发布于 知乎 https://zhuanlan.zhihu.com/p/45116688 , 后在 《重学前端》 http://gk.link/a/102o0 专栏的学习中, 重新复习整理, 发布于 GitHub https://github.com/ximuli/FED 上, 并计划写一系列前端学习相关的文章. 欢迎 star .
html 语义化
简单来说, 我们可以理解为: 用正确的标签做正确的事情.
例如:
段落用 p 标签, 标题用 h 系列标签, 边栏用 aside 标签, 主要内容用 main 标签. 正确使用语义标签可以带来很多好处.
为什么要关注 HTML 语义化?(为什么要使用语义类标签?)
对人:
增强可读性, 对开发者更友好, 在没有 CSS 的情况下也能较好地呈现网页的内容结构与代码结构, 便于团队的开发和维护.
对机器:
有利于 SEO , 可以让搜索引擎爬虫更好地获取到更多有效信息, 搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重, 有效提升网页的搜索量.
支持读屏软件, 方便其他设备的解析(如屏幕阅读器, 盲人阅读器等), 利于无障碍阅读, 提高可访问性.
一些语义类标签介绍
<header>
用于展示介绍性内容, 通常包含一组介绍性的或是辅助导航的实用元素.
<footer>
- <figure>
- <img src="https://xx.com/xx.png" alt="An awesome picture">
- <figcaption > 这是一张图片.</figcaption>
- </figure>
- <dfn>
- <p>
- <dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
- </p>
- <nav> <ol> <ul>
- <pre>
- 中的内容会保持原有格式.
- <samp>
- 元素用于标识计算机程序输出.
- <code>
- 表示一段计算机代码.
- HTML Reference - A free guide to all HTML elements and attributes https://htmlreference.io/
- (完)
来源: https://www.cnblogs.com/leyili/p/semantics.html