HTML用户头像最合适的标记是什么?

时间:2019-09-09 20:19:42

标签: html accessibility semantic-markup

我很好奇,如果人们想到对于用户头像来说最合适和最语义的HTML标记是什么,即用他们的名字和其他描述性信息标记的用户图像。

我最初的想法只是一个img标签,后跟一段文本。图片与标签似乎的接近程度就像图片和文本之间的充分连接以使它们在语义上相关。

但是,我的同事提到了figure元素,并且可能以figcaption作为名称和描述性文字来使用。

1 个答案:

答案 0 :(得分:0)

带有figure的{​​{1}}是一个合理的选择(有关figcaption的语义的更多详细信息,请参见here)。

您还可以使用figure,这通常对于标记短语内容非常有用。 MDN在p上的引文阐明了其经常被忽略的有用性:

  

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

因此<p>的语义含义并不局限于文本段落。实际上,它是用于措辞内容的主力容器。此外,关于p的可访问性:

  

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

MDN docs reference

p标签用作任何措辞内容的可访问组:

  

短语内容定义了文本及其包含的标记。措辞内容由段落组成。

     

属于此类别的元素是p<abbr><audio><b><bdo><br><button><canvas><cite><code><command><data><datalist><dfn><em>,{ {1}},<embed><i><iframe><img><input><kbd><keygen>,{{1 }},<label><mark><math><meter><noscript><object><output><picture><progress><q><ruby><samp><script><select><small><span>,{ {1}},<strong><sub><sup><svg><textarea>和纯文本(不仅由空格字符组成)。

MDN Docs reference