2-3. footer要素のマークアップ
このチャプターでは、footer要素のマークアップなどについて解説しています。ここで記述する内容も、すべて適宜ブラウザの画面に反映されていきます。
コピーライト表記を入れる
フッターにはサイトの著作権や権利に関する情報を入れます。著作権や法的表記のマークアップには、「附随コメント要素」であるsmall要素を使用します。
ここではサイト名とリンクのみ入れています。
<footer class="footer">
<p><small>© <a href="./">My Profile</a></small></p>
</footer>
smallは、かつてのHTMLの仕様ではその名の示すとおり「文字の大きさを通常より小さく表示する」タグでした。現在の仕様では著作権や法的表記のマークアップに使用するタグなので、「文字を小さくする」目的での使用には適しません（ブラウザのデフォルトスタイルでは、小さめのフォントサイズで表示されます）
©は©マークの文字参照です。meta要素の文字コードがutf-8であれば、©と書いても問題ありません。
この状態で保存したindex.htmlをブラウザで開くと、以下のように表示がされます。smallの部分は小さいフォントサイズで表示されています。
ここまでに記述したコード
ここまで記述したHTML文書の中身です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="robots" content="noindex,nofollow,noarchive">
<title>My Profile</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<h1>My Profile</h1>
<figure class="prof_icon"><img src="./images/icon.png" alt="プロフィールのアイコン" width="80" height="80"></figure>
<p>
プロフィール・リンク一覧のサンプルページです。<br>
ここにプロフィール紹介文を入れてください。
</p>
<p>
ハンズオン記事は<a href="/ho_ref/handson-bio">こちら</a>です。
</p>
</header>
<main class="main">
<h2>Link</h2>
<ul>
<li><a href="">
<h3><i class="ph-fill ph-house" aria-hidden="true"></i>サイト名など</h3>
<p>説明文が入ります</p>
<i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
</a></li>
<li><a href="">
<h3><i class="ph-fill ph-x-logo" aria-hidden="true"></i>X(Twitter)</h3>
<p>説明文が入ります。多少長くなっても大丈夫です。説明文が入ります。多少長くなっても大丈夫です。説明文が入ります。多少長くなっても大丈夫です。</p>
<i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
</a></li>
<li><a href="">
<h3><i class="ph-fill ph-cube" aria-hidden="true"></i>サイト名など</h3>
<p>説明文が入ります</p>
<i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
</a></li>
</ul>
</main>
<footer class="footer">
<p><small>© <a href="./">My Profile</a></small></p>
</footer>
</div>
</body>
</html>
この状態のindex.htmlをブラウザで開くと、ブラウザが用意しているデフォルトスタイルがあたるのみで、デザイン的なものはまだ何もない状態ですが、文書構造としては整理されていて読みやすさを感じるかと思います。また、検索クローラーや音声読み上げ機能は、基本的にこの状態のHTML文書を読み取ります。
CSSでスタイルやレイアウトはいかようにも整えられますが、文書構造が整理された状態だと、CSSを書く際もあまり悩まず、無理やりスタイルをあてるようなこともしなくて済むので、可能な限り構造が整理できるように心がけてHTMLをマークアップしていくとよいかと思います。
以上でHTML文書のマークアップは終了です。おつかれさまでした。
次のチャプターから、HTML文書にCSSでスタイルをあてていきます。
参考情報など
このチャプターで解説した各HTMLタグについて、詳細の仕様を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントもご覧ください。
また、文字参照については以下Wikipediaの項目が参考になるかと思います。実際にHTML文書で使用頻度が多いのは、<や>に代表される文字実体参照（実体参照）の方です。