面试要求中关于html的要求都有语义化html。那么什么是语义化呢?
我的理解是:可以根据标签名知道标签要涵盖的内容。
先说说语义化的好处吧。
- 可以提高代码的可读性,利于团队维护
- 有利于SEO,让搜索引擎爬虫,更好地理解你的网页.
- 在没有css渲染的情况下,页面能表现的正常
- 利于其他设备阅读设备的解析(如屏幕阅读器,盲人阅读器,移动设备等)
那么怎么写语义化的HTML呢?
- 放弃“div癖”,减少无意义的div和span的使用,高手不断在精简div。
- .在不考虑兼容性的情况下,尽量使用html的新标签,比如
<footer>、<header>、<aside>、<article>
等标签。 - .不要使用纯样式标签,如
<font>、<b>、<u>
标签。
下面我就详细展开吧。
案例一:
<!--未语义化-->
<div id="header">
<div class="h1">前砖攻城师</div>
<div class="h2">搭积木也要玩艺术</div>
</div>
<!--语义化之后-->
<div id="header">
<h1>前砖攻城师</h1>
<h2>搭积木也要玩艺术</h2>
</div>
上则案例就是减少div的使用,能用其他标签就不用div来布局。
案例二(来源大牛博客:Ico_Coco)
为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要。
<table>
<tr>
<td>娱乐项目</td>
<td>项目支出</td>
</tr>
<tr>
<td>聚餐</td>
<td>200元</td>
</tr>
</table>
上面这一段代码就是明显的没有使用语义化标签的例子,为了让它的结构更加清晰,正确的做法如下:
<table>
<caption>支出统计</caption>
<thead>
<tr>
<th>娱乐项目</th>
<th>项目支出</th>
</tr>
</thead>
<tbody>
<td>聚餐</td>
<td>200元</td>
</tbody>
</table>
其中,
<caption>
:表格的标题;
<thead>
:一表格的表头;
<th>
:表的某一列的列头。
是的,标签语义化的目的就是对搜索引擎友好,有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取,这种符合搜索引擎收索规则的做法,网站的推广便可以省下不少的功夫,而且可维护性更高,因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO(search engine optimization)重要的一步,当然关于SEO远远不止如此,后面我会讲。
网站中,文章的标题尤为重要,重要部分的标题应使用<h1>
标签,如果觉得h1标签的样式难看的话,可以使用css代码对其进行优化。其次,不太重要的标题也应使用h2、h3这样的标签,这对网页爬虫是很好的优化,网页爬虫也会比较重视h1的标签。当然,也不可随意使用h1标签,一个页面最好只有一个h1标签。
总结:所以我们要做的,就是语义化我们的HTML标签和属性。
如:
div 语义:Division(分隔)
span 语义:Span(范围)
ol 语义:Ordered List(排序列表)
ul 语义:Unordered List(不排序列表)
li 语义:List Item(列表项目)
1.<hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
,作为标题使用,并且依据重要性递减。<h1>
是最高的等级。
2.<p>
段落标记,知道了<p>
作为段落,你就不会再使用<br/>
来换行了,而且不需要<br/><br/>
来区分段落与段落。<p></p>
中的文字会自动换行,而且换行的效果优于`
。
3.<b>、<em>和<strong>
<b>
标签语义为“加粗”
<em>
标签语义为“强调”
<strong>
标签语义为“更强烈的强调” 而且em 默认用斜体表示,strong 用粗体表示。
当我们知道了这三个标签的语义时,做SEO时就好决定用哪个来强调重要的关键字了,强调用<em>
和<strong>
,纯粹加粗用<b>
。
4.<ul>
标签、<ol>
标签、<li>
标签
<ul>
标签语义为定义无序列表
<ol>
标签语义为定义有序列表
<li>
标签语义为定义列表项目
因此当涉及到列表的项目,应该用<ul><li>
或<ol><li>
(或者是<dl><dt><dd>
来布局),而不是用<table>
或<p>
甚至<span>
。
5.<dl>
标签、<dt>
标签、<dd>
标签
<dl>
标签语义为定义了定义列表
<dt>
标签语义为定义了定义列表中的项目(即术语部分)
<dd>
标签语义为定义列表中定义条目的定义部分
所以,当我们用带标题的列表时,即可采用<dl><dt><dd>
自定义列表实现
6.<span>
标签
<span>
标签的语义为被用来组合文档中的行内元素
(另外应当区分<span>
和<div>
的区别,<div>
是块级元素(block level),而<span>
是行内元素,前者的内容会自动换行,而后者前后不会自动换行
7.<q>、 <blockquote>、<cite>
<q>
标签的语义为用来标记简短的单行引用,Web浏览器会自动识别在<q>
之间的内容
<blockquote>
标签的语义为用来标记那些一段或者好几段的长篇引用
<cite>
标签既可以与<q>
一起用,也可以与<blockquote>
一起用,用来提供引用内容的来源地址。
看一个例子
<p> <cite>
孔子</cite>
曰:<q>
有朋自远方来,不亦乐乎</q>
.`
<blockquote cite="http://www.w3cn.org/">
<p>“我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。”
</p>
</blockquote>
8.<table>、<th>、<td>、<caption>
<table>
标签的语义的为定义 HTML 表格
<th>
标签的语义为定义表格内的表头单元格
<caption>
标签的语义为定义表格标题
9.<button>
标签、<input>
标签、<textarea>
标签
<button>
标签的语义为定义一个按钮
<input>
标签的语义为用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<textarea>
标签的语义为定义多行的文本输入控件
button控件 与 <input type="button">
相比,提供了更为强大的功能和更丰富的内容。<button>
与 </button>
标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
10.<label>
标签
<label>
标签的语义为为input元素定义标注(标记)
11.<ins>, <del>
<ins>
标签的语义为定义已经被插入文档中的文本。
<del>
标签的语义为定义文档中已被删除的文本。
<ins>与 <del>
一同使用,来描述文档中的更新和修正。知道del
,就不要再用<s>
做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。
语义化的好处还记得吗?
语义化是一种默认的标准,是一套大家都应该遵守的规范。想想谷歌公司的代码书写严格规范和要求,我们还有一段路要走。