footerとaddressの「正しい関係性」を再定義する：その連絡先、本当に正しく伝わっていますか？
フロントエンドの世界に足を踏み入れて数年、「`footer`の中に`address`を入れておけばOK」という認識で止まっていませんか？
多くのエンジニアが「なんとなく」で実装しているこのセマンティクスですが、実は仕様を紐解くと、ブラウザや支援技術（スクリーンリーダー）に対する「情報の伝え方」に大きな差が生まれるポイントです。今日は、現場レベルで迷いがちな`address`要素の正しい解釈と、一歩先行くマークアップのベストプラクティスについて深掘りしましょう。
1. address要素の「本当の役割」を理解する
まず、HTML Living Standardにおける`address`要素の定義を再確認します。ここは非常に重要です。
> `address`要素は、その要素が先行する最も近い`article`要素、または`body`要素の「連絡先情報」を提供するものです。
多くの人が勘違いしがちなのは、「物理的な住所を書く場所」だと思っていることです。もちろん郵便番号や住所も含まれますが、本質は「著者や所有者のコンタクト手段」です。つまり、電話番号やメールアドレス、SNSのプロフィールリンクなどが含まれていれば、それは`address`要素の役割を十二分に果たしていることになります。
2. ブラウザは裏でどう処理しているのか？
ブラウザのユーザーエージェントスタイルシートにおいて、`address`はデフォルトで `display: block;` が当たっており、さらに `font-style: italic;`（斜体）が適用されているのが一般的です。
しかし、ここで一つ注意点があります。「斜体だから」という理由だけで`address`を使うのは絶対にNGです。
スクリーンリーダーは`address`要素に遭遇すると、「ここには連絡先情報がある」というセマンティクスを読み上げソフト側に伝えます。もし、デザイン上の理由で住所を`p`タグや`div`タグで囲み、CSSで斜体にした場合、視覚的には同じでも、マシンリーダブル（機械可読）な意味合いは完全に失われてしまいます。
「人間が見るデザイン」と「マシンが理解する構造」。この両者を正しく分離するのが、我々プロの腕の見せ所です。
3. 実践：現場で使える「堅牢なfooter」のマークアップ
実務では、単にタグを置くのではなく、`schema.org`の構造化データ（Microdata）と組み合わせるのがベストプラクティスです。検索エンジンに「ここが会社の連絡先だ」と明示することで、SEO的にも非常に高い効果を発揮します。
以下に、そのままコピー＆ペーストして調整できる、実用性の高いコード例を示します。
4. シニアからのアドバイス：なぜこう書くのか？
上記のコードには、いくつかの「現場の知恵」が詰まっています。
1. `font-style: normal;` の強制: ブラウザ依存の斜体をリセットすることは、デザインの一貫性を保つための必須事項です。「なんとなく斜体になっている」状態を放置しないこと。
2. Microdataの付与: `itemprop` を使うことで、Googleのクローラーに対してこのテキストが「住所」なのか「電話番号」なのかを明示しています。これにより、検索結果のリッチスニペット最適化にも繋がります。
3. 論理的な構造: `h2`でセクションを切り、`address`の中に必要な情報を集約させることで、スクリーンリーダーのユーザーが「連絡先」という情報を一塊として素早くナビゲートできるようにしています。
まとめ：小さな積み重ねが「質の高いコード」を作る
`footer`に`address`を配置する。これだけの作業ですが、その背景にある「誰のために、どういう構造で情報を届けるか」という意図を明確にすることで、あなたの書くコードの質は劇的に向上します。
「動けばいい」コードから、「メンテナンスしやすく、マシンに優しく、そしてユーザーに誠実な」コードへ。今日からぜひ、このマークアップを標準にしてみてください。現場で後輩から「なぜそう書くんですか？」と聞かれたとき、この理由を語れるようになれば、あなたはもう立派なシニアフロントエンドエンジニアです。
コメント