文章标签和 img

Question

我了解到文章标签是"an independent item section of content" www.w3.org/wiki/HTML/Elements/article

我的页面只有一个博客 post。该博客在文本顶部有一个 img 和一个标题（它是一个 img，用于说明我在博客文本中所说的内容）。 img 和 caption 应该在文章标签的内部还是外部？

图片：

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

博客post简化：

<article>
<h1>Title of the post</h1>
<div>Last Updated: 2016-01-07</div>
<div>       
    <p>This is the body of the post</p>
</div>
<p>Author of the post</p>
</article>

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

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

Should the img and caption be inside or outside the article tag?

在语义方面 HTML，图像和标题内容可以嵌套在 <article> 标签内，因为 <article> 允许的内容是 flow content，这两者<img>和<figure>定义为流量内容

<article> 元素表示 self-contained 内容，这意味着如果您删除除 <article> 元素之外的所有其他 HTML，内容仍然对reader。 Semantic Sectioning - MDN

查看下面的代码片段，了解一种使用 <article> 标记博客 post 并添加嵌套 <img> 或更好的方法，如 @rafaelbiten 建议的，a <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

The article tag and the img

html

article

semantics