8個你沒用過的HTML標簽
在現今的網頁中,使用語義化標簽能夠帶來很多好處,但是,語義化到底是什么呢?為什么越來越受到重視呢?
語義化是指使用合理的HTML標記以及其特有的屬性去格式化文檔內容。通俗地講,語義化就是對數據和信息進行處理,使得機器可以理解。語義化不關注頁面的外觀,而是關注頁面的內容和結構,良好的語義化能夠幫助人和機器更好的理解內容和它的上下文。
語義化的(X)HTML文檔有助于提升你的網站對訪客的易用性,比如使用PDA、文字瀏覽器以及殘障人士將從中受益。對于搜索引擎或者爬蟲軟件來說,則有助于它們建立索引,并可能給予一個較高的權值。同時,使用語義化可以減少很多不必要的代碼。
既然語義化有這么多的好處,那么如何使HTML語義化呢?一個最好的方法就是,把通用的HTML標簽替換為富有表現力的HTML元素,下面介紹八個你可能沒有用過的HTML標簽。
<q>標簽
和<blockquote>一樣,<q>用于引用文本,瀏覽器通常在引用的內容外面添加引號。那么,為什么不直接使用引號呢?因為引號并不總是表示引用,有時候引號也用作強調或特定的名稱等。
<i>和<b>
以前,<i>和<b>是被用作識別斜體和粗體文本。當內容和表現分離的思想廣為傳播后,<i>和<b>就讓我們覺得有點難受了,因為它們代表的是文本如何顯示,而不是文本的表現含義,取而代之的是<em>和<strong>標簽,它們代表強調文本和強烈強調文本。
但是,在HTML5中,<i>和<b>被賦予了新的語義含義。<i>用于表達特定的語氣或某種類型,而不只是在布局中呈現樣式。而在HTML5中,<b>包含的內容會被視為重要部分,并呈現為粗體。
<abbr>標簽
<abbr>用于縮寫。在文本需要縮寫的時候使用會非常方便,<abbr>有一個可選的title屬性,它的值為未縮寫的文本。通過對縮寫詞語進行標記,您就能夠為瀏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器提供有用的信息。
XHTML
1 2 3 4 5 6 |
<abbr title="laugh out loud">lol</abbr> <abbr title="I don't know">idk</abbr> <abbr title="got to go">g2g</abbr> <abbr title="talk to you later">ttyl</abbr>
|
<time>標簽
讓我們先看一個典型的本地化問題:日期。在美國,2014年4月8日用04/08/14表示。在英國,用08/04/14表示。在荷蘭,用08-04-14表示。在俄羅斯,用08.04.14表示。這樣就導致機器很難閱讀。<time>標簽語序你使用機器可讀的格式表示日期和時間,比如:<timedatetime=”2014-04-08″>04/08/14</time>,這樣,無論它被如何格式化,HTML解析器都可以使用這個來確定確切的時間,還可以這樣用<time datetime=”2014-04-0822:00″>04/08/14 at 10 PM</time>。
<mark>標簽
曾經你是否寫過這樣的HTML代碼:
XHTML
1 2 3 4 5 |
<p> Three hundred pages of boring, useless text. <span>The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff… </p>
|
好了,現在你不需要再這樣寫了,HTML5引入了<mark>標簽,它表示突出顯示的文本,比如:
XHTML
1 2 3 4 5 6 7 8 |
<!DOCTYPE HTML> <html> <body> <p>Do not forget to buy <mark>milk</mark> today.</p> </body> </html>
|
<input>標簽
也許你已經用過<inputtype=”text” />,<inputtype=”submit” />或者<inputtype=”hidden” />。但是,你用過其他的類型嗎?在HTML5中,<input />可以用于更多的類型:
tel
number
range
date
time
search
color
這些類型的不錯,但是使用前一定要看看瀏覽器是否支持,某些類型還沒有得到所有主流瀏覽器的支持。
<menu>標簽
曾經你是否這樣定義過一個菜單:
XHTML
1 2 3 4 5 6 7 8 |
<ul> <li>New</li> <li>Open</li> <li>Save</li> <li>Quit</li> </ul>
|
現在,你也不需要再這樣寫了,<menu>就是專門為定義菜單導航而設計的,<menu>中的內容會表現為一個無序列表它的type屬性可以設置為popup或者toolbar,如:
XHTML
1 2 3 4 5 6 7 8 |
<menu type="toolbar"> <li>New</li> <li>Open</li> <li>Save</li> <li>Quit</li> </menu>
|
推薦文章
2025-01-18
2024-11-28
2024-11-09
2024-10-25
2024-06-25
2024-01-04
2023-11-06
2023-10-30
2023-10-13
2023-10-10
穩定
產品高可用性高并發貼心
項目群及時溝通專業
產品經理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽堅持
10年專注高端品質開發