深刻理解html5標籤

文章簡介：

關於html5相信你們早已經耳熟能詳，可是他真正的意義在具體的開發中會有什麼做用呢？相對於html，他又有怎樣的新的定義與新理念在裏面呢？爲何一些專家認爲html5徹底完成後，全部的工做均可以達到真正的雲方式呢？這一系列的問題你是否已經想明白了呢？

本系列文章將爲您一一解答你所不知道的關於html5與html中的那些事;具體會包括如：html5新的理念與想法，html5的新標籤的用意與具體開發中場景應用，html5與css3的感情經歷（用法搭配），包括html5的父親html的一些小隱私（您在開發中可能不知道的事）;

 

你們好，又與你們見面了，今天我會爲你們講到的您可能不知道的事有什麼呢？下面咱們就來看看

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

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

3)如何使用ARIA提高可訪問性？

 

第一個問題：

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

小編在寫這幾個標籤的時候真是想了又想，我想知道怎麼寫才能很簡單明白的把html5中的這幾個標籤寫明白；同時本身也讀了一下上一篇中關於 <header>標籤的講解；

感受若是對於一個沒有接觸過HTML5的人來講可能感受有點亂，而對已經知道是HTML5的人來講有感受沒有什麼新奇的地方，因此感受像之前同樣的寫法有點雞肋了；

因此今天打算換一個寫法，用徹底小白的寫法來說述問題中的這幾個標籤；

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

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:標記導航（對應網頁中重要的連接羣就須要用這個標籤）包含的他中間的一般是<ul>無序列表；固然若是是麪包屑連接就需用到<ol>有序列表；只要記住這個語意本身靈活發揮就是能夠了；寫法與上一篇中的<header>標籤的寫法同樣；

特別提示：1)HTML5規範不推薦對有輔助性的頁腳連接用<nav>;2)THML5中不容許將<nav>嵌套在address標籤中；

article：文章標記標籤（表示的是一個文檔、頁面、應用或是網站中的一個獨立的容器，原則上來說就是聚合），當朋友們用到他的時候知足上面的用法就不會出錯了，寫法與上一篇中的<header>標籤的寫法同樣；

特別提示：1）article這個標籤能夠嵌套使用，可是他們必須是部分與總體的關係；2）一樣不能用在<address>標籤中；3）他與<section>標籤容易混淆因此須要注意；(後面我會說一下怎麼在這個兩個中間作出選擇；)

section:區塊定義標籤（表示的是文檔或是應用的一個通常的塊），他通常是有一組類似的主題的內容；通常會包含一個標題；能夠用這個標籤來寫：文章的章節，標籤式對話框中的各類標籤頁等等相似的功能；這裏你會發現他與article這個標籤很像對不對？那麼怎麼的開發中正確的應用他們呢？

其實也很簡單你就這樣想：若是你的頁面中須要一個單獨的模塊來實現一個單獨的功能也就是高聚合的狀況就用<article>其餘的時候都用<section>;只要你這樣想而且這樣用就沒有問題的；

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

特別提示：1）若是使用多個aside標籤應該在主要內容的後面，這樣有利於SEO的搜索與提高可訪問性；2）若是是與文章的主要內容有關係的圖像須要用<figure>（後面的文章會介紹）標籤而不是用他；

footer:頁腳標籤（與header標籤對應的標籤）用他能夠實現的功能有：附錄、索引、版權頁、許可協議等。寫法與上一篇中的<header>標籤的寫法同樣；

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

 

第二個問題：

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

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

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

1)若是你以爲用HTML5中的新的標籤比用div合適就必定要用新的標籤，由於div沒有任何的語意，這個是HTML5所不倡導的；

2)若是效果須要的話能夠在HTML5新標籤的外面加一個div標籤，這樣對html中的語意不會產生太大的影響；

 

第三個問題：

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

不知道朋友們有沒有發現我在寫HTML5的第一個博客就一直在說語意語意的，語意真的有那麼重要麼？經過語意又怎麼提升訪問性與曾加SEO的搜索的呢？由於如今一些SEO與瀏覽器或是屏幕閱讀器（一個給殘障人士用的文章閱讀器）都在根據HTML5的新標準作一些新的功能；他們會很具新的語意直接與自身的功能相對應；若是網頁的開發者也是這麼作的那麼你的網站的應用性會大大的曾加；

上面又強調了一下語意的重要性；下面告訴你們一個更好的曾強語意的小竅門,必定要好好看哦由於這個小竅門朋友們不必定知道的：

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

如今是用法書寫

1)正確運用ARIA中的地標角色：

1)role ="banner"(橫幅)

2)role="navigation"(導航)

3)role="main"(主體)

4)role="complementary"(補充性內容)

5)role="contentinfo"(內容信息)

小提示：地標角色只是ARIA規範中的一種若是你幹興趣能夠去官網閱讀一下（地址：www.w3.org/TR/wai-aria/ ）

2)將屏幕閱讀器測試列入你的平常開發中；（由於他是最能直接反映出你的網站語意寫的好很差的東西）

3)正確的爲標籤制定id與類（語意性必定要明顯）；

4)正確使用class類以及他提供的微格式；

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

關於微格式的使用能夠看看這個網址：http://microformats.org

 

 

那麼今天就說到這裏吧，不知道對讀到這篇文章的您有什麼幫助沒有？相信經過這幾篇文章感受您對HTML5瞭解了不少呢？

下篇文章我會講一些與HTML5 與文本相關的東西哦，相信必定會有你不知道的事情，也許還會根據您的評論或提問在下一個文章中解答哦；

感謝您的閱讀，期待下次與您見面；

 

若是對這篇講的技術有任何疑問，第一時間得到文章更新，天天發佈一篇技術大牛的原創文章，更多技術信息分享。

歡迎關注我的微信公衆平臺:程序員互動聯盟，掃一掃下方二維碼或搜索微信號coder_online便可關注,在線幫您解決技術難點，給大牛直接出難題。