HTML <footer>

<footer>はコンテンツのフッターを表すHTMLタグです。footer要素の使い方をご紹介します。

header, main, footer and aside
Figure 1. header, main, footer and aside

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。footer 要素の終了タグは省略できない。

<footer>
  <!-- flow content exclude header or footer-->
</footer>
<FOOTER>
  <!-- flow content exclude header or footer -->
</FOOTER>

サンプル

<body>
  <header>
    <img src="logo.png">
  </header>
  <main>
    <h1>サンプル</h1>
  </main>
  <aside>
    <nav>
      <a href="/">home</a>
    </nav>
  </aside>
  <footer>
    <p>Copyright 2001 Tsukamoto Hiroyuki</p>
    <address>
      <a href="contact-form.php">お問い合わせ</a>
    </address>
  </footer>
</body>

コンテンツモデル

footer 要素の開始タグと終了タグの間には、header 要素および footer 要素を除くフロー・コンテンツを含めることができる。具体的には、以下に示す要素である。

footer要素はページ全体のフッターだけでなく、セクションやグルーピング・コンテンツのフッターを記載するのにも使える。

<blockquote>
  <p>There is no place like home.</p>
  <footer>
    <cite>The Wonderful Wizard of Oz</cite>
  </footer>
</blockquote>

There is no place like home.

属性

次に示す属性をfooter要素に指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
HTML文書内で一意な識別子を指定する。
lang
言語を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

JavaScriptからは HTMLElement インタフェースを通じて footer 要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ 型 説明
accessKey string accessKey属性
accessKeyLabel string 要素に割り当てられたアクセスキー（読取り専用）
contentEditable string contenteditable属性
isContentEditable boolean この要素が編集できるかどうか（読取り専用）
dataset DOMStringMap カスタムデータ属性
dir string dir属性
draggable boolean draggable属性
innerText string ノードに描画されるテキスト
lang string lang属性
style string style属性
tabIndex number tabIndex属性
title string title属性

参考文献

Web Hypertext Application Technology Working Group (2022) Sections HTML Living Standard