Question

我们来看几个使用刚才所讲的这些新元素的实际例子。我想<header>、<nav>和<footer>元素的用途是显而易见的，所以先从它们开始。从And the winner isn’t...网站的首页开始，修改其头部、导航和页脚（注意看下面代码片段中加粗的部分）：

不过，当页面中有<article>或<section>元素时，则刚才所说的这三个元素在每个页面中的使用次数不受限制。每个<article>或<section>元素都可以有自己的头部、脚注和导航。例如，我们在刚才的页面中添加一个<article>元素，代码如下：

如上代码所示，我们在页面及其所包含的<article>中都使用了<header>、<nav>和<footer>元素。

接下来继续修改侧边栏区域，其当前的HTML 4.01标签结构如下：

侧边栏内容当然是和页面主要内容“略微”相关的，所以首先移除<div id＝"sidebar">并将其替换为<aside>：

代码看上去很优雅！但是如果在浏览器中看到效果之后你张口骂娘也是情有可原的……

这真是进一步退两步！造成这种糟糕效果的原因是我们没有针对新元素修改CSS代码。在我们继续前进之前得先把这件事搞定。我们得将所有#header引用改为header，所有#navigation引用改为nav，所有#footer引用改为footer。例如，第一个引用#header的CSS规则如下：

要将其改为：

这些修改非常简单，因为header、navigation和 footer作为ID与其对应要修改的元素名称一致——我们只需要去掉“#”即可。sidebar则有些许不同：我们得将带#sidebar的引用改为aside。不过，在编辑器中执行“查找与替换”可帮助我们快速完成任务。简要说一下，类似这样的CSS规则：

要变成这样：

即使你写了一个超长的CSS样式文件，将其中的HTML 4.01 ID名称替换成HTML5元素也不是什么难事。

注意HTML5中的元素复用

请注意，HTML5页面中可能会有多个<header>、<footer>和<aside>元素，你可能需要为每一个都编写特定的样式。

And the winner isn’t...的样式修改完成后，我们就又回到了正轨：

现在，我们虽然告知了用户代理（如浏览器）页面那部分是侧边栏，但其中又含有两个独立的区域，UNSUNG HEROES和OVERHYPED NONSENSE。为了让这两个区域具有语义，还要对代码做进一步修改：

需要谨记的是，使用<section>的目的不是为了美化样式，而是为了标识一个鲜明独立的内容块。一个内容块（section）一般都应该带有标题，这恰好符合我们的需求（用于独立标识）。考虑到HTML5的大纲结构，我们可以将上面代码中的<h4>标签改为<h1>，这样HTML5就会为文档生成一个精确的大纲：

网站的主体内容怎么办

你可能会觉得有点奇怪：没有一个专门的元素用来标记页面主体内容。其实逻辑是这样的，既然可以界定除主体内容之外的其他元素，那么剩下的元素自然就是页面的主体了。