header footer nav asideの使い方

トモジのアイコン画像トモジ

headerタグ・footerタグ・navタグ・asideタグの違いって何?
意味と使い方を知りたい!

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、これから勉強を始めるあなたに
headerタグ・footerタグ・navタグ・asideタグに関して要点をわかりやすく説明しております。

記事の内容

header footer nav asideの意味

headerタグ・footerタグ・navタグ・asideタグの使い方について説明したいと思います。

タグの説明
  • [header]
    文書全体の見出しや導入を示す
    ヘッダ部分に使用
    ※ロゴ・ナビゲーション・全体の見出し・検索窓など

  • [footer]
    文書の付加情報などを表す部分に使用
    ※著作者に関する情報・ナビゲーション・SNSリンクなど

  • [nav]
    同一サイトページ内、他のコンテンツやページにジャンプするナビゲーションに使用
    ※ナビゲーションなど

  • [aside]
    メインコンテンツの間接的な内容に使用
    ※ナビゲーション・補足情報・検索窓など

一般的なwebサイト使用されるheaderタグ・footerタグ・navタグ・asideタグの一例が以下の構図になります。

headerタグ・footerタグ・navタグ・asideタグの説明図
タグ配置に関して

まとめ

今回はheaderタグ・footerタグ・navタグ・asideタグに関しての説明をしました。

図で説明したタグの配置に明確なルールはなく
作成するwebサイトにasideタグを使用しないで作成される事も多く見られます。

サイト内で右クリックをして
[ページソース表示]を選択すると
サイト内のコーディングが確認できますので、
色々なwebサイトを参考にしてみましょう。

記事の内容
閉じる