就單純功能上來看, section
和 div
蠻像的,但其實 section
有文檔上的含義,而 div
是純粹的容器而已。所以,雖說功能很像,但不可以濫用 <section>
,請避免把它當作純粹的容器來使用。
Section vs Article
section
和 article
非常相似,差異主要是在於 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>
裡面。
另一種做法是你還是放一個標題,但是隱藏他,這對於需要語音輔助的使用者來說比較友善。