トモジ
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タグに関しての説明をしました。
図で説明したタグの配置に明確なルールはなく
作成するwebサイトにasideタグを使用しないで作成される事も多く見られます。
サイト内で右クリックをして
[ページソース表示]を選択すると
サイト内のコーディングが確認できますので、
色々なwebサイトを参考にしてみましょう。