HTMLでhタグにsvgを入れると警告が出るので、改善したい

Question

実現したいこと

HTMLでhタグにsvgをインラインで入れるとw3cによる警告が出ます。どうしたら警告を消すことができますか。教えて頂きたいです。(hタグの中にsvg要素を入れているにも関わらず、hタグの中身は空ですと警告が出るのでそれを改善したいという意味です。)

発生している問題・エラーメッセージ

エラーメッセージ
Empty heading.

該当のソースコード

<h3>
     <svg></svg>
</h3>

試したこと

hタグやsvgのインラインでの記述法を検索した。

Comments

[ikedas]

これのことですよね。 https://validator.w3.org/

メッセージの意味が分かっているのなら、そのメッセージが述べている状況を解消すればメッセージは出なくなると思います。ちょっと質問の意図がわかりません。

[webb_eginner]

コメントありがとうございます。hタグの中にsvg要素を入れているにも関わらず、hタグの中は空ですと警告出るので、それを改善したいという意味です。質問の仕方が悪く大変申し訳ございませんでした。

Answer 1

HTMLの見出し要素 (h1 - h6) の内容として許容されるのは記述コンテンツのみです。svg要素は記述コンテンツではないので見出し要素の内容になりませんし、ほかに記述コンテンツが内容として存在しないのでご質問のh3要素は空です。

Comments

[webb_eginner]

教えて頂きありがとうございました。勉強になりました。

[_peanuts_]

横やりを入れるようですみませんが、後学のために教えていただきたいことがあります。

https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories

上記URLによると、SVGも記述コンテンツのようです。したがってh3要素は空ではないと思うのですが、validatorが空であるとみなすのは何故なのでしょうか？

[ikedas]

svgは埋め込みコンテンツですが、たしかにご提示の図を見ると記述コンテンツに含まれているようですね。私の早とちりでした。
が、空のsvg要素は記述コンテンツとしての内容がないので、それしか含まない見出し要素は空と判断されても仕方がないともおもいます。このへんをどう表示するかはバリデータの仕様によるのではないかと思います。

[_peanuts_]

回答ありがとうございます。
svg要素の中にcircle要素とstyle要素を入れて再度validatorでチェックしたところ、エラー無しとなりました。
しかし、circle要素だけだと再びエラーとなりました。
つまり、バリデータはテキスト(正確にはPCDATA？)を含むと「空ではない」と見なすみたいでした。
勉強になりました。