【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を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

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

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【最短30秒で完了】侍テラコヤの申し込み手順

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

【10秒で完了】本気のパソコン塾の相談会/無料トライアル申し込み手順

STEP.1

相談会予約

＼【期間限定】無料相談会参加特典3つあり!／

7日間無料体験・無料相談会に申し込む! 30秒簡単予約!

• 特典1：学習コンテンツの1週間無料トライアル
• 特典2：学習管理シートプレゼント
• 特典3：副業収入獲得ノウハウ動画プレゼント

相談会はオンライン（Google meet）で実施致します。

ご希望の日時をご予約ください。

※所要時間は30分を予定しております。

STEP.2

相談会の概要

アドバイザーがお客様のキャリアや学習の課題を丁寧に伺った上で、今後についてのアドバイスを致します。

当日お話する内容例

• エンジニアを取り巻く環境
• 挫折しないための学習の進め方
• プログラミング言語について
• 本気のパソコン塾について

また、現状の課題や不安な事は、遠慮なくご質問ください。

ご相談いただける内容例

• プログラミング学習に関して
• 転職・副業・起業について

＼【期間限定】無料相談会参加特典3つあり!／

7日間無料体験・無料相談会に申し込む! 30秒簡単予約!

• 特典1：学習コンテンツの1週間無料トライアル
• 特典2：学習管理シートプレゼント
• 特典3：副業収入獲得ノウハウ動画プレゼント