こんにちは。現場でフロントエンドの品質管理を担当しているシニアデザイナーです。今回は、HTMLのaddress要素について、少し踏み込んだ話をしましょう。「連絡先を書くタグ」という認識はあっても、実務で意図通りに使いこなせているケースは意外と少ないものです。
address要素の「範囲」を正しく理解する
多くの初心者が陥りがちなミスは、ページ全体やサイト全体の連絡先をすべてfooterのaddressタグ一つに詰め込んでしまうことです。しかし、仕様書を紐解くと、address要素は「その要素を直接含む、最も近いarticle要素、またはbody要素」の連絡先情報を示すものと定義されています。
つまり、ブログ記事のフッターに著者のSNSリンクを貼るなら、それはその記事のaddress要素として記述すべきですし、サイト全体のオフィス情報とは明確に切り離すのが正解です。「誰の連絡先なのか」という親子関係を明確にすることが、検索エンジンやアクセシビリティツールへの正しい意思表示になります。
見た目のスタイリングに依存しない
実務でよく見かける残念なパターンは、CSSでaddress要素に「font-style: italic;」を当てて終わりにしてしまうことです。ブラウザのデフォルトスタイルが斜体であるため、それを解除したり上書きしたりする作業に追われている方も多いでしょう。
ここで意識してほしいのは、address要素はあくまで「セマンティックな箱」であるという事実です。CSS設計の観点からは、このタグに装飾的なプロパティを当てるよりも、構造を定義するための役割に徹させるべきです。私は、address要素内にはあえてulやliを配置し、意味論的な構造を担保した上で、レイアウトは別途定義したクラス名で行うようチームに推奨しています。
SEOと構造化データの架け橋として
最近のSEOトレンドにおいて、address要素単体で順位が劇的に上がることはありません。しかし、Googleの構造化データ（Schema.org）と組み合わせたとき、その真価が発揮されます。
例えば、address要素の中にitemprop属性を適切に配置し、その情報をJSON-LDで記述したOrganizationデータと紐付ける。こうすることで、「人間が見るWebページ」と「機械が読むデータ」の整合性が取れ、ナレッジグラフへの反映率や情報の信頼性が高まります。単なる連絡先表示と思わず、データの起点として捉えてみてください。
まとめ
address要素は、単なるテキストの置き場ではありません。そのページや記事の「責任の所在」を明らかにする重要なタグです。次にコーディングする際は、その連絡先情報が「誰の、どのスコープを指しているのか」を一度立ち止まって考えてみてください。たったそれだけの意識の差が、プロフェッショナルなマークアップへの第一歩となります。
コメント