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

Stack Overflow用户

提问于 2011-01-23 09:04:44

回答 1查看 4.7K关注 0票数 0

我有一个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 -->

或者干脆换个段落？

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-01-23 09:18:27

很难说这里的最佳实践是什么，因为您没有给我们提供足够的上下文。我怀疑您在这里向我们展示的内容是否真的是一个很好的<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>

您不需要将整篇文章包装在包装在<figure>中的<figcaption>中，只是为了显示一个图像。您根本不需要使用<figure>，如果使用，<figcaption>很可能是不必要的。不要试图仅仅为了使用HTML5元素而使用它们。如果您不认为使用它们有令人信服的理由，那么您的时间可能更好地花在构建东西上，并在稍后迭代它们，以便对标记进行语义改进。

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4771674

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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