我可以把图片放在标题里面吗?

是否合规?

将图片放在标题内是合规的语法

经过搜索资料与测试(使用 W3C Markup Validation Service🔗),结论是把图片放在标题里面是 100% 合规的语法,标题标签可以接受行内元素,而 <img> 就是行内元素,因此它可以被放置于标题标签之内。

是否是好的作法?

虽然网络上有很多争议,但 Google Search Central 回应是:“这是个好作法🔗!”

也就是说以下的写法是可行而且是好的作法:

<!-- 😀 Good -->
<h1>
<a href="/">
<img src="logo.svg" alt="A 公司的 LOGO" />
</a>
</h1>
<h2>
<img src="cat-with-sign.webp" alt="一只猫咪抱着一块牌子上面写「领养资讯」" />
</h2>

由于图片的 alt 属性撰写上实际上有一些 建议的撰写方式🔗 因此我能想象得到如果把装饰图片与标题分离,并用 CSS 隐藏标题文字在该情境下也会是一个不错的选择,举例来说 Bootstrap 有 visually-hidden🔗 而 Tailwind 有 sr-only🔗 让文字在视觉上不会显示,但语义上是存在的。

<h2 class="visually-hidden">领养资讯</h2>
<img src="cat-with-sign.webp" alt="一只猫咪抱着一块牌子上面写「领养资讯」" />

参考资料