part2こんにちは。デザイナーのアツミです。前回、html5から追加になったタグの復習の記事を書きましたが、せっかくなので勉強も兼ねて、続きを書いていきたいと思います。今回は、引き続き文書構造に関わるタグの「header」「footer」「nav」「figure」「figcaption」についてです。文書構造に関わるタグ(続き)headerfooternavfigurefigcaption最後に参考サイト文書構造に関わるタグ(続き)headerheaderはその名の通り、<header>~</header>で囲まれたところが、文書全体、またはセクションのヘッダーであることを示す際に使用します。header要素には、文書全体(またはセクション)に対するイントロダクションやナビゲーションとなる内容を配置することができます。)関連ロゴ(サイトや企業のロゴ)等とのこと。この要素をbodyの子要素として配置した場合は、文書全体のヘッダーを表すことになり、セクション内に配置した場合は、そのセクションのヘッダーを表すことになります。(例えば、article要素の子要素として配置した場合は、その記事に対するヘッダーを表す)余談ですが、このタグ(とfooter、navも)が登場する前のhtml4の時は、毎度のように<div>にclassやidでヘッダーやフッターとして分類していたのが、なんだか懐かしいです...(笑)footerfooterもその名の通り、<footer>~</footer>で囲まれたところが、文書全体、またはセクションのフッターであることを示す際に使用します。(コピーライト)発行日時(文書や記事の発行日時)関連文書へのリンク戻るリンク(前のページ、ページの先頭)等とのこと。ちなみに「著作者や編集者の連絡先」はaddress要素で、「著作権」はsmall要素で、それぞれfooter要素内に配置することが多いのだそうです。footer要素はセクションの最後に配置することが多いとは思いますが、必ずしもそうする必要はないとのこと。(最後に置きがちですが、なるほど...)nav<nav>~</nav>で囲まれたところが、文書内の他箇所や他の文書へのナビゲーションリンクであることを示す際に使用します。具体的には、グローバルナビゲーションパンくずリストページャーページ内リンク等とのこと。個人的に<nav>というと=グローバルナビゲーションという認識が強かったのですが、パンくずやページャーに使用するのもありなんですね。nav要素は文書内に複数回使用可能なので、それぞれの箇所の使用も今後検討してみようと思います。見出し要素を使用したナビゲーションタイトルがある場合も、ナビゲーションの一部なので、<nav>で囲んでしまっていいようです。ソースコード等)であることを示す際に使用します。figure要素は自己完結型のコンテンツであり、離れた場所に配置しても本文に影響が出ない内容で使用することができます。本文と切り離してしまうと文章が成立しないような図版には、<figure>の使用は推奨されていないようです。ちなみに、図版にキャプションを付けたい場合は、figure要素内にfigcaption要素を使用します。<figcaption>~</figcaption>で囲まれたところが、本文から参照される図版のタイトルや説明であることを示す際に使用します。<figure>の子要素として1つだけ配置することができます。(1つだけなので、もしキャプションを2つ以上置きたい場合は、1ヶ所以外は<p>等別のタグを使う必要があります)最後に前回の記事と併せて、html5から追加になった「文書構造に関わるタグ」はこれで全て復習することができました。「文書構造に関わるタグ」はなんとなくの使い方はわかってはいたものの、細かいところまで理解しきれていなかったのだなと改めて思いました...。個人的にはとても良い復習の機会でした(笑)またの機会には、文書構造以外のタグについても書いてみようかなと思います。