本節書摘來異步社群《移動網頁設計與開發 html5+css3+javascript》一書中的第2章，第2.1節，作者：【英】peter gasston，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
一系列新的語義元素是html5的主要新功能之一。當用标題、清單和段落來标記科學文檔時，語義元素能從詞根擴充。大多數擴充後的新元素能為頁面提供更好的結構；還能為開發人員提供更多的選項來标記各領域内容，而非僅限于使用帶有一個相關聯id或類的div。
舉個例子，在過去，開發人員可能會使用：
有了html5，開發人員可以選擇使用：
網際網路聯盟的html5規範列出10個結構元素。其中，3個已經在html4中存在：body、h1–h6（為友善起見，我們把h1–h6看作一個單一的實體）、address。其餘的7個新元素中，4個是所謂的分節内容（sectioning content）元素。我會在下文闡明什麼是分節内容（sectioning content）元素，但首先我要介紹一下這7個元素。
article 文檔或網站的一個獨立部分，如論壇文章、部落格條目或使用者送出的評論。
aside 頁面的一個區域，它和周圍的内容關系不大。它可以被視為單獨的一部分，像一篇雜志文章的側邊欄。
nav 文檔中的導航區域，這個區域包含其他文檔或同一文檔其他領域的連結。
section 内容的一個專題組合，例如書中的一個章節，标簽對話框中的一個頁面，或者網站首頁上的介紹。
其他三個用來定義分節内容中區域的結構元素：
footer 文檔或檔案區域的頁腳，通常包含其所在section的有關中繼資料，例如作者的詳細資訊。
header 可能是文檔的标題，但也可能是文檔中一個區域的頭部，通常含有标題（h1–h6）元素來标記标題。
hgroup 用于一組多層次标題元素的分組，如副标題或智語。
html5還有一些不影響頁面基本結構的其他新元素，在必要的時候，我會在書中的其他章節介紹它們。現在，讓我們來更深入地了解為什麼以上10個新元素會被最先建立出來。
設定這些新元素的目的是為了提供清晰的文檔大綱，進而使浏覽器和其他機器（尤其是像螢幕閱讀器這樣的輔助技術）能更好地解析文檔大綱。試想，這些大綱就像文檔結構圖，顯示其内容的層次結構。在該層次結構中，标題最重要，它與内容區域是父子關系，等等。
在html4中，這項任務通常使用從h1到h6的标題（header）元素來完成：h1是頁面上獨一無二且最重要的标題；h2元素通常是h1的直系子标題，以此類推。下面的示例在html4中相當常見：
嵌套标題以這種方式建立該文檔大綱：
great apes（類人猿）
a．gorilla（大猩猩）
b．orangutan（猩猩）
注釋：
類人猿迷會注意到我遺漏了矮黑猩猩和黑猩猩。這樣做是因為考慮到空間和清晰度，而并非出于任何偏見。
我建立的這個結構視覺感官強，以這種方式使用标題來建立文檔大綱被稱為隐式分節（implicit sectioning）。
在html5中，分節内容元素更早出現，在大綱中建立節（sections），而非這些節（sections）中的标頭（headers），這被稱為顯式分節（explicit sectioning）。是以，為了在html5中獲得相同的類人猿标記結構，則需使用以下代碼：
最後産生的大綱會和html4的大綱相同，因為每個section元素或article元素在大綱中建立出一個新節（section）。section和article就是我前面提到的分節内容元素，還有另外兩個分節内容元素是：aside和nav。
大綱的每個節應該有一個标題—任何标題都行。在我的示例中，我全部使用h1标題，但是，使用什麼級别的标題并不重要，因為分節内容是用來建立新節的。我甚至可以通過擲骰子的方式得到不同的數字，進而決定每個标題使用哪個級别，以差別于其他标題。
我在這裡有點油腔滑調了。讀者可以（而且應該）仍然使用從h1到h6的分層方式，因為這有助于向後相容性，并會使樣式設計更容易。
标題（或可能一個包含标題的hgroup元素）和每個節都可以包含不同的header和footer，還可以包含進一步的節和分節根（sectioning root）。這些根是像blockquote和figure這樣的元素，它們可以有自己的大綱，但對整體的文檔大綱不起作用。
如果我這麼解釋讀者還不是很懂，并不能說明你沒認真閱讀前面的内容。對每個分節内容元素的作用含糊不清，這種情況非常普遍，是以，為了幫助讀者根據手頭的任務來選擇正确的元素，html5 doctor建立了一張流程圖（見圖2-1）。
一張流程圖。它可以協助選擇元素。如果你善于根據說話的語氣做出判斷，那麼可能已經開始感覺到，我并不是新html5結構元素的粉絲。如果真是這樣，那你就猜對了。
正如前面那個小節所暗示的那樣，我的挫敗感越來越容易被察覺，要想掌握其中的一些新元素，可能相當富有挑戰性，特别是在了解article和section之間差別的時候。概括來說：一個section可能包含多個article和多個section，并且，一個article可能包含某些section或article，此外，它們兩者都會在大綱中建立出section。article和section兩者之間是有差別的，但是，沒有人—甚至html5規範的創作者也沒能—設法給出一個清晰簡潔、友善開發人員記憶的定義。
在luke stevens《the truth about html5》（createspace,2012）這本書中，luke stevens對article的隐晦描述是這麼評價的：
如果html5規範把事情留給你來解決，那它就失效了，因為html5規範的全部意義就在于确切地指定你應該做什麼。但是現在，它的解釋是開放的，并且，到現在為止，還沒有帶來明顯的益處。它是對現有功能的重複……
我太同意他說的話了。我預測，除非可以找到更加清晰的定義，否則，很多人會嚴重濫用這些元素。
出于技術的原因，我建議在開放的網際網路上不要使用這些新元素。首先，較老的ie版本（ie8和8以下版本）根本不支援新元素。為了使老ie版本的浏覽器識别出它們，就不得不先用javascript來建立它們。當然，這相當簡單，隻需使用條件注釋來實作受大衆歡迎的html5shiv：
但是，這樣做會使通路者對javascript産生依賴。對于每一個使用舊版本ie的通路者來說，他們的javascript都會失效，使得不能看到任何内部含有新元素的内容。雖然，這樣的使用者可能僅僅占很少的一部分，但是可通路性應該意味着每個人都能看到你的内容。如論壇文章、部落格條目或
其次，也是最重要的一點，目前沒有可用的浏覽器支援新的大綱算法（jaws螢幕閱讀器支援，但總是出錯）。是以，你所有的努力并沒有真正起到作用—當然，這一點在未來很可能會有所改變。
當然，是否要使用新結構元素，最後還得自己來決定。這不是強制性的—你可以和以前一樣，仍然使用div元素。其實，我發現，很難推薦大家來使用這些新元素，除非有人已經為閱讀html5規範做好了準備，并且能充分了解新元素在文檔大綱中如何确切地起作用—而且，在他所處的工作環境中，老式浏覽器不會成為一個問題。因為這些東西還處于編寫階段，我将尋找另一種方法來講解頁面結構。幸運的是，正好有一種方法能派上用場，它就是wai-aria。