在HTML 中，如果你需要為一組內(nèi)容劃分一個(gè)主題區(qū)域，比如一段介紹、一個(gè)側(cè)邊欄或者一個(gè)獨(dú)立模塊，使用<section></section>元素是最常見(jiàn)也最語(yǔ)義化的方式。
什麼是<section></section> ？
<section></section>標(biāo)籤表示文檔中的一個(gè)“主題區(qū)塊”，通常帶有標(biāo)題。它用於將相關(guān)內(nèi)容組織在一起，幫助瀏覽器和輔助設(shè)備更好地理解頁(yè)面結(jié)構(gòu)。
例如，一個(gè)文章的幾個(gè)部分可以分別用多個(gè)<section></section>包裹：
<section> <h2>簡(jiǎn)介</h2> <p>這是文章的第一部分內(nèi)容。 </p> </section> <section> <h2>正文</h2> <p>這是文章的主要內(nèi)容。 </p> </section>
這樣寫(xiě)不僅結(jié)構(gòu)清晰，也有利於SEO 和無(wú)障礙訪問(wèn)。
使用<section>的最佳實(shí)踐
- 搭配標(biāo)題使用：每個(gè)
<section>最好包含一個(gè)標(biāo)題（如<h1>到<h6>），這有助於明確主題。 - 不要濫用：如果只是用來(lái)佈局或樣式目的，應(yīng)該用
<div>而不是<section>，避免語(yǔ)義混亂。 - 嵌套合理使用：可以在一個(gè)大
<section>裡再分小<section>，但要注意層級(jí)不要太深。
哪些場(chǎng)景適合用<section> ？
- 頁(yè)面上的主要內(nèi)容區(qū)域（如主頁(yè)的不同板塊）
- 文章的不同章節(jié)
- 側(cè)邊欄中的一組相關(guān)鏈接或信息塊
- 單頁(yè)應(yīng)用中的功能模塊
舉個(gè)例子，一個(gè)博客首頁(yè)可能會(huì)有如下結(jié)構(gòu)：
<section class="featured-posts"> <h2>推薦文章</h2> <!-- 推薦的文章列表--> </section> <section class="recent-posts"> <h2>最新動(dòng)態(tài)</h2> <!-- 最新發(fā)布的文章--> </section>
和<article></article> 、 <div>的區(qū)別
-
<section></section>是“主題性”的內(nèi)容區(qū)塊，強(qiáng)調(diào)的是整體主題。
-
<article></article>表示一篇完整、可獨(dú)立發(fā)布的內(nèi)容，比如一篇博客、一則新聞。
-
<div>沒(méi)有語(yǔ)義含義，僅用於樣式或腳本操作。所以：
- 如果你有一段內(nèi)容可以單獨(dú)拿出來(lái)放在別的網(wǎng)站上也能成立，那就用
<article></article> ；
- 如果是組織一個(gè)主題下的內(nèi)容，就用
<section></section> ；
- 只是用來(lái)包裹沒(méi)有語(yǔ)義要求的元素，才考慮
<div> 。基本上就這些。合理使用<section></section> ，能讓你的HTML 更清晰、更易維護(hù)。
-
<section></section>是“主題性”的內(nèi)容區(qū)塊，強(qiáng)調(diào)的是整體主題。 -
<article></article>表示一篇完整、可獨(dú)立發(fā)布的內(nèi)容，比如一篇博客、一則新聞。 -
<div>沒(méi)有語(yǔ)義含義，僅用於樣式或腳本操作。所以：
- 如果你有一段內(nèi)容可以單獨(dú)拿出來(lái)放在別的網(wǎng)站上也能成立，那就用
<article></article>； - 如果是組織一個(gè)主題下的內(nèi)容，就用
<section></section>； - 只是用來(lái)包裹沒(méi)有語(yǔ)義要求的元素，才考慮
<div> 。基本上就這些。合理使用
<section></section>，能讓你的HTML 更清晰、更易維護(hù)。
- 如果你有一段內(nèi)容可以單獨(dú)拿出來(lái)放在別的網(wǎng)站上也能成立，那就用
