ブログBLOG

Tips

2019.10.16

author:アツミWEBデザイナー

今一度復習したい!html5で追加になった要素 part2

今一度復習したい!html5で追加になった要素 part2

こんにちは。デザイナーのアツミです。

前回、html5から追加になったタグの復習の記事を書きましたが、せっかくなので勉強も兼ねて、続きを書いていきたいと思います。

今回は、引き続き文書構造に関わるタグの「header」「footer」「nav」「figure」「figcaption」についてです。

文書構造に関わるタグ(続き)

header

headerはその名の通り、<header>~</header>で囲まれたところが、文書全体、またはセクションのヘッダーであることを示す際に使用します。
header要素には、文書全体(またはセクション)に対するイントロダクションやナビゲーションとなる内容を配置することができます。
具体的には、

  • h1やh2等の見出し(※必須ではない)
  • リンクメニュー(グローバルナビゲーション、その他リンクメニュー等)
  • イントロダクション(序説、前置き)
  • 発行日時(文書や記事の発行日時)
    ※footer要素の方が適している場合もあり
  • 検索フォーム(サイト内検索、商品検索等)
  • 関連ロゴ(サイトや企業のロゴ)

等とのこと。

この要素をbodyの子要素として配置した場合は、文書全体のヘッダーを表すことになり、セクション内に配置した場合は、そのセクションのヘッダーを表すことになります。(例えば、article要素の子要素として配置した場合は、その記事に対するヘッダーを表す)

余談ですが、このタグ(とfooter、navも)が登場する前のhtml4の時は、毎度のように<div>にclassやidでヘッダーやフッターとして分類していたのが、なんだか懐かしいです…(笑)

footer

footerもその名の通り、<footer>~</footer>で囲まれたところが、文書全体、またはセクションのフッターであることを示す際に使用します。フッターには、文書全体(またはセクション)に関する情報を配置することができます
具体的には、

  • 著作者
  • 連絡先
  • 著作権(コピーライト)
  • 発行日時(文書や記事の発行日時)
  • 関連文書へのリンク
  • 戻るリンク(前のページ、ページの先頭)

等とのこと。

ちなみに「著作者や編集者の連絡先」はaddress要素で、「著作権」はsmall要素で、それぞれfooter要素内に配置することが多いのだそうです。
また、footer要素はセクションの最後に配置することが多いとは思いますが、必ずしもそうする必要はないとのこと。(最後に置きがちですが、なるほど…)

nav

<nav>~</nav>で囲まれたところが、文書内の他箇所や他の文書へのナビゲーションリンクであることを示す際に使用します。
具体的には、

  • グローバルナビゲーション
  • パンくずリスト
  • ページャー
  • ページ内リンク

等とのこと。

個人的に<nav>というと=グローバルナビゲーションという認識が強かったのですが、パンくずやページャーに使用するのもありなんですね。nav要素は文書内に複数回使用可能なので、それぞれの箇所の使用も今後検討してみようと思います。
また、見出し要素を使用したナビゲーションタイトルがある場合も、ナビゲーションの一部なので、<nav>で囲んでしまっていいようです。(知らなかった!)

figure

<figure>~</figure>で囲まれたところが、本文から参照される図版(挿絵、図表、写真、ソースコード等)であることを示す際に使用します。
figure要素は自己完結型のコンテンツであり、離れた場所に配置しても本文に影響が出ない内容で使用することができます。つまり、本文と切り離してしまうと文章が成立しないような図版には、<figure>の使用は推奨されていないようです。
ちなみに、図版にキャプションを付けたい場合は、figure要素内にfigcaption要素を使用します。

個人的にイマイチ使い所がよくわかっていなかったタグなのですが、文章と切り離しても大丈夫な図版に使用できると理解できました!

figcaption

(「figure」内でも説明いたしましたが) <figcaption>~</figcaption>で囲まれたところが、本文から参照される図版のタイトルや説明であることを示す際に使用します。
<figure>の子要素として1つだけ配置することができます。(1つだけなので、もしキャプションを2つ以上置きたい場合は、1ヶ所以外は<p>等別のタグを使う必要があります)

最後に

前回の記事と併せて、html5から追加になった「文書構造に関わるタグ」はこれで全て復習することができました。
「文書構造に関わるタグ」はなんとなくの使い方はわかってはいたものの、細かいところまで理解しきれていなかったのだなと改めて思いました…。個人的にはとても良い復習の機会でした(笑)
またの機会には、文書構造以外のタグについても書いてみようかなと思います。

参考サイト

関連記事

RECENT POSTS