深刻理解HTML5標籤

0. HTML5中最看重的理念「語義化」相比HTML有什麼區別？

在以前翻譯的《如何寫出高效率的HTML》一文中提到了一些關於語義化標籤的相關內容，這裏蒐集整理了一些語義化標籤方面的問題和解答，以供你們參考。
語義化這個概念應該說是伴着HTML5應運而生，那麼什麼是HTML5中所謂的語義化？

簡單來講就是：描述內容的含義(meaning)

好比說<p>標籤就是段落的意思，在HTML5中全部的標籤都有它書面上的語義。而沒有語義的標籤在HTML中有，在HTML5中就沒有了，好比<font>標籤。而HTML5又爲了補充HTML如今的不足而加上了一些新的標籤，如<article>、<footer>、<header>等等。而這些標籤的分類叫法也從"塊級元素"與"行內元素"變成了「外圍內容」與「短語內容」。
在HTML5中最基本的理念就是"語義"與"顯示"分離，HTML5代碼中出現的標籤都是讓開發人員或瀏覽器一看就知道是幹什麼用的東西，至於顯示效果那是CSS3（Cascading Style Sheet）須要乾的事情，因此在HTML5中這個兩個好基友終於距離產生了美。
那麼語義化之後對HTML文檔有什麼好處麼？

1. 能夠提高可訪問性與互操做性（兼容性會更好）；
2. 改進搜索引擎的優化；
3. 通常來講可讓HTML文件更小；
4. 讓代碼更好惟護，與CSS3的關係更和諧。

1. HTML5中的<nav>、<article>、<sections>、<aside> 、<footer>這些標籤的理解與用處？

第一，對這個幾個標籤的理解：

HTML5的設計者們能夠說是用心良苦呀，他們認真分析HTML4.0中出來的問題，也就是當下最流行的寫頁面的方式就是"DIV+CSS"，咱們也不難發現只要用到這個就能夠把頁面寫即簡單又漂亮。沒有繁瑣的標籤在裏面，須要什麼功能就去加<div>標籤就能夠了。

而<div>是什麼呢？這個咱們下一個問題詳細說明。問題的關鍵在於<div>沒有任何的語義，也就是說他要乾的事是什麼全憑開發者說了算。這就形成了嚴重的開發規範不統一，也就是說頁面的導航欄是<div>，頁面的邊欄也是<div>，惟一區分它們的就是id。可能一些有心的開發者會把<div>的id寫的語義明白些，好比：導航欄的id用<nav>，邊欄的id用<aside>。這樣的寫法對其餘的開發者看來仍是很好的，由於看到id就能夠知道這個<div>是幹什麼用的了。可是仍是有一大部分的開發者會這麼寫，如：導航欄的id用div1，邊欄的id用div2，這樣的寫法對用戶來講的可能沒有什麼區別，由於開發者知道他們都表明什麼，而對其餘的開發者來講這真的是滅頂之災，用英文來講就是「reading the fucking code」，而對開發者自己可能時間一長也不知道是什麼意思了，可是下次開發的時候他們必定還有人是這麼幹的；

回到正題，通過上面的介紹你們也許已經知道爲何在HTML5引用上面的標籤了吧，就是爲了解決開發規範不統一的問題同時也爲了加強語義，有人也許會問爲何HTML5爲何那麼在乎語義？用了上面的標籤能夠說帶來什麼好處呢？這個答案用一個很是簡單的話來講的那就是：爲了統一規範與新功能的出現。

他們這些標籤功能就是代替<div>功能中的一部分，他們沒有任何的默認樣式，除了會讓文本另起一行外；

第二，這幾個標籤的語義與用法：

• <nav>：標記導航（對應網頁中重要的連接羣就須要用這個標籤）包含在<nav>中間的一般是<ul>無序列表。固然若是是麪包屑連接就需用到<ol>有序列表，只要記住這個語義本身靈活發揮就是能夠了。

  特別提示：

  1. HTML5規範不推薦對有輔助性的頁腳連接用<nav>；
  2. HTML5中不容許將<nav>嵌套在<address>標籤中。

• <article>：文章標記標籤（表示的是一個文檔、頁面、應用或是網站中的一個獨立的容器，原則上來說就是聚合）。

  特別提示：

  1. <article>這個標籤能夠嵌套使用，可是他們必須是部分與總體的關係；
  2. 一樣不能用在<address>標籤中；
  3. 他與<section>標籤容易混淆因此須要注意；

• <section>：區塊定義標籤（表示的是文檔或是應用的一個通常的塊），他通常是有一組類似的主題的內容，通常會包含一個標題。能夠用這個標籤來寫：文章的章節，標籤式對話框中的各類標籤頁等等相似的功能。這裏你會發現他與<article>這個標籤很像對不對？那麼怎麼的開發中正確的應用他們呢？
  其實也很簡單，你就這樣想：若是你的頁面中須要一個單獨的模塊來實現一個單獨的功能，也就是高聚合的狀況，就用<article>，其餘的時候都用<section>。

• <aside>：定義側欄標籤（表示一部份內容與頁面的主體並非有很大的關係，可是能夠獨立存在），用他能夠實現：升式引用、側欄、相關文章的連接框、廣告、友情連接等等。

  特別提示：

  1. 若是使用多個<aside>，標籤應該在主要內容的後面，這樣有利於SEO的搜索與提高可訪問性；
  2. 若是是與文章的主要內容有關係的圖像須要用<figure>標籤而。

• <footer>：頁腳標籤（與<header>標籤對應的標籤），用他能夠實現的功能有：附錄、索引、版權頁、許可協議等。

  特別提示：

  1. 頁腳並不必定是要位於所在元素的末尾，不過一般是這樣的；
  2. 他不能夠放在<header>標籤中，也不能夠相互嵌套，或是在<address>元素中。

2. HTML5通用的容器<div>、<span>在HTML5中的生存含義？

<div>這個標籤在好久好久之前就已經出如今HTML中了，他的全拼是（division）。而在HTML5中的不少的新標籤都是他的功能的統必定義而已，由於<div>自己沒有任何的語義，可是能夠對他增長CSS樣式，這樣就能夠很好的爲頁面作出一些咱們理想中的效果。那麼在HTML5爲何他還存在呢？那就是由於，在某些時候你會發現你用HTML5中的任何一個標籤都不合適你如今須要的語義，因此在這個時候就須要用到<div>這個標籤了。既然說到<div>，那麼也要說說與他相對應的<span>這個標籤，他也是一個沒有任何語義的標籤，起到的功能與做用是和<div>同樣的，只不過用法不同：<div>是塊級的無語義容器，<span>是短語的無語義容器。

<div>的用法相信朋友們用的必定比我熟悉，因此這裏關於他的用法就很少說了，只是針對在HTML5中對<div>的使用我提幾點建議：

1. 若是你以爲用HTML5中的新的標籤比用<div>合適就必定要用新的標籤，由於<div>沒有任何的語義，這個是HTML5所不倡導的；
2. 若是效果須要的話能夠在HTML5新標籤的外面加一個<div>標籤，這樣對HTML中的語義不會產生太大的影響。

3. 元素title屬性對語義的重要性是什麼？

title屬性這個剛一看會不會想到<title>標籤？可是不要弄到錯了，他們是徹底不一樣的東西。平時在咱們開發的時候不多會用到這個屬性，首先說一下它是幹什麼的吧，其實他就是一個具備提示做用的屬性，對於屏幕閱讀器來講能夠爲用戶朗讀文本，因此正確的使用能夠提高頁面的訪問性。

4. HTML5中的新標籤對於寫文本啓到一些重要影響的標籤有哪些？

在寫這個問題的答案以前先說說關於這些標籤的理解與用法：

1. 明確html5的核心思想就是語義，因此無論是什麼標籤就看錶達的意思，而不是看展示的效果；
2. 關於文本的相關標籤能夠適當的想象成是語文中的標點符號這樣能夠方便記意與運用；

明白上面的兩點咱們在來講這些新的標籤的語義與用法吧：
<address>、<figure>、<time>這三個標籤下一個問題中詳細說這裏就先不說了；
<strong>、<em>這個兩個標籤在HTML4.0中就已經有了，可是在這裏仍是要說一下，由於在之前可能不多用到它們由於不多有人去注意語義；

• <strong>表示的是重要的文本（默認爲粗體顯示）——重點是語義上的表達而不是展示的效果這個須要記住哦
• <em>表示的是強調的文本（默認爲斜體）

<mark>標籤是HTML5中的新元素，用來突出顯示文本，它的效果就像是用熒光筆給重點的語句作標記同樣；
<span>標籤這個也是在HTML中就已經有的了，之前的文章也大概的提過一下可是沒有詳細的說明，下面就詳細的說明一下：

1. <span>沒有任何的語義，因此正確的使用方式是須要在沒有其它合適有標籤的時候才能夠用它；
2. 它是短語級別的標籤因此不會另起一行；
3. 同<div>同樣在必定的狀況下能夠添加<span>標籤利用微格式來增長語義；
4. 通常的狀況下須要用CSS來控制它的顯示樣式由於它沒有樣式的展示樣式；

<wbr>一個與<br>很像的新標籤，區別在於它不會強制換行；
<ruby>、<rp>、<rt>這幾個標籤就像是語文中的音標同樣；
<meter>能夠用它作一些測量結果的顯示與投票結果的顯示（如今的問題是瀏覽器對它的支持很差）；
<progress>一樣的一個進度條的顯示，能夠用作一些很好的與用戶交互的效果，問題是瀏覽器的兼容如今也很差。

5. HTML5中<address>、<figure>、<time>標籤的正確用法與注意事項有哪些是你不知道的?

<address>這個標籤是新的，因此用他的人不多。至於正確的用法固然也不多有人去研究它，下面簡單的總結一下：

1. <address>是用來定義與HTML頁面或頁面一部分有關的做者、相關人員或組織的聯繫信息，一般位於頁面底部或相關部份內；
2. 大多數時候，聯繫信息是做者的電子郵件或是指向聯繫信息頁的連接，這個是正確的，不能用來標記「聯繫咱們」中的辦公地點，這是錯誤的用法；
3. 提供的信息要準確，不是說電子郵件的地址的正確性，而是說須要對應上提供信息的人，若是一個頁面中有好多相關的人，那麼提供信息的時候必定要肯定信息準確性，不要張冠李戴；
4. <address>標籤中不能有<h1>~<h6>、<article>、<address>、<aside>、<footer>、<header>、<hgroup>、<nav>、<section>等標籤；

<figure>這個元素是用來引入圖表、圖形、照片等，對應的場景就是像是雜誌中的圖片同樣，在HTML5以前是沒有一個專門的標籤來作這個事的，以前若是實現這個功能就是用沒有語義的<div>標籤；

用法提示：
1. <figure>元素能夠包含多個內容塊，可是隻能有一個<figcaption>（能夠理解成給圖表加標題）標籤；
2. 能夠用<h1>~<h6>來給<figure>增長標題；
3. <figcaption>不能單獨出現，須要有配套的內容一塊兒出現。

<time>能夠經過這個標籤標記一個具體的時間或日期，應用場景一般就是一篇文章的發表時間。

須要注意的是：
1. datetime中的時間最好與<time>標籤中的文本元素日期同樣，寫法能夠不同；
2. 若是這個時間是表明整個文章或是頁面的時間須要添加pubdate屬性；
3. 不要在<time>標籤中使用不確切的時間如：「今天中午」、「上週末」；
4. 若是 使用pubdate屬性須要注意的是要在同一個父標籤下面不要出現張冠李戴的問題；
5. <time>標籤不能在嵌套另外一個<time>標籤；
6. datatime中的時間格式須要是標準的機器可能的時間 如:YYYY-MM-DDThh:mm:ss

其實做爲新的標籤，它們的用法還有不少，這裏只是說了一些最基礎的東西，不過我認爲用會上面全部的東西就能夠說是入門了。

5. 關於<em>、<strong>與<b>、<i>的前世此生？

各位開發過HTML的朋友都知道<em>與<i>、<strong>與<b>它們的展示形式同樣的，一個是斜體一個是粗體，那麼它們在HTML5中是怎麼平相處的呢？下面咱們來重點講一下<b>、<i>的前世此生：

在很早之前，互聯網那時尚未一個叫做CSS的東西出現的時候，爲了區分文本中的重點與特殊的含意的文字<b>、<i>這對兄弟出現了。在它們的幫助下，頁面的文字與用戶之間的交互獲得了提高。
然而好景不長，在互聯網飛速發展的狀況下，很快出現一個叫CSS的東西，它的責任就是用來控制頁面的表現形式的，固然也包括<b>、<i>所表現的形式，因此在HTML4.0與XHTML1中就有開發人員建議廢棄<b>、<i>，取面代之的就是<strong>、<em>+CSS，由於他們有語義性能夠更好的與用戶交互。但是問題並無就此結束，由於在開發的時候在一些狀況下發現用<strong>、<em>老是不能很的好的表示語義，爲此，在HTML5中<b>、<i>又以修改後的面貌展示給咱們了，因此在HTML5中又從新啓用了<b>、<i>這對兄弟。

那麼具體在HTML5中何時用它們呢？
<b>標籤表示出於實用的目的提醒讀者注意的一塊文字，不傳達任何額外的重要性，也不表示其它的語義和語氣，用於：關鍵詞，產品名，操做指令等等；
<i>標籤表示一塊不一樣於其它文字的文字，具備不一樣的語態或語氣，用於：分類名稱，技術術語，外語中的慣用詞等等。

6. 如何使用ARIA提高可訪問性？

語義真的有那麼重要麼？經過語義又怎麼提升訪問性與增長SEO的搜索的呢？由於如今一些SEO與瀏覽器或是屏幕閱讀器（一個給殘障人士用的文章閱讀器）都在根據HTML5的新標準作一些新的功能，他們會跟具新的語義直接與自身的功能相對應。若是網頁的開發者也是這麼作的，那麼你的網站的應用性會大大的增長。
上面又強調了一下語義的重要性，下面告訴你們一個更好的加強語義的小竅門，必定要好好看哦，由於這個小竅門朋友們不必定知道的：

概念介紹：WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications)無障礙網頁倡議之可訪問的富互聯網應用，簡稱ARIA，他就是一種技術規範。他在HTML提供的語義的基礎之上，他會使用屬性來填補一些語義上的空白。

ARIA的用法：

• 正確運用ARIA中的地標角色：
  
  
  1. role ="banner"(橫幅)
  2. role="navigation"(導航)
  3. role="main"(主體)
  4. role="complementary"(補充性內容)
  5. role="contentinfo"(內容信息)
     > 小提示：地標角色只是ARIA規範中的一種，若是你感興趣能夠去官網閱讀一下（地址：http://www.w3.org/TR/wai-aria/ ）
• 將屏幕閱讀器測試列入你的平常開發中；（由於他是最能直接反映出你的網站語義寫的好很差的東西）；
• 正確的爲標籤制定id與類（語義性必定要明顯）；
• 正確使用class類以及他提供的微格式；

關於class的微格式，由於有不少人都知道或是認爲class的屬性是隻能爲一組元素應用CSS樣式，其實並非這樣的，其實他還能夠在不引用額外的標籤下來加強語義，這就是微格式，微格式是使用約定的class名稱來標示一塊HTML從而來加強與應用程序、智能搜索與搜索機器人的交互。關於微格式的使用能夠看看這個網址：http://microformats.org

7. 你想到過網頁文件的命名會影響你網站的體驗麼？

這個一聽第一感受就是不靠譜，一個文件的名字還會影響到網站的體驗？
正確的答案確實是：是的！
如：文件名： Html_First_Blog.htm 與 html-first-blog.html
這個兩個文件名無論是在用戶的體驗上與搜索引擎上都第二個完勝第一個。是否是有人會問爲何 ？？
下面我就說一下有以下幾點是須要咱們注意的：

1. 文件名須要用小寫字母：
   應用場景就是最簡單的輸入地址吧，你認爲下面哪一種寫起來更方便，這個請本身體會吧：
   
   
   • http://192.168.0.1/TestHtml/The_First/Html5.html
   • http://192.168.0.1/testhtml/the-first/html5.html
2. 用短橫線分隔單詞：
   你們必定會認爲，用"_"挺好，其實這是作C開發時候的寫法，也能夠說是習慣，可是在網站中「-」是搜索引擎更喜歡的style；
3. 使用標準的擴展名：
   如今用好多的網站都是用.htm的擴展名，這個瀏覽器也不會報錯，可是標準的擴展名就是.html的因此你們之後寫的時候就不要省時間少寫一個字母「l」了。

記住以上幾點纔是正確的寫網頁文件的命名方法哦，不要把寫其它語言的方法放進來。

參考文章：

http://blog.csdn.net/lihui130135/article/details/45033967
http://blog.csdn.net/lihui130135/article/details/45150501
http://blog.csdn.net/lihui130135/article/details/44748415