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定義是爲了設備準備的，應該能讓瀏覽器可以正確的瞭解你的信息，以便在特定的場合進行優化處理。