【HTML Living Standard】address要素の使い方
address要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
addressオブジェクトは、HTMLドキュメントやその特定の部分の作成者や管理者の連絡先情報を表すオブジェクトです。この要素は、最も近い祖先である<body>要素全体、またはarticle要素の内容に関して、その連絡先情報を提供するために使用されます。具体的には、ウェブサイト全体の著者や運営者、あるいは特定の記事の執筆者などの連絡先を示す際に利用します。
address要素の中には、個人の名前、組織名、物理的な住所、電話番号、メールアドレス、関連するURLなどの情報を記述できます。例えば、ウェブサイトのフッターに運営者の問い合わせ先を記載したり、ブログ記事の終わりに記事作成者の情報を配置したりする際に適しています。ただし、この要素は一般的な郵便宛先や地理的な場所を示すためだけに使用するべきではありません。その役割は、あくまでコンテンツの「責任者」への問い合わせ先を明確にすることに限定されます。
ブラウザによるデフォルトのスタイルでは、address要素内のテキストは通常イタリック体で表示されますが、これはカスケーディングスタイルシート（CSS）を用いて自由に変更できます。セマンティックなマークアップの観点から、この要素は検索エンジンや支援技術がウェブページの重要な連絡先情報を正しく理解し、適切な文脈で提示するのに役立ちます。そのため、その用途を正しく理解し、適切に利用することが推奨されます。
構文(syntax)
1<address> 2 <a href="mailto:contact@example.com">contact@example.com</a><br> 3 株式会社サンプル<br> 4 東京都サンプル区サンプル町1-2-3 5</address>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのaddressタグで連絡先情報を示す
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>addressタグのサンプル</title> 7</head> 8<body> 9 <header> 10 <h1>サンプルサイト</h1> 11 </header> 12 13 <main> 14 <p>このページは、HTMLの<code><address></code>タグの基本的な使い方を示すサンプルです。</p> 15 <p>通常、フッターなどでサイトの連絡先情報を示すのに使われます。</p> 16 </main> 17 18 <footer> 19 <!-- addressタグは、最も近いarticle要素またはbody要素の連絡先情報を示します。 --> 20 <address> 21 <p>株式会社ウェブサービス</p> 22 <p>〒100-0000 東京都千代田区〇〇町1-2-3</p> 23 <p>電話: <a href="tel:+81312345678">03-1234-5678</a></p> 24 <p>メール: <a href="mailto:info@example.com">info@example.com</a></p> 25 <p><small>© 2023 Web Service Inc.</small></p> 26 </address> 27 </footer> 28</body> 29</html>
HTMLのaddressタグは、ウェブページや記事の作成者や運営元の連絡先情報を示すための要素です。このタグは、その内容が囲んでいる最も近いarticle要素、またはbody要素全体の連絡先情報であることを示します。例えば、会社名、住所、電話番号、メールアドレス、著作権情報などを記述する際に使用します。
提供されたサンプルコードでは、<footer>要素の中にaddressタグが配置されており、ウェブサイト全体の連絡先情報（株式会社ウェブサービス、住所、電話番号、メールアドレス、著作権表記）をまとめて示しています。このように、ページのフッター部分にサイトの運営者情報を表示する際に使われることが一般的です。
addressタグ自体は、HTMLの要素であり、JavaScriptの関数のように特定の引数を取ったり、値を返したりする仕組みは持ちません。HTMLの要素は、ウェブページのコンテンツに構造的な意味を与えることが主な役割です。連絡先情報を単なる段落（<p>タグ）として記述するのではなく、意味的に適切なaddressタグを使用することで、検索エンジンや補助技術（スクリーンリーダーなど）がその情報を正しく理解しやすくなります。システムエンジニアを目指す上で、このようなセマンティックな（意味的な）HTMLの利用は重要です。
addressタグは、最も近いarticle要素またはbody要素の連絡先情報を示します。コンテンツやサイトの問い合わせ先を明確にする際に使用します。サンプルコードのようにフッターでサイト全体の連絡先を示すのが一般的です。記事の作成者情報など、特定のarticle要素の連絡先を示す際にも活用できます。
注意点として、addressタグは連絡先を示す意味であり、コンテンツの公開日や著作権情報のみを単独で記述するのは適切ではありません。電話番号やメールアドレスは<a href="tel:...">や<a href="mailto:...">と組み合わせると、ユーザーが直接連絡できるリンクとなります。
HTMLのaddress要素で連絡先情報を作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>address要素の使用例</title> 7</head> 8<body> 9 <header> 10 <h1>ウェブサイトのメインタイトル</h1> 11 </header> 12 13 <main> 14 <p>ここに主要なコンテンツが入ります。</p> 15 <p>例えば、記事の内容や製品情報など。</p> 16 </main> 17 18 <footer> 19 <!-- address要素は、最も近いarticle要素またはbody要素の連絡先情報を提供します --> 20 <!-- この例では、ウェブサイト全体の運営者情報を示しています --> 21 <address> 22 <p><strong>株式会社サンプルカンパニー</strong></p> 23 <p>〒100-0000 東京都千代田区サンプル町1-2-3</p> 24 <p>電話: <a href="tel:+81312345678">03-1234-5678</a></p> 25 <p>Email: <a href="mailto:info@example.com">info@example.com</a></p> 26 <p><small>© 2023 Sample Company. All rights reserved.</small></p> 27 </address> 28 </footer> 29</body> 30</html>
HTMLのaddress要素は、ドキュメントの作者や運営者、または最も近いarticle要素の作者の連絡先情報を定義するために使用されます。これは、ウェブサイト全体のフッターで運営会社の情報を示したり、記事の最後に執筆者の連絡先を記載したりする場合に特に役立ちます。
サンプルコードでは、footer要素内にaddress要素を配置し、ウェブサイト全体の運営者である「株式会社サンプルカンパニー」の連絡先情報を示しています。この中には、会社名、住所、電話番号、メールアドレスが含まれており、電話番号とメールアドレスはそれぞれtel:スキームとmailto:スキームを用いたa要素でリンクされています。これにより、ユーザーが直接電話をかけたりメールを送信したりできる利便性を提供しています。
address要素は、その内容が連絡先情報であることを機械的に識別させるためのセマンティックな役割を持ちます。ブラウザのデフォルトスタイルでテキストが斜体になることがありますが、これは視覚的な表現であり、要素の本来の目的は情報の種類を明確にすることです。特別な引数や戻り値はなく、単にコンテンツが連絡先情報であることをマークアップで示し、検索エンジンや支援技術がその情報を正確に理解できるようにするために利用されます。
address要素は、ウェブページ全体や最も近いarticle要素の作者・運営者の連絡先情報を示すために使用します。一般的な住所や所在地を表現する目的では利用しないでください。
address要素内には、連絡先情報として氏名、住所、電話番号、メールアドレスなどを含めます。ウェブサイトの公開日や著作権表示は、関連する情報であってもaddress要素の外に記述するか、p要素などを用いて明確に区別することが推奨されます。ただし、サンプルコードのようにsmall要素で囲み、あくまで補足情報として含める場合は許容されることもあります。
この要素はデフォルトで斜体表示されることが多いですが、これはCSSで自由に調整可能です。重要なのはセマンティックな意味付けであり、見た目はスタイルシートで制御してください。サンプルコードのようにfooter内で使用する場合、サイト全体の連絡先情報として適切です。