面試要求中關於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是表示插入,也有這樣的屬性。
語義化的好處還記得嗎?
語義化是一種默認的標準,是一套大家都應該遵守的規範。想想谷歌公司的代碼書寫嚴格規範和要求,我們還有一段路要走。