こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
address要素っていつ使うの？
Webページの作成者の連絡先を付与したい場合に使うよ！
結論からいうと、address要素はWebページの作成者の連絡先を付与したいときに使います。
今回はaddress要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。
スポンサーリンク
１： HTML5について
HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。
つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。
２： address要素とは
address要素とは、連絡先情報を付与するための要素です。
addressには「宛先」という意味があり、その意味の通りにHTML文書でも宛先を意味します。
宛先にはメールアドレス、電話番号、住所、名前などの情報を付与することができます。address要素でこれらの情報を組み合わせてユーザーに伝わるようにしましょう。
address要素で使われる属性は4つほどあります。
| 属性 | 機能 |
|---|---|
| id | JavaScriptやCSSで適用させるために要素にラベルを付与します。 id属性につけた値はページ内で一度しか使うことができません。 |
| class | id属性と同様にJavaScriptやCSSで適用させるために要素にラベルを付与します。 class属性につけた値はページ内で複数使用できます。 |
| lang | 要素内で使われる言語を指定できます。 |
| title | 要素にタイトルを指定できます。 |
３： address要素の使い方
address要素にはbody要素に連絡先情報を付与する場合と、article要素に付与する場合の2種類の使い方があります。
<body> <footer> <address> <a href="mailto:example@example.com">メールアドレス</a> </address> </footer>
</body>body要素に付与する場合は、HTML文書全体の連絡先として記述しましょう。
このWebサイトは誰が作成したものなのかをユーザーにわかってもらうように表記します。
例ではメールアドレスを書きましたが、名前や電話番号なんかも有効です。
ユーザーに伝えたい連絡先情報を記述してください。
<article> <footer> <address> <a href="mailto:example@example.com">メールアドレス</a> </address> </footer>
</article>article要素に付与する場合は、各記事の連絡先を個別に指定してあげましょう。
記事を書いた人が複数いて、連絡先情報を分けなければいけない時に使います。
body要素の場合もarticle要素の場合も基本的にはfooterとセットで使用します。
記事の本文中に急に連絡先情報があったら不自然ですよね。footer要素の入れ子にして記事の下部の方に表記することによって本文の邪魔をしない配置にすることができます。
まとめ
今回はaddress要素についてと使い方について解説しました。
address要素は記事内に連絡先情報を付与する要素です。情報を組み合わせてユーザーに伝えたい情報を表示できるようになりましょう。
これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。
以上、ユキでした！
スポンサーリンク
