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

Question

我有一个section网站的图像和引用该网站的段落.我想知道什么是正确的方法,在您看来我应该如何包装这两个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元素.如果你不认为有充分的理由来使用它们,你的时间可能是更好的花刚开建的东西并遍历他们后来做出标记语义改进.