[HTML] Section 的用法

SC Tuan
Apr 28, 2021

--

就單純功能上來看, sectiondiv 蠻像的,但其實 section 有文檔上的含義,而 div 是純粹的容器而已。所以,雖說功能很像,但不可以濫用 <section> ,請避免把它當作純粹的容器來使用。

Section vs Article

sectionarticle 非常相似,差異主要是在於 article 本身可以當作單一的顯示內容,比方像是部落格的文章。

一個頁面上只要有一篇文章就足夠了,只要你的內容可以像這樣單獨顯示也不突兀,就可以用 article 來顯示。

Section 是什麼呢?

可以把 section 當作是頁面上獨立的元件,他的含義等同於 <nav><footer> 這樣的東西,也就是本身是獨立的一塊內容,但又不能作為唯一的內容出現在頁面上。

所以, <section> 具有獨立性,他的地位等同於 <nav><footer><main><aside> 。都是屬於構成頁面的一部分,但單獨出現時又沒有意義的內容。

Section 什麼時候使用呢?

一言以敝之,就是不屬於 <nav><footer><main><aside> 的獨立內容時,就可以用了。

比方,像是地圖或是搜尋結果,就可以放在 <section> 裡面。

還有什麼要注意的?

通常, section 需要標示,通常是藉由一個作為子元素的標題作為標示。雖然,還是有一些情況是不需要標題的,比方導覽功能已經放在 <nav> 了,那Prev、Next 這樣的按鈕可以放在沒有標題的 <section> 裡面。或是操作你的 web app 的按鈕列表也可以放在沒有標題的 <section> 裡面。

另一種做法是你還是放一個標題,但是隱藏他,這對於需要語音輔助的使用者來說比較友善。

參考

--

--

SC Tuan

iOS developer(Obj-C & Swift) / Web developer (Java, Javascript, CSS,HTML)