HTML addressタグ
HTMLのaddressタグは連絡先情報を示すために使用する
HTMLにおけるaddressタグは、住所だけではなく電話番号、メールアドレスなどを示し、これら住所以外の連絡先・問い合わせ情報も記述可能です。
そのため、addressタグを単純に「住所を書くためのタグ」と理解してしまうと、本来の用途を十分に活用できません。
addressタグは、そのページや記事、あるいはWebサイトを運営している個人や組織への連絡先情報を表現するための要素です。
例えば企業ホームページであれば、会社名、所在地、電話番号、メールアドレスなどをまとめて記述することができます。
株式会社〇〇
〒600-0000 京都府京都市〇〇区〇〇町1-1
TEL：000-000-0000
メール：info@example.com
このように記述することで、単に画面上に文字を表示するだけではなく、その部分が連絡先情報であることをHTMLの意味として示すことができます。
住所だけをaddressタグに入れる必要はない
addressという名称から、住所だけを記述するタグだと思われることがあります。
しかし、HTMLにおけるaddressは、一般的な意味での「住所」を表すためだけの要素ではありません。
Webページの作成者や所有者、運営者などへの連絡先情報を示すことが目的です。
そのため、会社ホームページであれば所在地だけではなく、電話番号やメールアドレスなどを含めることができます。
例えば、フッター部分に会社情報と問い合わせ先を掲載する場合にも利用できます。
株式会社〇〇
京都府京都市〇〇区〇〇町
電話番号：000-000-0000
info@example.com
このように連絡手段をまとめて示すことで、ユーザーにとっても問い合わせ先を見つけやすくなります。
ただし、会社情報が掲載されているという理由だけで、すべての会社概要ページをaddressタグで囲む必要があるという意味ではありません。
HTMLでは、見た目ではなく、その情報が何を意味しているのかを考えてタグを選択することが重要です。
addressタグとpタグは役割が異なる
例えば、住所を単純な文章として表示するのであれば、pタグを使うこともできます。
京都府京都市〇〇区〇〇町1-1
これは住所という文字列を段落として表示しているだけです。
一方、サイト運営者への連絡先情報として示すのであれば、addressタグを利用する意味があります。
つまり、HTMLでは「どのように表示したいか」だけではなく、「その情報は何なのか」を考えることが重要です。
CSSによってaddressタグの見た目を自由に変更することもできます。
addressタグを使用したからといって、必ず特別なデザインにする必要はありません。
CSSによって通常のテキストと同じような外観にすることもできますし、会社情報欄としてレイアウトすることもできます。
HTMLが情報の意味や構造を担当し、CSSがその見た目を担当するという基本的な考え方を理解しておくと、addressタグの使い方も分かりやすくなります。
電話番号はtelリンクと組み合わせる
企業ホームページでは、電話番号をaddressタグの中に記述することがあります。
スマートフォンからのアクセスを考えるのであれば、電話番号をtelリンクにしておくと利便性が高まります。
000-000-0000
これをaddressタグの中に記述すれば、連絡先情報として意味を持たせながら、スマートフォンユーザーがタップして電話をかけられる導線を作ることができます。
特に店舗、病院、士業、住宅関連、修理業、サービス業など、電話問い合わせが重要な事業では、このような細かな設計がユーザー体験に影響します。
PCで閲覧するユーザーとスマートフォンで閲覧するユーザーでは、電話番号の利用方法が異なります。
そのため、単に電話番号を掲載するだけではなく、実際に問い合わせをするユーザーの行動まで考えてHTMLを設計することが重要です。
メールアドレスを記述する場合
メールアドレスについても、addressタグの中に記述できます。
単純に文字列として記述する場合は次のようになります。
[info@example.com](mailto:info@example.com)
問い合わせを促すのであれば、mailtoを利用してメールソフトなどが起動するリンクにすることもできます。
[info@example.com](mailto:info@example.com)
ただし、企業ホームページではメールアドレスを直接掲載することで、迷惑メールの収集対象になる可能性もあります。
そのため、問い合わせフォームを設置している場合は、メールアドレスを必ずしも公開する必要はありません。
addressタグを使うかどうかと、メールアドレスを公開するかどうかは別の問題として考える必要があります。
記事の中でもaddressタグを使用できる
addressタグは、Webサイト全体のフッターだけに限定されるものではありません。
HTMLでは、文書や記事に関連する連絡先情報を示すためにも利用できます。
例えば、企業が公開している記事の末尾に、その記事の作成者や組織への連絡先を示す場合などです。
ただし、記事本文の中に単に住所が登場したからといって、すべてをaddressタグで囲む必要はありません。
例えば、「京都府京都市に店舗があります」という文章に含まれる住所は、運営者への連絡先情報ではありません。
このようなケースでは通常の文章として記述する方が自然です。
HTMLのタグは、文字列の種類だけで判断するのではなく、その情報が文書の中でどのような役割を持っているのかによって選択する必要があります。
addressタグをSEO目的だけで使わない
HTMLタグを適切に使用することは重要ですが、addressタグを設定したから検索順位が上がるという考え方は適切ではありません。
SEOでは、特定のタグを設定することだけに注目するのではなく、ページ全体の情報構造やコンテンツ、ユーザーにとっての有用性などを考える必要があります。
addressタグについても、「SEO対策のために住所をaddressタグに入れる」という考え方ではなく、「この部分は運営者への連絡先情報だからaddressタグで表現する」という意味付けが基本になります。
HTMLを正しく使うことは、検索エンジンだけではなく、ブラウザや支援技術などがページ構造を理解するうえでも重要です。
そのため、SEOの小手先としてではなく、HTMLのセマンティックな設計の一部としてaddressタグを考えるとよいでしょう。
ホームページ制作ではフッターの連絡先に活用できる
企業ホームページでは、addressタグが特に活用しやすい場所の一つがフッターです。
多くのホームページでは、ページの最下部に会社名、所在地、電話番号、メールアドレス、営業時間などを掲載しています。
このうち、運営者への連絡先として扱う情報を適切にHTMLでマークアップしておくことで、文書構造を整理できます。
ただし、営業時間やアクセス情報など、すべてを無条件にaddressタグへ入れる必要があるわけではありません。
何が「連絡先」で、何が「営業情報」なのかを考えながら構造化することが重要です。
ホームページ制作では、デザインを先に考えてHTMLを後から合わせるのではなく、情報の意味と構造を考え、その構造に対してCSSでデザインを適用するという考え方が基本になります。
addressタグも、そのようなセマンティックHTMLの考え方を理解するうえで分かりやすい要素の一つです。
住所、電話番号、メールアドレスなどを見た目だけで配置するのではなく、「誰に対する連絡先なのか」「ページ内でどのような意味を持つ情報なのか」を考えてマークアップすることが、適切なHTML設計につながります。
MUSIC&WEB制作（ホームページ制作） 音楽とウェブ制作について ホームページ制作やSEO、Webマーケティング
PR