HTML5標籤的語義認知和理解（2）

昨天說到了nav元素，nav元素的確是描述導航，但這個導航應該是對本網站而言的，不應該將nav用到對於外部的友情連結啊，收藏夾或什麼的，總之，對元素來說，要實施他正確的語義才是我們要討論和研究的事情。

我們可以用article來描述頁面想表達的實際內容，也就是說，這個內容頁的核心資訊。你可以這樣考慮，這個頁面中絕對不能去掉的內容有哪些（比如螢幕大小不夠，頻寬不夠，儲存空間不夠，在各種惡劣的環境下），這些絕對不能去掉的，代表本業務核心價值的資訊，就可以用article來描述。一般來講，內容總應該有一個標題，所以article往往會包含一個h標記，如果有多個h標記，或頁首描述，請參考前面的文章。

如果article的內容比較多，需要有章節之分（給用於小螢幕的行動瀏覽器，或閱讀器提示可以分頁什麼的）我們可以用section來描述。section和p不同，p描述的是一個段落，以我的理解就是一個自然段，前面空兩格，一個自然斷行符號，組成了一個p，多個p組成了一個section，而且有可能多個p還可以外帶一個h什麼的。當然是文檔，就會有可能有header和footer的存在了。比如：

    <article>        <hgroup>            <h1>                主標題            </h1>            <h2>                副標題            </h2>        </hgroup>        <section>            <h1>                第一章</h1>            <p>                自然段</p>            <p>                自然段</p>            <p>                自然段</p>            <p>                自然段</p>        </section>        <section>            <h1>                第二章</h1>            <p>                自然段</p>            <p>                自然段</p>            <p>                自然段</p>            <p>                自然段</p>        </section>        <footer>            <time>發表日期</time>        </footer>    </article>

上面這些元素中，用的比較靈活的是section，section描述的是一段獨立的文本，其也可以包含article元素，馬上我們就可以看到；section也可以描述一些簡單的獨立文本資訊，這個時候它類似span元素。

在頁面中那些附屬的資訊，比如廣告，看了這篇文章的人也看了以下文章，相關產品啥的，這些有關聯又不是本文的內容，我們用aside來描述。aside中的內容可以用ol和ul列出，也可以用article或section較為詳細的描述。

    <aside>        <article>            <header>                <h1>                    向你推薦</h1>                <h2>                    喜歡這篇文章的人還喜歡……</h2>            </header>            <ol>                <li>                    <section>                        <article>                            <h1>                                文章標題</h1>                            <section>                                <p>                                    摘要</p>                            </section>                        </article>                    </section>                </li>                <li>                    <section>                        <article>                            <h1>                                文章標題</h1>                            <section>                                <p>                                    摘要</p>                            </section>                        </article>                    </section>                </li>            </ol>            <footer>                <article>                    <h1>                        其他更多推薦</h1>                    <ol>                        <li>推薦1</li>                        <li>推薦2</li>                        <li>推薦3</li>                    </ol>                </article>            </footer>        </article>    </aside>

上面的代碼描述了推薦兩個有摘要的文章，和三個簡單列表，當然列表中可以有連結。

現在所有的頁面都會有圖片，沒有圖片純文字的頁面設計非常少見了。在html4中我的理解是，如果圖片代表了具體含義（該圖片的存在與否會對頁面的資料造成資訊缺失）比如：廣告圖片（沒有的話，廣告商會很生氣），公司logo，產品照片或用於對資訊描述的照片，這些元素需要用img來描述，如果你認可這點，就應該明白為什麼img強制需要alt屬性了，在意外情況下，使用者也應該從alt資訊中擷取你本來需要表達的資料資訊。如果圖片是提示性含義，比如箭頭，hot，裝飾性的，那用div的背景來處理，如果瀏覽器在特定裝置上忽略這些元素，對頁面本身的資訊表達也沒有影響。

原先的img雖然有alt屬性，不過alt的屬性不是顯性的表現出來的，但一般出版網的規範是圖片下面有一個關於圖片的說明，html5現在是徹底的要要page真正的變成document，所以給出了一個新的描述標籤figure。這是一個很好的標籤，可以對文檔內的圖片給出獨立的資料區域和和說明。

    <figure>        <img alt="" />        <img alt="" />        <img alt="" />        <img alt="" />        <figcaption>這四個產品是我們最新的……</figcaption>    </figure>

要注意的是，figure希望內容是可以被描述或應該被描述的，而且描述的資訊應該是和文檔主題內容有關的，所以公司的logo顯然不適合使用figure描述。如果你的文章中的配圖和本文的主要內容也沒有很多關聯，比如弄了一個風景或人物照片僅僅是意境方面的，而不是描述文章中人物或地點的，那也不需要用figure元素，直接考慮img或div好了。

另外一個問題就是，在VS2008的HTML5驗證中figcaption元素不支援。

還有就是figure不僅僅是描述圖片，主要是描述資訊流，所以figure應該可以包含描述圖片，報表什麼的。

這些HTML5提供的新的結構性的語義標籤，基本上不是用來定義新的語義，都是用來定義新的語義地區，對閱讀者來說沒有什麼大的意義，應該還是W3C的最初願望，element定義是為了裝置準備的，應該能讓瀏覽器可以正確的瞭解你的資訊，以便在特定的場合進行最佳化處理。