文章簡介：
關於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即可關注,在線幫您解決技術難點，給大牛直接出難題。
