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 的介紹 ※

5

發生錯誤。

更多 CSS 相關文章

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS

在 Vue3 + Vite 專案下設定亮色與暗色主題

2022-11-18

在 Vue3 + Vite 專案下設定亮色與暗色主題

HTML/CSS

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

2022-11-17

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

HTML/CSS

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

2022-09-23

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

HTML/CSS

難解的 CSS 排版：認識對齊(下)

2019-09-05

難解的 CSS 排版：認識對齊(下)

HTML/CSS

難解的 CSS 排版：認識對齊(上)

2019-09-04

難解的 CSS 排版：認識對齊(上)

HTML/CSS