Question

我有一个section，其中有一个站点的图像和一个引用该站点的段落。我想知道什么是正确的方法，在你看来我应该如何包装这2个HTML对象。

我原本以为这会起作用（忽略.img-wrap和h2）：

<section class="featured">
    <h1> Featured Project </h1>
    <div class="img-wrap">
        <img src="" height="" width="" alt="Name of Site">
        <h2> Title </h2>
    </div><!-- .img-wrap -->
    <p> 
        <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipisicing
        elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </p>
</section><!-- .featured -->

但是如果我的客户添加了多个段落怎么办？它将采用背景颜色和边距设计，因此看起来不正确。

figure和figcaption不适合吗？当我在HTML5Doctor上阅读它时，我无法确定。

<section class="featured">
    <h1> Featured Project </h1>
    <figure>   
        <div class="img-wrap">
            <img src="" height="" width="" alt="Name of Site">
            <h2> Title </h2>
        </div><!-- .img-wrap -->
        <figcaption>
            <p> 
                <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipisicing
                elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
            </p>
        </figcaption>
    </figure>
</section><!-- .featured -->

或者只是包装段落？

Answer 1

由于你没有给我们足够的背景，很难说这里的最佳做法是什么。我怀疑你在这里展示的内容确实是<section>的一个很好的候选者，因为它看起来更像是一篇文章的大部分内容，特别是那里引用了<h1>。

至于在内容的段落中使用<figcaption>，那么，这并不是它的目的。想想带有图像或两张图片的报纸或杂志文章，以增添趣味。内容正文中的图像不是描述，但图像内容与文章有关。图像上的标题是图像显示内容的简要描述，通常用于说明您正在查看的内容或内容。

根据您的情况，以下内容可能是最合适的：

<article id="featured">
  <h1>Featured Project</h1>
  <figure>
    <img src="image.jpg" alt="A brief caption about the image.">
    <figcaption>A brief caption about the image.</figcaption>
  </figure>

  <p>
    Lorem ipsum, your articlus can goeth here.
  </p>
</article>

您无需将整篇文章包裹在<figcaption>内的<figure>内，只是为了显示图片。您根本不必使用<figure>，如果这样做，<figcaption>很可能是不必要的。不要仅仅为了使用HTML5元素而尝试使用HTML5元素。如果您认为使用它们并不是一个令人信服的理由，那么您可能最好花时间构建内容并稍后对它们进行迭代以对标记进行语义改进。

关于HTML5文章和图元素的快速问题

1 个答案: