第40页 2.2.4 用<figure>添加插图

下面是给文章添加插图的HTML标记。
<p><span class='LeadIn'>Right now</span>, you're probably ...</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 ...</p>

光有这些标记还不行，必须还得有相应的样式表规则，才能把插图定位到适当的位置。下面是一个样式规则：
/* 为插图应用样式*/
.FloatFigure {
    float:left;
    margin-left:0px;
    margin-top:0px;
    margin-right:20px;
    margin-bottom:0px;
}

/* 为图题应用样式 */
.FloatFigure p {
    max-width:200px;
    font-size:small;
    font-style:italic;
    margin-bottom:5px;
}

在HTML5中有了一个专门的<figure>元素。图题可以放在<figure>中的<figcaption>元素里。
<figure class="FloatFigure">
    <img src="human_skull.jpg">
    <figcaption>Will you be the last person standing if one of these apocalyptic scenarios plays out?</figcaption>
</figure>

因为图题中经常就包含了对图片的完整说明，所以alt文本就可以删除。但是不能把alt文本设成空字符串。因为这就意味着你的图片纯粹是装饰用的，屏幕阅读器会忽略不读。