淺談 section 運用以及與 outline 間的關聯

Intro

HTML5 正夯? 恩,其實夯很久了!而 HTML5 絕對不只有語意那麼簡單罷了,它包含了很多前端的新功能與新技術,語意只是其中的一小小小塊。

今天要跟大家分享的是<section>標籤,網路上有很多關於<section>的解說,常見的文章是拿來跟<article>比較,可是我看了很多篇都似懂非懂…,所以又跑去看了國外的文件。從今年開始,我寫的 HTML 會漸漸從 XHTML 的 !DOCTYPE 走向符合 HTML5 的 !DOCTYPE,隨著 HTML5 的規格釋出,語意會是我優先嘗試的部份,從整個網頁結構以及 SEO 來看,語意是 HTML5 的必備基礎知識,所以我們就先從<section>開始吧!

W3C 對 Section 的定義

不免俗的,一定要寫一下 W3C 的原文說明:

The <section> element represents a generic section of a document or application.

  • A section, in this context, is a thematic grouping of content:
    • chapter
    • various tabbed pages in a tabbed dialog box
    • numbered sections of a thesis …
  • A Web site’s home page could be split into sections for an introduction, news items, and contact information.
  • The section element is not a generic container element. The section element is appropriate only if the contents would be listed explicitly in the document’s outline.
  • A section typically with a heading.

@HTML/Elements/section – W3C

看得懂 W3C 原文的朋友,其實可以按右上角的 Close 離開了 😛 ,看不懂的朋友,歡迎繼續往下看 🙂

section 到底是甚麼意思

先撇開 W3C 這些落落長的解釋名詞,我們先用常識去判斷甚麼是 section ?透過萬能的谷歌大神可以了解:

  • section 不是一段完整的文章,article 才是
  • section 可以作為一個章節、或一個段落的區隔。

另外,如果我們單純搜尋 section 這個單字,可以看到他是空間設計的隔間:

圖片取自: plusmood

上圖用灰色粗線條一個一個分隔的區塊,就是 section(一個章節、段落的區隔)。而整個一大棟的建築物是 article (獨立完整的文章)

再從空間設計拉回網頁設計,以結構面來說,可以做成以下的示意圖:

圖片取自: A Preview of HTML 5 / A listapart

如果你曾搜尋過<article>, <section>,會發現每個人畫的結構圖都不太一樣。有的跟我提供的示意圖一樣,是用<article>包覆<section>;但有的剛好相反,反而是<section>包覆<article>

我沒辦法告訴你哪種才是正確的?或者該有怎樣的準則。因為兩種都可以,怎麼去撰寫 HTML tag,是根據你網頁的結構而定,因此他沒有標準的答案。我們唯一能做的是把<article>, <section>的差別搞清楚,也把你網頁的結構搞懂;唯有都清楚了,才能正確的寫出對搜尋引擎友好的語意。

我對 section 的理解與定義

最後,結合 W3C 對 section 的定義,以及透過網路上對 section 名詞的解釋,我將 section 的定義總結如下:

  • section 用來作為一個有意義的章節,或段落的區隔。
  • section 在一張網頁可以出現很多次。
  • section 不是用來包覆一段完整且獨立的文章(例如 Blog 的內文),要做這件事請交給 article
  • 被 section 包覆的段落,通常都會帶有 headling 標籤(這跟等等提到的 outline 有強大的關聯)

看完這些定義,大家有沒有發現,其實最重要的一點是要去「判斷這些區塊,到底是不是獨立的文章」?或者是「有意義的章節或段落」。而判斷這樣的頁面結構,就是要跟案主做良好的溝通,了解他們網站的需求,並且先將 outline 定義出來 =)