[html] 必要? 住所等を表すaddress要素とは? 使い方・注意点も分かりやすく解説!

この記事は上記のような疑問を解消するものとなっています。

address要素はWebサイトに記述してある連絡先情報を表現するさいに使用します。

<address>と</address>の中にWebサイトの制作者に関する情報を入れることで、連絡先情報が書かれているということを表します。

具体的には制作者の名前、メールアドレス、住所、電話番号、FAX番号などを記載します。

とても重要な要素の一つなのでしっかりとaddress要素を理解しておく必要があります。

そこでこの記事ではaddress要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.address要素とは?

address要素は内容に関する連絡先・問合せ先を表す要素です。

読み方は「アドレスヨウソ」です。

address要素の内容で提供される連絡先情報は、その文脈で適切であればどのような形式でもよく、必要とされるあらゆる形式の連絡先情報 を含めることができます。

具体的にはページ作者の名前、メールアドレス、住所、電話番号、ファックス番号、フォームへのリンクなどです。

address要素には連絡先情報が参照する個人、団体、組織の名前を含めてください。

2.address要素の使い方

それではaddress要素の使い方をみていきましょう。

・・・

<footer>
 <address>
　名前：HTML&CSS辞典
  URL：https://html-css-dict.com/
  お問い合わせ先：<a href="mailto:abc@gmail.com">HTML&CSS辞典</a>
 </address>
</footer>

・・・

上記の例ではfooter要素内のaddress要素はWebページ全体についてのお問い合わせ先となります。

他にも作成者の名前、メールアドレス、電話番号なども記載することができます。

ここで一点注意点があります。

address要素の中にはheader要素、footer要素などというような入れ子構造はできません。

3.address要素を使う時の注意点

address要素を使う時の注意点をみていきましょう。

連絡先に関係のない情報は入れない

address要素はWebサイト制作者の情報を記載する部分です。

そのため、連絡先に関係のない情報は入れないようにしましょう。

Webサイトを作成した人以外の連絡先は入れない

address要素はWebサイト制作者の情報を記載する部分です。

そのため、Webサイトを作成した人以外の連絡先は入れないようにしましょう。

addressタグの配置位置に注意する

address要素は、Webサイトの末尾に1つだけ使用されることが多いですが、何回使用してもOKです。

しかし、article要素の中に配置されている場合、祖先要素となるarticle要素に書かれた内容の作者への連絡先を示すことになるので、Webサイト全体の連絡先を示したい場合はタグを記述する場所に注意しましょう。

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?