display:none。若是您思考下，（你會明白）這在應用程序中預加載視圖是種頗有用的模式：建立一個新的
<mian hidden>，獲取用戶可能接下來查看的一些內容（例如：系列文中的下一篇，下一張幻燈圖放映等），而後，當用戶點擊
連接/按鈕加載該視圖時，經過在二者上切換
隱藏屬性，將當前的
<main>切換到預加載的（那個）。
在繼續以前，咱們暫停下並查看上面的示例。若是咱們使用<header>，<main>和<footer>做爲文章的主要結構，它的外觀以下：
<header>
<h1>Super duper best blog ever</h1>
...
</header>
<main>
<h2>Why you should buy more cheeses than you currently do</h2>
...
</main>
<footer>
Contact us!
<div class="contact-info">this.is.us@example.com</div>
</footer>
複製代碼
那真的很棒！可是，還有不少工做要作。
分解：<section>
所以，咱們爲頁面提供了一個基本大綱：頁眉，頁腳和主要內容區域。如今是時候添加些美妙的內容了。
一般，你會但願將你的內容分解爲多個部分，尤爲是對像本文這樣的大量文本內容，由於沒人喜歡閱讀這些難以理解的文本牆。
<section>派上用場了。這是在系列規則中最簡單的一個：從結構上講，它基本上只是一個具備特殊含義的<div>。一個<section>開始一個新的"sectioning content"區域，所以它能夠有本身的<header>和<footer>。
那麼，<section>和普通的舊<div>之間有什麼區別，而後，你應該在何時使用它們呢？好吧，容許我再次引用規範：
筆記：
元素不是通用容器元素。當一個元素僅是用於樣式目的或爲腳本編寫提供便利的時候，鼓勵做者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。通常規則是 元素僅在元素內容在文本[大綱](https://www.w3.org/TR/html5/sections.html#outline)中明確列出時候才適用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)
你知道，概述來講，HTML5規範其實是可讀的。它是那個比較可讀的規範之一。每當我瀏覽它以獲取快速答覆時，我都不可避免地學到一些意想不到的和有用的東西，尤爲是當我開始點擊連接的時候。有時（你也）試試吧！
簡而言之，若是要在目錄中列出文檔的一部分，請使用<section>。若是沒有，請使用<div>或其它元素。
內容指標
很好，咱們已經獲得了一個堅固的頁面結構。咱們已經明確標記了頁面的主要內容區域，而不只僅是單獨調整<div>，咱們已經調整出了頁眉，頁腳和章節。可是，確定還有比咱們的文檔更多的語義。
讓咱們來談談HTML5中添加的一些元素，它們傳達的內容語義而不是結構。
總體：<article>
<article>元素用於表示徹底獨立的內容區域，這些內容能夠從頁面中提取出來並放入另外一個內容中，而且仍然有意義。這多是文字文章或博客，但也可用於社交媒體帖子，如推特或臉書的牆貼。
HTML5規範建議文章總有一個標題，標識它是什麼，理想的狀況下使用標題元素(<h1>-<h6>)。<article>也能夠有<header>，<footer>和<section>元素，所以你可使用它來嵌入一個完整的文檔片斷，其中包含其它頁面中所需的全部結構。
從上面的方式返回到示例，咱們使用<article>和咱們討論的其它一些元素來重寫帶class="article-*"的元素。
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
複製代碼
這不是比原來更具可讀性嗎？並且，不只更容易閱讀，它對輔助技術更有用；機器人不能老是弄清楚你的特定類名模式，可是它們能夠遵循這種結構。
使用：<nav>
這個元素比其它元素更有名。<nav>旨在清楚地識別頁面上的主要導航塊，幫助用戶圍繞站點其他部分找到路徑的連接組（例如站點地圖或標題中的連接列表）或當前頁面（例如目錄）。
在咱們的示例頂部，讓咱們將<nav>應用於標題中的那組連接。
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
複製代碼
根本不改變結構，但你知道它是什麼，一目瞭然而不須要在<div>上讀物和處理類名來找到它，更重要的是機器人也能夠找到它。
接觸：<address>
咱們要討論的最後一個元素是<address>。這個元素旨在調出聯繫信息，它一般在主頁<footer>中用於標記企業的郵寄地址，電話號碼，客戶服務郵箱地址等等。
有趣的是，如何在<address>元素中標記內容的規則是開放的。規範提到有幾個其它規範能夠解決這個問題，而且提供這種級別的粒度可能超出了HTML自己的範圍。
常見的解決方案是RDFa，也是W3C規範，它使用標籤上的屬性來標記數據的不一樣組件。下面是咱們示例中的頁腳在標記<address>元素和RDFa時可能看起來的樣子：
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
複製代碼
無疑，RDFa有點冗長，但它對於標記數據很是方便。若是你有興趣瞭解有關RDFa的更多信息，請點擊如下連接：
- The W3C's RDFa primer
- A description of schemas and links to a bunch of them on schema.org
- The LocalBusiness schema used above
總結
好了，咱們已經介紹了不少，咱們已經看到不少零零散散的元素應用到咱們的例子中。那麼，讓咱們把它們放在一塊兒看看它的樣子。
<header>
<h1>Super duper best blog ever</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
</main>
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
複製代碼
若是你問我（怎麼看改造後的內容？），那這比原始例子的可讀性高100倍，並且對於搜索引擎優化和可訪問性目的而言，其效率將提升100倍。
這些毫不是HTML中惟一的語義元素。有不少其它元素能夠幫助你標記和構建你的文本內容，嵌入媒體資源等等。若是你喜歡這個而且但願深刻挖掘，這裏有一些（標籤）能夠查看下。你可能認識一些：
這只是一個開始！就像我說的，當你開始閱讀HTML規範時，很難停下來。它是種很是豐富的語言，我認爲人們常常會低估這種語言。