语义化 html 是什么? 有什么意义?
所谓语义化 HTML, 就是从代码层次表达程序员的想法思路, 同时描绘出网站页面的结构:
与同为人类的程序员沟通, 帮助程序员快速掌握当前代码这一点其实是可以通过注释来实现的, 不过用上语义化 HTML 多多少少可以省点注释, 哈哈
与同为代码构筑的系统 (例如残疾人士阅读器以及搜索引擎爬虫等) 沟通, 帮助其快速准确达到目的由于这类系统与人类的智能相比起来实在有限, 因此需要协定好通过什么样的方式来进行沟通, 而 W3C 的决议就是语义化 HTML 的标准了
最近在恶补前端基础时, 碰到这一个知识点, 发现市面上的资料大多杂乱, 而且往往只能意会而不能言传, 很难找到其中有什么实用的价值, 因此特写此文, 不妄求全面剖析, 只求实用至上
文档章节类 HTML 标签
文档章节类 HTML 标签能体现网页的结构, 因此也拥有最多的语义化 HTML 标签
<article> / <section>
这俩标签的语义比较相像, 都是表示文档中的一个独立区域(独立单元), 其中还可以从结构上拆分成 < header> / <footer > 等部分 这俩标签比较起来的话,<article > 比 < section > 要大一级:
<article > 中可以包含 < section>, 举个例子: 一篇博客文章的下方或侧方一般会有相关文章的列表, 那么, 这一整块 HTML 就可以用 < article > 给包起来, 而相关文章的那一小块 HTML 则可以用 section 来表示; 再举个例子, 比如说文章的版权信息, 也可以用 section 来表示
<article > 中可包含 < article>, 比如说: 一篇文章以及这篇文章的用户评论, 整块 HTML 可以用 < article > 来包起来, 而用户评论从逻辑分析起来也是从属于这篇文章的, 因此也可以用 < article > 包起来并归到文章的 < article > 之下
<section > 之下不能再放 < section > 了, 这从侧面表示这是最小一级的独立单元标签
<article > 一般用于详细内容, 因此一般一个页面只含有一个顶级的 < article > 而相反,<section > 的用途更广泛一些, 除却详细内容外都可以用 < section > 来进行包裹, 比如说: 网站首页上, 可以利用 < section > 来展示不同分类 / 栏目的文章列表
<header> / <footer>
这俩标签性质比较类似, 所以放到一起来比较: 一个放头部, 一个放底部 乍一看, 觉得这俩标签就是网页的页头 (一般包含网站 LOGOBANNER 顶级导航等) 和页尾 (网站本身的信息, 包括版权信息联系方式等), 但实际上这俩标签的应用范围远不止于此, 完全可以作为其它独立单元(<article>/<section>/<aside>/<nav > 等) 中的一部分, 比如说下面的这个文章栏目, 红色框住的部分可以用 < header>(可以考虑里面包含个 < nav>), 而蓝色框住的部分就可以用 < footer > 了
又比如说一篇文章, 文章的标题 / 作者 / 发布时间等信息可以使用 < header>, 而文章的版权信息参考文章列表等则可以使用 < footer>
<main>
既然提到 < header> / <footer>, 就不得不提 < main > 了 < main > 望文生义, 就是整个页面的主体部分跟 < header> / <footer > 不一样, 一个页面只能有一个 < main>, 不能放进其它独立单元里 <main > 仅包括一个页面最核心的内容, 比如说一篇文章, 其它旁枝末节, 比如搜索栏菜单等内容不应被包含其中
<aside>
<aside > 一般表示页面主体内容以外的侧边栏, 比如上文提到的相关文章, 又或者是作者个人资料, 如果是这些情况的话, 一般会被包含在 < article > 中另外,<aside > 也可以表示一些工具功能, 比如说分享文章回到顶部等功能
<nav>
<nav > 表示网站的导航, 但不一定所有的导航都需要用 < nav > 来实现, 建议仅用来实现比较重要的导航, 例如网页页脚的链接列表, 直接用 < footer > 即可另外, 每个页面可以有多个 < nav>
<h1> - <h6>
<h1> - <h6 > 表示标题, 共有 6 级, 其中 < h1 > 的权重最高,<h6 > 的权重最低, 其它的则依次递减一般来说,<h1 > 需要分配给网站名 / LOGO, 如果有设置二级域名, 也可以分配给分站的网站名 / LOGO 对于搜索引擎来说,<h1> - <h3 > 是了解网页的重要途径, 因此一定要恰当地分配, 比如: 给文章的标题用上 < h2>, 给文章中的各个小标题用上 < h3>
文本级别语义 HTML 标签
文本级别语义 HTML 标签数量不少, 但我认为有实用价值的不多
<a>
<a > 表示一个通向其它页面或当前页面其它位置的入口, 这是一个历史悠久的语义化标签, 同时也是搜索引擎的基础, 想必大家都很熟悉了, 因此这里不作详述
<p>
<p > 表示一个段落, 这也是一个悠久的标签了从语义上来说, 我更倾向于使用 < p > 来表示一段纯文本, 而不是利用 < p > 来呈现某个样式
<em> / <strong>
这俩标签都是用来强调某个词 / 句, 从语气上来说,<strong > 比 < em > 的语气更重, 也就起到更强的强调作用 据说, 这俩标签是用来在语义上取代 < i > 和 < b > 那么,<em > 跟 < i>, 有什么不一样呢? 答案是,<i > 现在已经不用来表示强调, 而仅仅只是把一些专有名词 (比如人名书名等) 跟普通的字词区分开来 < b > 的情况与 < i > 类似, 也不再表示强调了, 从某种程度上来说已经失去语义了, 仅仅作为完成 CSS 样式的辅助标签
<time>
<time > 用来表示 24 小时制时间或者公历日期, 若表示日期则也可包含时间和时区对于 < time>, 尽量用机器能识别的时间格式, 而不要用一些模糊的表达, 比如说一小时前两天前等
组合型 HTML 标签
<figure>
<figure > 表示一段富文本, 可以是一个文章插图一段代码一个表格, 通常搭配 < figcaption > 来表述这段富文本的描述 / 标题, 当然, 一个 < figure > 下只能有一个 < figcaption> 我倒是想到了 < figure > 的一个典型运用, 那就是瀑布流文块:
结构化数据
这一块在 SEO 领域相当重要, 根据目前已经拟定好的一些规则, 你可以明确地标明某页面主体的各个属性 举个例子: 一个商品的详细信息页, 用普通的语义化来表示, 大概只有商品的名称可以进搜索引擎的法眼; 但自从有了结构化数据, 可以通过某些标签及属性, 指明商品的价格供应商实物图等内容; 搜索引擎获取到该商品页的各个属性后, 会在搜索结果页面直接呈现出来, 另外在排名上也会有所偏重 这方面的内容很多, 建议还是参考各大搜索引擎的优化指南, 毕竟各搜索引擎对这结构化数据的支持程度不一样这里放出 Google 支持的结构化数据的官网: http://schema.org/
来源: https://juejin.im/post/5a9c8866f265da23741072bf