h1要素とimg要素

以下のようなご質問をいただきました。

img要素をh1要素でマークアップすることはWeb標準の観点からして正しいのでしょうか？
ブロックレベル要素の中にインライン要素が入る形になるので構造上は問題ないと思うのですが、本来hx要素には見出しとなるテキストを包括するのが正しいと認識しています。

img要素をh1要素でマークアップすることは、正しいか正しくないかの二者択一で答えるならば、「正しい」と思います。質問者の方もお書きになっているように構造上は問題ないですし、仕様上もまったく問題なく、そのようなマークアップは文法的に妥当だからです。

テキストを包括するのが正しいとお書きになっていますが、DTD（文書型定義）を確認する限り、正確にはインライン要素を包含するという表現になるかと思います。見出しとなるテキストといいますのは、#PCDATAに相当すると察しますが、これはDTDの内容モデルにおいてインライン要素に含まれています。

なお、SEO（検索エンジン最適化）の観点から、img要素をh1要素でマークアップするのは好ましくないといった話を聞いたことがあります。筆者自身はimg要素のalt属性値を読み取らない検索エンジンというものを確認してはいませんが、検索エンジン側の仕様は頻繁に変化しているようですし、そもそもそのような要因に合わせてマークアップを変えるというのは奇異に感じます。

コメント

これは、h1要素の中に、img要素だけが入った状態でもいいのかという質問と解釈しました。答えとしては、書かれている通り文法上「正しい」ので問題ないってことになりますが、alt属性の内容がh1要素の内容として妥当なものであれば、という前提が必要ですね。

yuuさま、補足をありがとうございます。img要素を使用するからには、当然ながら適切なalt属性値が必要となります。

とても参考になりました。

いろんなサイト探してもこれだけ詳しく書いている
サイトはなかったです。

ありがとうございました！