根据Web标准，我们可以将`<img>`放在`<h1>`中吗？

Question

根据网络标准，我们可以把<img>放在<h1>中吗？就像这样

<h1> Demo text <img src="anyimage.jpg"/> </h1>

- Jitendra Vyas

Answer 1

是的，你可以这样做 - 根据DTD的规定：

<!ELEMENT h1  %Inline;>
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">
<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">
<!ENTITY % special "%special.pre; | object | img ">

这基本上意味着h1可以包含%Inline，其中包括各种元素，包括img

- Greg

Answer 2

看看谁在使用它：http://www.w3.org/

<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C" /></a> <span class="alt-logo">W3C</span></h1>

- Max

---

这可能是错误的用法。使用屏幕阅读器时，它会大声朗读：“W3C W3C”。因为它会朗读alt属性和span元素。我不确定，但如果span被定义为display：hidden，则不会朗读它。ALT文本的好阅读材料在此处。 - Ciantic

我同意，回复晚了。但如果是2018年，我会将alt设置为空字符串“”，并保持span与屏幕阅读器的唯一CSS。 - Gcamara14

@Gcamara14 你是指这样的内容吗？<h1><img src="img.png" alt="" /><span class="screen-reader-text">我的标题</span></h1> 搜索引擎是否会基于这样的隐藏文本来降低排名？ - Jordan Carter

Answer 3

是的，这是允许的。但不要忘记在 img 标签上设置 alt 属性！

- igor

---

当图片无法显示时，alt文本充当h1的内容，提到alt得分+1。 - Adam Elsodaney

Answer 4

总结其他答案，在<h1>中使用<img>是符合W3C标准的。

虽然为了完全符合规范，您应该添加一个alt属性到您的图像，因为这是强制性的。这个属性不需要包含文本。最好让它保持空白，而不是重复h1标签中已经写的内容。

如果您的图片纯粹是装饰性的，则应为：

<h1>Demo text <img src="anyimage.jpg" alt=""/></h1>

更多关于装饰性图片的文本替代信息：https://www.w3.org/WAI/tutorials/images/decorative/

如果图片具有特定含义或包含与h1中不同的文本，则使用适当的替代方案。

- neiya

Answer 5

可以和不可以。

你可以将图像放在h1元素中，但不完全像那样... alt属性是必需的。

- Quentin