HTML 5 还增加了一些纯语义性的块级元素：
aside figure dialog
我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。
aside
aside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在 developerWorks 文章中，经常会看到用表格形式编写的边栏，见代码3 用 HTML 4 编写的 developerWorks 边栏。
| 以下是代码片段：[www.xlnv.net] <table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10"> <img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td> <td> <table border="1" cellpadding="5" cellspacing="0" width="100%"> <tbody><tr><td bgcolor="#eeeeee"> <p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p> <p> The <code type="inline">.xf-value</code> selector used here styles the input field value but not its label. This is actually inconsistent with the current CSS3 draft. The example really should use the <code type="inline">::value</code> pseudo-class instead like so: </p> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr><td class="code-outline"> <pre class="displaycode">input::value { width: 20em; } #ccnumber::value { width: 18em } #zip::value { width: 12em } #state::value { width: 3em }</pre> </td></tr></tbody></table><br> <p> However, Firefox doesn't yet support this syntax. </p> </td></tr></table> |
在 HTML 5 中，可以按照更有意义的方式编写这个边栏，见代码4 用 HTML 5 编写的 developerWorks 边栏。
| 以下是代码片段：[www.xlnv.net] <aside>
<h3>.xf-value</h3> <p> The <code type="inline">.xf-value</code> selector used here styles the input field value but not its label. This is actually inconsistent with the current CSS3 draft. The example really should use the <code type="inline">::value</code> pseudo-class instead like so: </p> <pre class="displaycode">input::value { width: 20em; } #ccnumber::value { width: 18em } #zip::value { width: 12em } #state::value { width: 3em }</pre> <p> However, Firefox doesn't yet support this syntax. </p> </aside> |
浏览器可以决定把这个边栏放在哪里（可能需要用一点儿 CSS 代码）。
figure
figure 元素代表一个块级图像，还可以包含说明。例如，在许多 developerWorks 文章中，可以看到代码5 用 HTML 4 编写的 developerWorks 图 这样的标记其结果见图1。
| 以下是代码片段：[www.xlnv.net] <a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br /> <img alt="A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" /> <br /> |
