[HTML5] 文章裡的文章－使用 article 標簽

如果你在網頁設計上面已經著墨很久的話，或許你會發現 HTML 實在是一種非常不嚴格的語言 (它確實是一種語言；它的名稱也是這樣來的)。我這裡要很簡單的介紹一個在 HTML5 標準中新加入的元素 article，以及非常類似的 section，並且會探討它們的差異。而你將會見識到 HTML 在語法與使用上的寬鬆。

基本上，article 之所以存在，自有它的目的；並不只是個不具實用性的精神指標而已。但是如果你不從它的原始目的來使用它，那麼它就和過去常見的、到處站立在街頭的領導人雕像一樣，實在很難想像它們到底有什麼實質的作用。

是的，就像它的名稱所暗示，article 這個標簽是用來標示一段「文章」的存在。如果你的網頁本身就是一個 article，那麼，如果你在這個 article 裡面再加入一個或多個 article 區段的話，就代表你的網頁中內含一個或多個「獨立」的文章。

想要了解它的用法，最快的方法就是來看一下範例程式：

<article>
    <header>
        <h1>
            在 ASP.NET 專案中安裝 ELMAH 擴充套件 STEP BY STEP
        </h1>
    </header>        
    <section>
        在這個全世界有數百萬起跳的人口都在從事軟體開發工作的今天，程式設計絕對不是一個適合單打獨鬥的行業。雖然我個人也是個偏好親手下去寫所有程式的開發人員，但是若想應付改來改去的需求、節省時間、準時交件的話，有時候不借助他人之力是不行的。很幸運的，確實有很多已經寫好、包好、測試好 (而且好用 － 這是重點) 的套件就在網路上，為什麼還需要凡事都自已動手？
    </section>
    <p>
        問題是，通常這些套件的安裝非常繁複、要面對的情況也很多樣。有時候光是安裝這些套件就會難倒一堆人，甚至讓人興起不如自已寫還比較快的想法...
    </p>
    <footer>
        Dated: 2011/11/10
    </footer>
</article>
<p>&nbsp;</p>
<article style="border: black 1px solid; width: 950">
    <h1>萬眾矚目的 HTML 5</h1>
    <object>
       <embed src="http://aspnet2share.blogspot.com/2011/11/html-html-4-1997-html-4.html" width="930" height="768" />
    </object>
</article>

在這個程式中，我放進了兩個 article 區段，並且在裡面包了一個 section 區段。

這段程式在 Chrome 執行起來的樣子如下圖：

請注意，在第二個 article 區段中，把整個網頁包起來是 embed 指令的功能，跟 article 無關。我只是想讓你體會一下所謂「獨立文章」的感覺而已。如果你把 <object.. 區段從 article 裡抽取出來，結果是完全一樣的。

那麼 article 跟 section 有什麼不同呢？這兩者在本質上並沒有什麼不同，只是「意義」上略有不同而已。所謂的 article，是希望你把它視為一段與目前網頁無關的獨立文章，而 section 則顯示是附屬於上一層網頁/文章裡面的一個段落。

表面上，似乎我們可以把 <header> 和 <footer> 包在 article 裡面；但是，實際上，你完全可以把整段範例上的所有 article 標簽改成 section，或者把所有 section 標簽改成 article；甚至你可以把所有 article 跟 section 標簽全部改成 div，結果完全一樣。

換句話說，你可以完全隨你高興地把 <header>、<footer> 以及其它什麼亂七八糟的東西任意包在 article、section 和 div 裡面。包括 article 裡面可以無限制的包住 section 或 div，或者隨便你以任意組合彼此包過來包過去 － 「這是個完全自由的社會」。

所以，看到這裡，你還會想問這三種標簽有什麼不同嗎？

但是，如果我們回歸到 article、section 等等標籤的設計初衷，那麼我們就會了解設計這些標籤的實際目的是什麼。有興趣的讀者可以接著前往參考 KKBruce 的大作「HTML5元素中區段內容(SECTIONING CONTENT)選用流程」。