是否合规?
将图片放在标题内是合规的语法
经过搜索资料与测试(使用 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="一只猫咪抱着一块牌子上面写「领养资讯」" />