写点什么

什么是 HTML 语义化,有什么好处

作者:肥晨
  • 2022-11-07
    江苏
  • 本文字数:509 字

    阅读完需:约 2 分钟

这是前端面试中,html 最常常面试到的一个问题。什么是语义化?语义化有什么好处?html5 新出了哪些语义化标签?具体怎么语义化?该文问您一一解答。

什么是 HTML 语义化?

言简意赅的讲 HTML 语义化就是使用 HTML 语义化标签。语义化标签就是拥有语义的标签。语义元素清楚地向浏览器和开发者描述其意义。

例如:div、span 都是没有语义的标签,无法通过标签确定信息。像 a、img 等这种有语义的标签可以确定是这一个链接还是一个图片。

HTML5 新出的语义化标签部分:

  • <article>

  • <aside>

  • <details>

  • <figcaption>

  • <figure>

  • <footer>

  • <header>

  • <main>

  • <mark>

  • <nav>

  • <section>

  • <summary>

  • <time>

使用图例:



语义化的好处和意义?

  1. 给用户们看:保证 css 失效时用户仍然可读。之前在使用哪些老浏览器的时候,经常会出现 css 包丢失的情况。如果使用语义化标签,就算包丢失也能知道基本的页面详情。

  2. 给开发者看:代码结构更清晰,有助于构架良好的 HTML 结构

  3. 给浏览器看:利于搜索引擎检索

  4. 有利于不同设备的解析

  5. 有利于团队的开发维护

具体怎么语义化?

记住这个口诀对你可能会有帮助:

  1. 纯样式的标签不用:b、i、u(结构、样式、行为三者分离是大趋势)

  2. 无语义的标签少用:div、span

  3. 有语义的标签用对:header 页眉 footer 页脚 nav 目录导航 aside 侧栏


发布于: 刚刚阅读数: 3
用户头像

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台:InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者 领域:前端 公众号:农民工前端

评论

发布
暂无评论
什么是 HTML 语义化,有什么好处_11月月更_肥晨_InfoQ写作社区