什么是 HTML 语义化,有什么好处
这是前端面试中,html 最常常面试到的一个问题。什么是语义化?语义化有什么好处?html5 新出了哪些语义化标签?具体怎么语义化?该文问您一一解答。
什么是 HTML 语义化?
言简意赅的讲 HTML 语义化就是使用 HTML 语义化标签。语义化标签就是拥有语义的标签。语义元素清楚地向浏览器和开发者描述其意义。
例如:div、span 都是没有语义的标签,无法通过标签确定信息。像 a、img 等这种有语义的标签可以确定是这一个链接还是一个图片。
HTML5 新出的语义化标签部分:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
使用图例:
语义化的好处和意义?
给用户们看:保证 css 失效时用户仍然可读。之前在使用哪些老浏览器的时候,经常会出现 css 包丢失的情况。如果使用语义化标签,就算包丢失也能知道基本的页面详情。
给开发者看:代码结构更清晰,有助于构架良好的 HTML 结构
给浏览器看:利于搜索引擎检索
有利于不同设备的解析
有利于团队的开发维护
具体怎么语义化?
记住这个口诀对你可能会有帮助:
纯样式的标签不用:b、i、u(结构、样式、行为三者分离是大趋势)
无语义的标签少用:div、span
有语义的标签用对:header 页眉 footer 页脚 nav 目录导航 aside 侧栏
版权声明: 本文为 InfoQ 作者【肥晨】的原创文章。
原文链接:【http://xie.infoq.cn/article/a2a38f96c5e5b40f0964f7778】。文章转载请联系作者。
评论