img要素に権利表記をつける方法について

HTMLで画像にコピーライトを付けようとする場合にどうマークアップすればいいのか迷ったので少し調べてみました。

MDNによると権利表記に使える要素はsmall要素で、footer要素のページ中にsmallを使う例が記述されています。

img要素の直後にsmallを置くと何に対する権利表記なのかが曖昧になるため、figure要素あたりでimgを囲む形がよさそうです。
権利表記用のsmallをfigcaption内に入れるかどうかも少し悩みますが、画像の説明ではないので無くてもいいでしょう。

figureの中にfooter要素を作り、その中にsmallを記述する形でもいける……かと思ったのですが、footer要素は直近の区分コンテンツまたは区分化ルート要素のフッターを表します。とあり、figure要素のフッターとしてfooter要素を使うことはできない模様。sectionの中にfooterを使うのはアリ。

またfigure要素は内容が本文と切り離されても問題ない場合に使うようなので、文章を構成する重要な画像だったりするときはsectionやdiv等を適宜選択していくことになるかと思われます。


結論としては、画像に権利表記をつける書き方は以下の2パターンになりそう。

figure要素内にimgを置き、smallで権利表記を記述する
<figure>
  <img src="path">
  <small>©うんたら</small>
</figure>
section要素内にimgを置き、(必要ならfooterの中に入れた)smallで権利表記を記述する
<section>
  <img src="path">
  <footer>
    <small>©かんたら</small>
  </footer>
</section>

img直後のsmallは改行等されないので、レイアウト調整はCSSで行うことになるでしょう。
首都高バトルのスクリーンショットを貼ろうと思ったときに気になった次第なのですが、これで多分OK……?

有識者の方がいましたらコメント等でお願いします。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA