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 這個單字，可以看到他是空間設計的隔間

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

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

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

我沒辦法告訴你哪種才是正確的？或者該有怎樣的準則。

因為兩種都可以，怎麼去撰寫 HTML tag，是根據你網頁的結構而定，因此他沒有標準的答案。我們唯一能做的是把他們的差別搞清楚，也把你網頁的結構搞懂；唯有都清楚了，才能正確的寫出對搜尋引擎友好的語意。

我對 section 的理解與定義

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

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

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

什麼是 outline

outline 就是我們常說的「大綱」。當搜尋引擎在爬網站文章時，可以根據網站提供的大綱抓出每張網頁的目錄以及重點，每張網頁都可以有自己的一份大綱。

以部落格文章為例子，我們在寫文章的時候，都習慣用 heading tag 做大標、小標...等等，方便使用者閱讀，而這樣的標記在網頁結構裡，就算是一個大綱。只是我們用顏色區分讓使用者容易閱讀、而對搜尋引擎來說，他就是利用 heading tag 來了解每一段的大綱與章節。

如果想要知道你的網站大綱長甚麼樣子，以下有幾個方便的工具讓你運用：

1. Google 擴充元件: HTML5 Outliner

這個 outline 檢測工具非常好用，只要網站有把結構做出來，他就可以根據你的 HTML tag 秀出網站的大綱。另外如果文章很多懶得爬文，也可以直接點選有興趣的大綱文字，它會自動跳到該段落，有點像書籤的效果。

2. HTML 5 Outliner

方便的 Outline 檢測網站，可以上傳 HTML 檔案、用 URL，或是直接貼 HTML code 在文字欄位裡，他就會秀出這個 HTML 的大綱，適合在本機測試或不是用 Google Chrome 的朋友。

怎麼寫 outline

在 HTML5 尚未問世，還沒有 section tag 時，如果我們要做出像下面這種層級目錄的 outline：

1. 流量來源
   1.1 總覽
   1.2 來源
       1.2.1 所有流量
       1.2.2 直接
       1.2.3 推薦連結
2. 內容
   1.1 總覽
   1.2 網站內容
       1.2.1 所有網頁
       1.2.2 內容深入分析
   1.3 網站速度

通常會用 heading tag 給 outline 做階層 (可以直接貼到 HTML5 Outliner 檢測工具看喔)：

<h1>流量來源</h1>
  <div class="content">
    內容xxx，123456789
  </div>
<h2>總覽</h2>
<h2>來源</h2>
<h3>所有流量</h3>
  <div class="content-h3">
    hello world.
  </div>
<h3>直接</h3>
<h3>推薦連結</h3>

<h1>內容</h1>
<h2>總覽</h2>
<h2>網站內容</h2>
<h3>所有網頁</h3>
<h3>內容深入分析</h3>
  <div class="content-h3">
    how are you
    i am fine , thank you 🙂
  </div>
<h2>網站速度</h2>
  <div class="content-h2">
    web speed.
  </div>

簡單來說，就是用 <h1>, <h2>, <h3> 做組合。

<h1> 是階層一，<h2> 是階層二 ... 以此類推

但是問題來了，heading tag 除了可以幫助做出層級大綱外，他也代表著每個網頁的重要性，我們習慣設定 <h1> 為整張網頁最重要的部分，依序為 <h2> → <h3>

如果我今天覺得「1. 流量來源」跟「1.1 總覽」、「1.2 來源」是一樣重要的文章大綱，畢竟「1. 流量來源」只是一個引言，真正重點內容是放在後面的 1.1 以及 1.2，我希望他們同樣是 <h2>，那該怎麼做呢？

在 HTML5 以前，這個問題無解。因為即使你用 <div> 包覆的很漂亮，或是做了很棒了縮排，但是對網頁標準來說， 沒有任何的意思(無語意)，他只是一個用來做排版的容器罷了。

<div class="top-title">
  <h2>流量來源</h2>
  <div class="sub-title">
    <h2>總覽</h2>
    <h2>來源</h2>
  </div>
</div>

所以你用 Outline 工具跑出來會是長這樣，沒有任何的階層：

1. 流量來源
2. 總覽
3. 來源

那麼，如果我們同時要滿足大綱的「重要性」以及「階層性」，該怎麼做呢？所以 W3C 幫我們定義了這個新的 HTML 標籤：<section>

承接我們剛剛舉例的程式碼，如果我們把 <div> 換成 <section> ，會發生甚麼事情呢？

<section class="top-title">
  <h2>流量來源</h2>
  <section class="sub-title">
    <h2>總覽</h2>
    <h2>來源</h2>
  </section>
</section>

讓我們丟到 Outliner 檢測工具看看，會出現這樣的結果：

1. Untitled Section
  1. 流量來源
    1. 總覽
    2. 來源

初步來看，是達到了我們的期望，即使都用 <h2>，也可以做出階層的 outline。只是你會發現最上面多出了一個「Untitled Section」，所以請移除最外層的 <section>，將語法改成：

<div class="top-title">
  <h2>流量來源</h2>
  <section class="sub-title">
    <h2>總覽</h2>
    <h2>來源</h2>
  </section>
</div>

這樣就會是我們想要的結果了：

1. 流量來源
  1. 總覽
  2. 來源

<section> 所包覆的區塊可以用來做每一段的大綱，而大綱的標題就是用 heading tag <H> 表示。但是 <section> 的最上層還是要有一個主標題才會讓整張網頁的大綱完整。

section 的進階運用

1. section 內同樣有階層之分

<section>
  <h2>流量來源</h2>
  <h2>總覽</h2>
  <h3>總覽一</h3>
  <h3>總覽二</h3>
</section>

輸出結果：

1. 流量來源
2. 總覽
  1. 總覽一
  2. 總覽二

2. section 可搭配 hgroup 做大綱的微調

被 包覆的 heading tag，除了第一個 heading tag 之外，其餘的 heading tag 都不會出現在大綱中。( <hgroup> 已被 W3C 移出 HTML5 標準，所以我就簡單舉例，想要測試的朋友可以自行玩玩看)

<section>
  <hgroup>
    <h1>流量來源<</h1>
    <h2>總覽</h2>
    <h2>來源</h2>
  </hgroup>
  hello world
</section>

3. section 碰到特定語法將不視為大綱

當 <section> 碰到像是 <blockquote>, <details>, <fieldset> 時，被包住的 heading tag 不會出現在大綱。

<h2>hello world</h2>
<section>
<blockquote>
  <h2>流量來源</h2>
    hello world
</blockquote>
</section>

輸出結果：

1. hello world
  1. Untitled Section

讓不支援 HTML5 的瀏覽器支援 <section>, <article> 等標籤

步驟一

打開 reset.css 或是其他的樣式檔案，如 style.css，加入以下語法 (默認為 display:inline )：

section, article, aside, footer, header, nav {
  display:block;
}

步驟二

開啟網頁檔案，再網頁最上方加入語法，用 JavaScript 幫這些不支援 HTML5 的瀏覽器，建立新的元素。

<!-- [if lt IE 9] -->
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
<!-- [endif] -->

以上。有任何問題都歡迎留言指教 🙂

10

發生錯誤。