站長資訊網section
section 元素是對頁面文檔結構進行劃分的最基本也是最主要的結構元素，主要用來對網站或應用程序中的頁面上的內容進行層次結構上的劃分。一個section元素通常由內容及其標題組成。
如果元素的內容集中到一起顯示可以表達相應的意思的話，可以定義成article元素，而沒必要使用section元素。
section元素不是一般的容器元素，所以如果一個元素需要定義相應的style或script腳本的話，推薦使用p元素，section的使用是確保這個元素的內容能夠明確地展示在文檔的大鋼里。
如：
<!DOCTYPE Html><html><head> <title>Graduation Ceremony Summer 2022</title></head><body> <h1>Graduation</h1> <section> <h1>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>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會有標題部分。
當article內嵌article時，原則上來說，內部的article的內容是和外層的article內容相關的。例如，一篇博客中，包含用戶提交的評論的article應該嵌套在包含博客文章article中。
<article> <h1>Safari 5 released</h1> <p>7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC.</p> <p>Apple announced the release of Safari 5 for Windows and Mac......</p></article>
nav
nav 元素是一個可以作為頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。一個頁面可以擁有多個nav元素，作為頁面整體不同部分的導航。在nav元素中，一般以ul列表的形式來具體放置該組鏈接元素。
下面是w3c給出的一個示例代碼：
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h1> Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <p> <section id="public"> <h1>Public demonstrations</h1> <p> ...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </p> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>? copyright 1998 Exampland Emperor</small></p> </footer></body>
aside
aside元素用來表示當前頁面或文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條、以及其他有別于主要內容的部分。
根據目前的規范，aside元素有兩種使用方法：
-
被包含在article中作為主要內容的附屬信息部分，其中的內容可以是當前文章有關的引用，詞匯列表等。
-
在article外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側邊欄，其中的內容可以是友情鏈接、附屬導航或廣告單元等。
下面的代碼示例綜合了以上兩種方法：
<body> <header> <h1>My Blog</h1> </header> <article> <h1>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> <h1>Glossary</h1> <dl> <dt>Lorem</dt> <dd>ipsum dolor sit amet</dd> </dl> </aside> </article> <aside> <h2>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>
hgroup
hgroup 元素是將標題及其子標題進行分組的元素。hgroup元素通常對h1~h6元素進行分組，如將一個內容區塊的標題及其子標題劃為一組：
<hgroup> <h1>Welcome to my WWF</h1> <h2>For a living planet</h2></hgroup><p>The rest of the content...</p>
header
header 元素是一種具有引導作用和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個article元素或section元素的標題，也可以包含其他內容，例如數據表格、搜索表單或相關的logo圖片。
我們可以使用該標簽來顯示整個網頁的標題部分：
<header> <h1>The most important heading on this page</h1></header>
同一個頁面內，每一個內容區塊都可以有自己的header元素，例如：
<header> <h1>The most important heading on this page</h1></header><article> <header> <h1>Title of this article</h1> </header> <p>...Lorem Ipsum dolor set amet...</p></article>
footer
footer 元素可以作為其上層父級內容區塊或一個根區塊的腳注。footer 元素通常包括其相關區塊的腳注信息，如作者、相關閱讀鏈接以及版權信息等。
過去(及目前)，我們通常使用類似下面這樣的代碼來寫頁面的頁腳：
<p id="footer"> <ul> <li>copyright</li> <li>sitemap</li> <li>contact</li> <li>to top</li> </ul><p>
在HTML5中，我們可以不使用p，而用更加語義化的footer來寫：
<footer> <ul> <li>copyright</li> <li>sitemap</li> <li>contact</li> <li>to top</li> </ul></footer>
在同一個頁面中可以使用多個footer元素，即可以用作頁面整體頁腳，也可以作為一個內容區塊的結尾，例如，我們可以將footer直接寫在section或是article中：
<section> Section content appears here. <footer> Footer information for section. </footer></section><article> Article content appears here. <footer> Footer information for article. </footer></article>
address
address元素用來在文檔中呈現聯系信息，包括文檔創建者的名字、站點鏈接、電子郵箱、真實地址、電話號碼等；address不只是用來呈現電子郵箱或真實地址這樣的“地址”概念，而應該包括與文檔創建人相關的各類聯系方式信息。
根據以上定義，我們可以使用下面的代碼來展示一些志愿者的名字及主頁鏈接：
The HTML5 Doctor is run by the following group of volunteers:<address> <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>, <a href="http://html5doctor.com/author/richc">Rich Clark</a>, <a href="http://html5doctor.com/author/miker">Mike Robinson</a>, </address>
下面是另一個范例：
<footer> <p class="vcard"> by <address class="author"> <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em> </address> on <time datetime="2009-11-04" class="published updated">November 4th, 2009</time> </p></footer>
video
通過<video>標簽，我們可以拋棄最近不怎么討好的Flash，直接在頁面中播放視頻文件。視頻文件自然是最符合語義化的文件格式，但該元素標簽同樣支持音頻與圖片。
過去(及目前)，我們通常要使用類似下面這樣繁冗丑陋的代碼來將視頻放置在頁面中，但這種方式要求瀏覽器安裝有Flash插件，并支持JavaScript：
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed></object>
HTML5的方式：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> <p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead. </p></video>
<video>標簽有如下幾個常用屬性：
-
Autoplay: 用來設定視頻是否在頁面加載后自動播放。
-
Src: 為視頻指定文件鏈接或下載路徑，當瀏覽器不支持<video>標簽或發生某種播放錯誤時，可以提供給用戶進行下載。
-
Autobuffer: 用來設定視頻是否自動緩沖；如果設定，那么頁面加載之后，視頻會自動下載緩沖，當用戶點擊播放按鈕后，至少已經有一部分視頻可以直接觀看而無需等待了。
-
Poster: 用來為視頻設置一個“相框默認圖片”性質的背景圖片；當視頻無法正常加載播放時可以向用戶呈現。
-
Controls: 用來設置是否為視頻添加控制條，例如“播放”、“暫停”等；控制條的外觀可以自定義。
-
Loop: 用來設置視頻是否循環播放。
-
Width , Height: 用來控制視頻的寬度與高度。
audio
HTML5中的新元素標簽<audio>是被大家等待已久的，它有原生支持音頻播放的功能，而不需要瀏覽器安裝額外的擴展
<audio>元素標簽的一些常用屬性：
-
src：音頻文件路徑。
-
autobuffer：設置是否在頁面加載時自動緩沖音頻。
-
autoplay：設置音頻是否自動播放。
-
loop：設置音頻是否要循環播放。
-
controls：設置是否顯示播放控制面板。
可以看到這些屬性和<video>元素標簽的屬性很類似。下面我們來看一個代碼范例：
<audio src="elvis.ogg" controls autobuffer></audio>
根據定義規范，以下幾種API方法是可以使用的：
-
play()：播放音頻
-
pause()：暫停播放
-
canPlayType()：命令瀏覽器判斷當前音頻文件是否可以被播放
-
buffered()：設定文件需要緩沖部分的開始與結束時間點。
另外，我們可以使用<source>元素標簽來配合<audio>；<source>用來指定多個音頻文件，如果當前瀏覽器不支持第一個文件，那么<audio>會自動嘗試播放下面一個<source>中指定的文件；我們還可以在它們后面加上目前常規的<embed>代碼來加載Flash播放器，作為后備方案；范例如下：
<audio controls autobuffer> <source src="elvis.ogg" /> <source src="elvis.mp3" /> <!-- now include flash fall back --></audio>
datalist
datalist 與 input 的新屬性list一起使用可以創建組合框，雙擊input的時候可以提供選項讓用戶選擇，類似歷史記錄一樣。
<input list="browsers"><datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"></datalist>
