figure元素是一種元素的組合，可帶有標題（可選）。figure標簽用來表示網頁上一塊獨立的內容，將其從網頁上移除後不會對網頁上的其他內容產生影響。figure所表示的內容可以是圖片、統計圖或代碼示例。
figure用友一個子標簽——figcaption標簽。
注意：一個figure元素內最多只允許放置一個figcaption元素，其他元素可無限放置。
案例1：不帶有標題的figure元素：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一練之figure新標簽的應用-不帶有標題的figure元素</title>
- </head>
- <body>
- <figure>
- <img alt="poluoluo.COM" src="http://www.poluoluo.com/template/w3cfuns2011/images/logo/logo.png"/>
- </figure>
- </body>
- </html>
案例2：帶有標題的figure元素：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一練之figure新標簽的應用-帶有標題的figure元素</title>
- </head>
- <body>
- <figure>
- <img alt="poluoluo.com" src="http://www.poluoluo.com/template/w3cfuns2011/images/logo/logo.png"/>
- <figcaption>poluoluo.COM</figcaption>
- </figure>
- </body>
- </html>
案例3：多個圖片，同一個標題的figure元素：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一練之figure新標簽的應用-多個圖片，同一個標題的figure元素</title>
- </head>
- <body>
- <figure>
- <img alt="poluoluo.COM" src="http://www.poluoluo.com/images/logo.gif" />
- <img alt="網頁教學網" src="http://www.poluoluo.com/images/common/Logo.gif"/>
- <img alt="網頁教學網" src="http://www.poluoluo.com/images/bigLogo.jpg"/>
- <figcaption>網頁教學網--中國網頁設計,網頁制作第一站！</figcaption>
- </figure>
- </body>
- </html>