文章标签和图片答案

【问题标题】：The article tag and the img文章标签和图片
【发布时间】：2017-01-04 01:41:52
【问题描述】：

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

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

图片：

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

简化的博文：

<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>

【问题讨论】：

标签： html semantics article

【解决方案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 标记内。

【讨论】：

【解决方案2】：

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

img 和 caption 应该在文章标签之内还是之外？

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

<article> 元素表示自包含内容，这意味着如果您删除了除<article> 元素之外的所有其他 HTML，该内容对读者仍然有意义。 Semantic Sectioning - MDN

查看下面的代码 sn-p 以了解使用 <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>

【讨论】：