2022-11-22
整合 TailwindCSS 與 Element Plus 的 CSS class 變數
HTML/CSS
2013.05.22
HTML5 正夯? 恩,其實夯很久了!而 HTML5 絕對不只有語意那麼簡單罷了,它包含了很多前端的新功能與新技術,語意只是其中的一小小小塊。
今天要跟大家分享的是 <section>
標籤,網路上有很多關於 <section>
的解說,常見的文章是拿來跟 <article>
比較,可是我看了很多篇都似懂非懂…,所以又跑去看了國外的文件。
從今年開始,我寫的 HTML 會漸漸從 XHTML 的 !DOCTYPE 走向符合 HTML5 的 !DOCTYPE,隨著 HTML5 的規格釋出,語意會是我優先嘗試的部份,從整個網頁結構以及 SEO 來看,語意是 HTML5 的必備基礎知識,所以我們就先從 <section>
開始吧!
不免俗的,一定要寫一下 W3C 的原文說明:
The <section> element represents a generic section of a document or application.
看得懂 W3C 原文的朋友,其實可以按右上角的 Close 離開了 😛 ,看不懂的朋友,歡迎繼續往下看 🙂
先撇開 W3C 這些落落長的解釋名詞,我們先用常識去判斷甚麼是 section ?透過萬能的谷歌大神可以了解:
另外,如果我們單純搜尋 section 這個單字,可以看到他是空間設計的隔間
上圖用灰色粗線條一個一個分隔的區塊,就是 section(一個章節、段落的區隔)。而整個一大棟的建築物是 article (獨立完整的文章)
再從空間設計拉回網頁設計,以結構面來說,可以做成以下的示意圖
如果你曾搜尋過 , ,會發現每個人畫的結構圖都不太一樣。有的跟我提供的示意圖一樣,是用 <section>
包覆 ;但有的剛好相反,是用 <article>
包覆 。
我沒辦法告訴你哪種才是正確的?或者該有怎樣的準則。
因為兩種都可以,怎麼去撰寫 HTML tag,是根據你網頁的結構而定,因此他沒有標準的答案。我們唯一能做的是把他們的差別搞清楚,也把你網頁的結構搞懂;唯有都清楚了,才能正確的寫出對搜尋引擎友好的語意。
最後,結合 W3C 對 section 的定義,以及透過網路上對 section 名詞的解釋,我將 section 的定義總結如下:
看完這些定義,大家有沒有發現,其實最重要的一點是要去「判斷這些區塊,到底是不是獨立的文章」?或者是「有意義的章節或段落」。而判斷這樣的頁面結構,就是要跟案主做良好的溝通,了解他們網站的需求,並且先將 outline 定義出來 =)
※ 如果你已經知道甚麼是 outline,可以選擇跳過 outline 的介紹 ※