Can I Put Image Inside Heading?

我可以把圖片放在標題裡面嗎？

@ HTML

是否合規？

將圖片放在標題內是合規的語法

經過搜尋資料與測試(使用 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="一隻貓咪抱著一個牌子上面寫「領養資訊」" />

參考資料