目次に戻る

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

概要

カテゴリー
配置できる場所
  • 上記カテゴリー要素が置ける場所。
  • 下記の内容モデルの結果として、footer要素祖先に持ってはならない。
内容モデル

W3C : HTML5.3footer要素子孫たるSectioning content子孫としては、header要素及びfooter要素を含んでもよかった。

属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • main要素article要素aside要素nav要素もしくはsection要素、又は、roleに「mainarticlecomplimentarynavigationもしくはregion」が指定された要素子孫でない場合は、
    • デフォルトroleは、contentinfoデフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外では、grouppresentationnoneを指定可。
  • 上記以外の場合は、
    • デフォルトroleは、なし。
    • デフォルトrole以外では、grouppresentationnoneを指定可。
視覚系ブラウザデフォルトとして期待されるCSS

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

直近の祖先Sectioning content(それがない場合は、直近の祖先Sectioning root)のフッタ部分を表す。

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

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

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

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

W3C : HTML5.3:直近の祖先main要素、又は直近の祖先Sectioning content(それがない場合は、直近の祖先Sectioning root)のフッタ部分を表すとされていた。

私見・補足

内容例の追加→著作権表記(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>