最近在做百度前端技术学院的基础题,HTML 和 CSS 部分,我发现一个问题,我还是习惯于嵌套一堆 div,然而 HTML5 已经定义了很多新的具有明确语义化的标签,大家也都在倡导使用语义化标签,所以想写一写关于 HTML 标签语义化的东西。
什么是标签语义化
这是标签语义化的定义:
首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用 tag 的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显 Hx 系列看起来很像标题,因为拥有粗体和较大的字号。
<strong>
,<em>
用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
简单来说就是我们要让我们使用的每个标签都拥有具体的意义,我们一眼看去就知道这个标签是什么意思,比如<header>
标签,它的意思是头部;<nav>
标签,全拼是 Navigation,导航的意思; <li>
标签,list, 列表的意思。HTML5 就是要让我们去用这些标签,而不是一味的用<div>
,用 CSS 来修饰。
这是我常写的 header 部分:
<div class="public-header">
<div class="header-logo"></div>
<ul class="header-nav">
<li>
<a href="#">导航链接四</a>
</li>
<li>
<a href="#">导航链接三</a>
</li>
<li>
<a href="#">导航链接二</a>
</li>
<li>
<a href="#">导航链接一</a>
</li>
</ul>
</div>
这是非常不符合语义化的,我应该用 HTML5 的新标签<header>
。
为什么要标签语义化
- 当只有 HTML 页面时,没有 CSS,我们仍然可以很清晰的看懂页面的 DOM 结构
- 团队维护,当团队来 review 代码或者重构时,增强代码的可读性,更利于维护
- 有利于 SEO,搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重
- 提高用户体验,比如 title 和 alt 等用来解释内容信息
一些常用的具有语义化的标签
<header>
头部标签,用来写网页最上方的公共头部,也就是页眉。
<header>
<h1>文章一级标题</h1>
<h2>文章二级标题</h2>
</header>
<nav>
标签,用来写导航,一般写在<header>
标签里面,内部用<ul>
无序列表。
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<article>
标签,当我们要写网页文章的主要内容时,要用到这个标签。
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
<address>
标签,定义文档作者或拥有者的联系信息。
如果 <address>
元素位于 <article>
元素内部,则它表示该文章作者或拥有者的联系信息。
通常的做法是将 address
元素添加到网页的头部或底部。
<address>
本文作者<br />
联系方式<a href="#">Email</a>
</address>
<footer>
标签,整个网页的页脚部分,一般来写文章版权信息等。
<footer>
<p>版权所属@***</p>
<p></p>
<footer></footer>
</footer>
所以我们以后怎么写
- 尽量减少无意义的 div,换用具体意义的标签;
- 每个 input 标签对应的说明文本都需要使用 label 标签,并且通过为- input 设置 id 属性,label 标签使用 for 属性关联 input 标签;
- 尽量使用 strong 和 em 标签,不要使用 b 和 i;
- 有待补充
总之,当我们写 HTML 页面时,首先应该想到的是怎么简化 DOM 结构,使页面更简单,更可读。
标签语义化是一种艺术。