深入理解html5標籤含義，深入理解html5標籤

深入理解html5標籤含義，深入理解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即可關注,線上幫您解決技術痛點，給大牛直接出難題。