重新设计后，页面结构如下：
用 <figure> 添加插图
很多页面都是包含图片的。但是，插图 (figure) 与图片的概念还不完全一样。插图虽然独立于文本，但是文本中会提到它。
一般来说插图应该是浮动的，还会有浮动图题。下面是在文章中添加插图的 HTML 标记，在正文的第一段和第二段之间的位置，部分代码如下：
- ... <div class="Content">
- <p><span class="LeadIn">Right now</span>, you're ...</p> <div class="FloatFigure">
- <img src="human_skull.jpg" alt="Human skull"> <p>Will you be the last person standing if one of these apocalyptic
- scenarios plays out?</p> </div>
- <p>But don't get too smug. There's...</p> ...
相应的 样式表规则如下：
- .FloatFigure{ float: left;
- margin: 0px 20px 0px 0px; }
- .FloatFigure p{ max-width: 300px;
- font-size: small; font-style: italic;
- margin-bottom: 5px; }
下图展示了这个示例的外观，插图恰好在第一段文本之后，浮动在后面文本的左侧，图题的文本的宽度我们限制住了，让图题显示很充实、很优雅。
HTML5 中提供了一个 <figure> 元素，图题可以放在 <figure> 中的 <figcaption> 元素里，经过改造，代码如下：
