⚛️
フロントを極める.HTML編｜第1章｜Header Footer
今回の記事では、HTMLのタグの中でも
Header、Footerについて解説します。
ここではARIA (Accessible Rich Internet Applications)[1]については含んでいません。
Header
1. 概要
コンテンツの導入、ナビゲーションの補助をグループ化するためのセマンティック[2]なタグである。
2. 表示形式（display type）
ブロックレベル要素
3. 他のタグでも同じ実装できるのではないか？
できる。しかし、アクセシビリティやSEOの観点からheaderタグでヘッダーを作る方が良い。
Footer
1. 概要
Webページに関する補足情報をグループ化したセマンティックな要素
2. 表示形式（display type）
ブロックレベル要素
3. 具体的に何を入れればよいか
- 著作権情報: © 2025 会社名 のように、著作権表示とその年、権利者を記述する。
- 連絡先情報
- 所在地
- 問い合わせフォームへのリンク
- サイトマップへのリンク: Webサイトの主要なページへのリンク集を提供する。
- ソーシャルメディアへのリンク: 各ソーシャルメディアプラットフォームへのアイコンやリンクを配置する。
- 法的情報へのリンク:
- 利用規約
- プライバシーポリシー
- 免責事項
- 関連サイトへのリンク: 関係のある他のWebサイトや情報源へのリンクを掲載する。
- 言語選択: Webサイトの言語を切り替える機能（プルダウンメニューなど）を設置する。
- ページ内ナビゲーション: 特に長いページの場合、ページ内の主要なセクションへのアンカーリンクを配置する。
- 最終更新日: ページの最終更新日時を表示する。
- ロゴや会社概要の簡単な説明: 再度ブランドを想起、簡潔な会社情報を記載する。
- アクセシビリティ関連のリンク: アクセシビリティに関する声明やガイドラインへのリンクを提供する。
この記事の背景
｜フロントエンジニアの先輩｜
私の先輩は輝いて見える、私が聞いたことは何でも答えてくれる。
一年でここまで成長できるのかが不思議なほどである。
ある日私は、フロント技術になぜそこまで詳しいのか教えてもらった。
曰く、
「自分の書くタグ一つ一つ理解してからでないと、次に行けない性格だから」
曰く、
「私は、全て書き終えてからプレビューしていた」と。
私は驚いた。自分の中には、常に確認しながら物事を進めることが普通だと思っていたからだ。
私は、それを聞いてこう思った。
「自分もいつかこうなりたい」
参考文献
Discussion