<p class="zw">HTML5引入了一组新的元素，提高了页面的构建能力。你的文档可能仍然充满了<code>div</code>——HTML4.01规范中描述其为“附加结构机制”——对相关内容进行语义分组。</p> <pre class="代码无行号"><code><div class="branding"> […] </div> <div class="nav"> […] </div> <div class="content"> <div class="content__main"> […] </div> <div class="content__sub"> […] </div> </div> <div class="footer"> […] </div></code></pre> <p class="zw">以上标签中的任何一个属性语义都是比较隐晦的，也不是机器可读的。在实践中，爬虫会认为<code>you-dumb-mug</code>和<code>content__main</code>毫无区别。</p> <p class="zw">将来，添加<code>id</code>和<code>class</code>属性将只是简单地描述可视化布局，而不会承担语义化的任务。</p> <p class="zw">我们可以替换一些语义更精确的结构元素来帮助减少对可视化的依赖。结果是，我们的可视化布局将会变得更简单。</p> <p class="zw">2005年，Google调查了30亿的网页，从中找出设计师最常用的<code>id</code>和<code>class</code>属性。这些发现后来成为了HTML5的基本元素。</p> <ul> <li class="第1级无序列表"><code>section</code></li> <li class="第1级无序列表"><code>article</code></li> <li class="第1级无序列表"><code>aside</code></li> <li class="第1级无序列表"><code>header</code></li> <li class="第1级无序列表"><code>footer</code></li> <li class="第1级无序列表"><code>nav</code></li> </ul> <p class="zw">这个列表并不全面，因为本书并不是一本HTML参考书。参考书我推荐Jeremy Keith的《HTML5+CSS3网页设计入门必读》。</p>
