Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

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] -->

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

歡迎給我點鼓勵,讓我知道你來過 :)

9
Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments