section
section元素描繪的是一個文件或程式裡的普通的section節，一般來說一個section包含一個head和一個content內容區塊。 section可以表示成一個小節，或是tab頁面裡的一個tab下的box塊。一個頁面裡可以拆分成多個section，分別代表introduction, news items和contact information。
如果元素的內容集中在一起顯示可以表達相應的意思的話，那就可以定義成article元素，而沒必要使用section元素。
section元素不是一般的容器元素，所以如果一個元素需要定義相應的style或者script腳本的話，那推薦使用div元素，section的使用條件是確保這個元素的內容能夠明確地展示在文檔的大綱裡。
下面的範例程式碼來自蘋果網站頁面的一部分，程式碼裡包含了2個短小的section：
<article>
<hgroup>
<h1 id="Apples">Apples</h1>
<h2 id="Tasty-nbsp-delicious-nbsp-fruit">Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1 id="Red-nbsp-Delicious">Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1 id="Granny-nbsp-Smith">Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>可以看到，在section裡可以任意使用h1元素，而不用考慮這個section是頂級的，還是二級或三級元素。
下面的程式碼是一個畢業典禮的頁面，包含2個section，一個是顯示將要畢業人的名單，一個是顯示畢業典禮的形式。
<!DOCTYPE Html>
<html>
<head>
<title>Graduation Ceremony Summer 2022</title>
</head>
<body>
<h1 id="Graduation">Graduation</h1>
<section>
<h1 id="Ceremony">Ceremony</h1>
<p>Opening Procession</p>
<p>Speech by Validactorian</p>
<p>Speech by Class President</p>
<p>Presentation of Diplomas</p>
<p>Closing Speech by Headmaster</p>
</section>
<section>
<h1 id="Graduates">Graduates</h1>
<ul>
<li>Molly Carpenter</li>
<li>Anastasia Luccio</li>
<li>Ebenezar McCoy</li>
<li>Karrin Murphy</li>
<li>Thomas Raith</li>
<li>Susan Rodriguez</li>
</ul>
</section>
</body>
</html>article
article代表了一個文檔內容的獨立片段，例如，部落格條目或報紙文章，
article 是一個特殊的 section 標籤，它比 section 具有更明確的語義, 它代表一個獨立的、完整的相關內容區塊。一般來說， article 會有標題部分(通常包含在 header 內)，有時也會 包含 footer 。雖然 section 也是帶有主題性的一塊內容，但無論從結構上或內容上來說，article 本身就是獨立的、完整的。
當 article 內嵌 article 時，原則上來說，內部的 article 的內容是和外層的 article 內容是相關的。例如，一篇部落格文章中，包含用戶提交的評論的 article 就應該潛逃在包含部落格文章 article 之中。
<article> <a href="http://www.apple.com">Safari 5 released</a><br /> 7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac...... </article>
aside
HTML5提供的
<body>
<header>
<h1 id="My-nbsp-Blog">My Blog</h1>
</header>
<article>
<h1 id="My-nbsp-Blog-nbsp-Post">My Blog Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- Since this aside is contained within an article, a parser
should understand that the content of this aside is directly related
to the article itself. -->
<h1 id="Glossary">Glossary</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
<aside>
<!-- This aside is outside of the article. Its content is related
to the page, but not as closely related to the above article -->
<h2 id="Blogroll">Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
</body>以上就是HTML5學習筆記簡明版（2）：新元素之section,article,aside的內容，更多相關內容請關注PHP中文網（www .php.cn）！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AMHTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee
H5代碼：可訪問性和語義HTMLApr 09, 2025 am 12:05 AMH5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。
H5與HTML5相同嗎？Apr 08, 2025 am 12:16 AM"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。
H5的功能是什麼？Apr 07, 2025 am 12:10 AMH5，即HTML5，是HTML的第五個版本，它為開發者提供了更強大的工具集，使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括：1）元素允許在網頁上繪製圖形和動畫；2）語義化標籤如、等，使網頁結構清晰，利於SEO優化；3）新API如GeolocationAPI，支持基於位置的服務；4）跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。
h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM如何創建 H5 鏈接？確定鏈接目標：獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點：使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性（可選）：根據需要設置 target、title 和 onclick 屬性。添加到網頁：將 HTML 錨點代碼添加到希望鏈接出現的網頁中。
h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM解決 H5 兼容問題的方法包括：使用響應式設計，允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具，在發布前測試兼容性。使用 Polyfill，為舊瀏覽器提供對新 API 的支持。遵循 Web 標準，使用有效的代碼和最佳實踐。使用 CSS 預處理器，簡化 CSS 代碼並提高可讀性。優化圖像，減小網頁大小並加快加載速度。啟用 HTTPS，確保網站的安全性。
h5怎么生成鏈接Apr 06, 2025 pm 12:33 PMh5頁面可以通過兩種方法生成鏈接：手動創建鏈接或使用短鏈接服務。通過手動創建，只需複制h5頁面的URL即可；通過短鏈接服務，需將URL粘貼到服務中，然後獲取縮短的URL。
h5分享頁面怎麼做Apr 06, 2025 pm 12:30 PM製作引人入勝的 H5 分享頁面至關重要，旨在提升參與度、產生潛在客戶和增加品牌知名度。步驟包括：確定目標受眾、設計引人注目的視覺效果、創建引人入勝的內容、添加互動元素、優化社交媒體分享，以及測試並改進。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌
熱工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
記事本++7.3.1
好用且免費的程式碼編輯器
