目次に戻る

footer要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
  • 上記カテゴリーの要素が置ける場所。
  • 下記の内容モデルの結果として、footer要素を祖先に持ってはならない。
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • main要素、article要素、aside要素、nav要素もしくはsection要素、又は、roleに「main、article、complimentary、navigationもしくはregion」が指定された要素の子孫でない場合は、
    • デフォルトroleは、contentinfo。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外では、group、presentation、noneを指定可。
  • 上記以外の場合は、
    • デフォルトroleは、generic。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外では、group、presentation、noneを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

  footer {
    display: block;
    unicode-bidi: isolate;
  }
意味・用法

直近の祖先のSectioning content（それがない場合は、body要素）のフッタ部分を表す。

内容例→誰が書いたか、関連ウェブページへのリンク、著作権データなど、直近の所属セクションに関する情報。

この要素が子としてセクションを含む場合は、付録、索引、長い奥付、冗長なライセンス契約などのコンテンツを表す。

著者・編集者の連絡先情報は、address要素でマークアップされた上で、footer要素内に含める場合が多いだろう。

フッタは必ずしも、セクションの最後に出現する必要はない。通常は最後だけれども。

私見・補足

内容例の追加→著作権表記（small要素でマークアップしたうえで、footer要素内に含める場合が多いだろう）、公開日時・更新日時（time要素でマークアップしたうえで、footer要素内に含める場合が多いだろう）、注釈・出典・参考文献（これは、footer要素の内容とせずに、aside要素の内容とする場合も多いだろうが）など。

footer要素それ自体はSectioning contentではないが、その中にSectioning contentを入れ子にすることはできる。footer要素内にnav要素やaside要素が入れ子になっているということもありうるだろう。

footer要素だからといって、セクションの下部に配置されてなければならないという決まりはない。当該セクションにheader要素がないなら上部配置でもかまわないし、header要素の直後にfooter要素を配置することもありうる。さすがに、セクションの上部にfooter要素、下部にheader要素を配置するのは、慣例に反するので望ましくはないだろうが。

footer要素の用例

    <body>
      <h1>○○について</h1>
      <p>文章</p>
      <footer>
        <p><small>Copyright: 2018 Example Corp.</small></p>
        <address>著者の連絡先メールアドレス：example@example.com</address>
        <p>最終更新日：<time datetime="2018-10-20">2018年10月20日</time></p>
      </footer>
    </body>