Section元素 這 是一個最容易產生歧義的元素。它與 div 元素有什么區別?我們一直在用 div 來劃分段落,所以除 了 div ,我們什么時候使用這個元素。我們引用官方文檔來闡述它。根據WHATWG文檔,對 section 元素做了以下 描述: section 元素表示了一篇文檔或應用中,通用段落 - WHATWG
從描述中我們可以看出 section 元素的作用就是分段,或多或少類似于 div 。但是它仍有一個特例。在文檔中,加入了一段特別聲明: 當一個元素僅用于風格樣式或是為了腳本的方便,我們鼓勵作者使用 div 。 section 元素適用于,當元素的內容需要明確的列出時。- WHATWG
基于這一點,我們可以總結以下兩點: 第一,盡管section元素在技術上是可以設計樣式的,但是當有復雜的樣式或腳本時,我們仍建議使用div元素。 第二,類似于 li 元素,section元素是用來列舉內容的。
因此在現實例子中,使用 section 元素的原因是結構化的列出博客的內容,代碼如下:
復制代碼代碼如下: div section h2 Blog Post Title /h2 p Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p /section section h2 Blog Post Title /h2 p Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p /section section h2 Blog Post Title /h2 p Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p /section /div
復制代碼代碼如下: article header h1 This is Blog Post Title /h1 div ul li Author Name /li li Save in Categories /li /ul /div /header div Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. /div /article
復制代碼代碼如下: article header h1 This is Blog Post Title /h1 div ul li Author Name /li li Save in Categories /li /ul /div /header div section h2 This is the Sub-Heading /h2 Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. /section section h3 This is another Sub-Heading /h3 Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon. Cheesecake gummi bears drag e jujubes drag e drag e brownie jelly biscuit. Powder croissant jelly beans pastry. /section /div /article