Question

我理解文章标签是“内容的独立项目部分” www.w3.org/wiki/HTML/Elements/article

我的网页只有博文。该博客在文本的顶部有一个img和一个标题（这是一个img，说明我在博客文本中说的内容）。 img和标题应该在文章标签的内部还是外部？

img：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add element</button>
<div id="canvas">
</div>

博客文章简化：

<img src="1.png">
<div>Caption of the image</div>

Answer 1

您可能需要同时检查figure和figcaption代码。

来自文档的示例：

<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">  
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>

如果figure与article相关，那么我会将其放在article标记内。

Answer 2

我注意到这个答案已经被接受，但是我认为它可以使用更多有关您的问题的信息：

img和标题应该位于文章标签的内部还是外部？

就语义HTML而言，图像和标题内容可以嵌套在<article>标记内，因为<article>的允许内容为flow content，<img>和{ <figure>被定义为流内容。

<article>元素指示独立的内容，这意味着，如果删除了<article>元素以外的所有其他HTML，则该内容对于读者仍然有意义。 Semantic Sectioning - MDN

请查看下面的代码段，以一种有效的方法用<article>标记博客帖子，并添加嵌套的<img>，或者甚至更像@rafaelbiten建议的<figure>。

<article>
  <h1>Title of the post</h1>
  <p>Author of the post</p>
  <p>Last Updated: 2016-01-07</p>
  <figure>
    <img src="1.png" alt="Some alt text">
    <figcaption>Caption of the image</figcaption>
  </figure>
  <p>This is the body of the post</p>
</article>

文章标签和img

2 个答案: