2-3. footer要素のマークアップ

このチャプターでは、footer要素のマークアップなどについて解説しています。

コピーライト表記を入れる

フッターにはサイトの著作権や権利に関する情報など、書籍の「奥付け」に相当する内容を記載します。本ハンズオンでは、ページの著作者表示を入れています。

<footer class="footer">
  <p><small>&copy; <a href="./">My Profile</a></small></p>
</footer>

&copy;は©マークの文字参照です。meta要素の文字コードがutf-8であれば、©と書いても問題ありません。

small要素（附随コメント要素）

small要素は、著作権や法的表記のマークアップに利用します。

かつてのHTMLの仕様では、その名の示すとおり「文字の大きさを通常より小さく表示する」目的で利用するHTML要素でした。現在の仕様では著作権や法的表記のマークアップに使用するので、「文字を小さくする」目的での使用には適しません。ただし、ブラウザのデフォルトスタイルでは、通常よりすこし小さめのフォントサイズで表示されます。

表示確認

この状態で保存したindex.htmlをブラウザで開くと、以下のように表示がされます。smallの部分は小さいフォントサイズで表示されています。

HTMLのマークアップが済んだ状態のブラウザ表示

ここまでに記述したコード

ここまで記述した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>&copy; <a href="./">My Profile</a></small></p>
  </footer>

</div>

</body>
</html>

この状態のindex.htmlをブラウザで開くと、ブラウザが用意しているデフォルトスタイルがあたるのみで、デザイン的なものはまだ何もない状態ですが、文書構造として整理されているため、このままでもある程度読みやすさを感じるかと思います。検索クローラーや音声読み上げ機能は、基本的にこの状態のHTML文書を読み取ります。

スタイルシートでレイアウトなど見た目の表示はいかようにも整えられますが、文書構造が整理されているとスタイルシートを書く際にもあまり悩まず、無理やりスタイルをあてるようなこともしなくて済むので、可能な限りHTML構造が整理された文書を書くように心がけてHTMLをマークアップしていくとよいかと思います。

以上でHTML文書のマークアップは終了です。おつかれさまでした。次のチャプターから、HTML文書にスタイルシートでスタイルをあてていきます。

参考情報など

このチャプターで解説した各HTML要素について、詳細の仕様を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントもご覧ください。

また、文字参照については以下Wikipediaの項目が参考になるかと思います。実際にHTML文書で使用頻度が多いのは、<や>に代表される文字実体参照（実体参照）の方です。

results matching ""

    No results matching ""