div 了。不再需要自己设置 class 属性，从标准的元素名就可以推断出各个部分的意义。这对于音频浏览器、手机浏览器和其他非标准浏览器尤其重要。
除了结构性元素之外，HTML 5 还增加了一些纯语义性的块级元素：
asidefiguredialog
我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。
aside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在 developerWorks 文章中，常常会看到用表格形式编写的边栏，见清单 3。
清单 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。
清单 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> |
