最适合 HTML 用户头像的标记是什么？答案

【问题标题】：What's the most appropriate markup for an HTML user avatar?最适合 HTML 用户头像的标记是什么？
【发布时间】：2019-09-09 20:19:42
【问题描述】：

我很好奇人们是否想过对于用户头像最合适和语义的 HTML 标记是什么，即用户的图像，用他们的名字和一些其他描述性信息标记。

我最初的想法只是一个img 标签，后跟一段文本。图像与标签的接近程度似乎在图像和文本之间建立了足够的联系，从而在语义上将它们关联起来。

然而，我的同事提到了 figure 元素，并且这可能是一个合适的用途，figcaption 用作名称和描述性文本。

【问题讨论】：

这个头像在页面上只能使用一次吗？我问是因为如果它被用作用户列表或聊天的一部分，那么这会影响给出的建议。如果不是，那么 90% 的时间答案是动态地将其命名为“[用户名] 用户头像”作为图像上的替代文本，例如，无需过度复杂化。
感谢您的评论。问题与适当的周围标记有关，该标记将人的图像与描述他们的文本节点联系起来，无论上下文如何。这更像是一个哲学问题，它将为我为开发团队创建的一些 UI 文档提供建议，因此我正在寻找一个更通用的最佳实践建议，说明什么是最语义化和最适合这种情况的可访问性。在没有描述性文本的情况下，alt 属性就足够了，但在这种情况下，有相邻的文本描述图像，因此 alt 属性不合适。谢谢

标签： html accessibility semantic-markup

【解决方案1】：

figure 和 figcaption 是一个合理的选择（有关 figure 语义的更多详细信息，请参阅 here）。

您也可以使用p，这通常对于标记短语内容非常有用。 MDN 在p 上的这句话说明了它经常被忽视的有用性：

HTML <p> 元素代表一个段落。段落通常在视觉媒体中表示为由空行和/或首行缩进与相邻块分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，例如图像或表单域.

所以p 的语义并不局限于文本段落。事实上，它是措辞内容的主力容器。此外，关于p 的可访问性：

将内容分成段落有助于使页面更易于访问。屏幕阅读器和其他辅助技术提供了快捷方式，让他们的用户可以跳到下一段或上一段，让他们浏览内容，例如空白让视觉用户如何跳来跳去。

MDN docs reference

p 标签充当任何短语内容的可访问分组：

短语内容定义文本及其包含的标记。大量的短语内容组成段落。

属于该类别的元素有<abbr>、<audio>、<b>、<bdo>、<br>、<button>、<canvas>、<cite>、<code>、@987654@4 987654343 @，<datalist>，<dfn>，<em>，<embed>，<i>，<iframe>，<img>，<input>，<kbd>，<keygen>，<label>，<mark> , <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <script>, <script>, <script>, <progress> 987654368@、<span>、<strong>、<sub>、<sup>、<svg>、<textarea>、<time>、<var>、<video>、@98765 不只包含 38 和 74 个纯文本空格字符）。

MDN Docs reference

【讨论】：