HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのaddressタグとは？連絡先情報の正しい記述方法を実例付きで解説

addressタグとは

HTMLの<address>タグは、文書やウェブサイトに関連する連絡先情報（住所・メールアドレスなど）を表すために使用される要素です。例えば、企業の公式サイトに会社の所在地を掲載したい場合には、その情報を<address>タグで囲んで記述します。

このタグでマークアップされた内容は、多くのブラウザではデフォルトで斜体表示になります。また、セマンティックHTMLの要素として、検索エンジンやスクリーンリーダーに対して「この部分が連絡先情報である」という意味を明確に伝えられるため、アクセシビリティやSEOの面でも有用です。

addressタグの実装例

それでは、HTMLでaddressタグを実装した具体的なコード例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<nav>
   <a href="/compile_java_online.php">Java</a> |
   <a href="/php_terminal_online.php">PHP</a> |
   <a href="/online_jquery_editor.php">jQuery</a> |
   <a href="/compile_c_online.php">C</a> |
   <a href="/compile_cpp_online.php">C++</a> |
   <a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have a compiler for <acronym title="JavaScript">JS</acronym> libraries.</p>
<address>
   Contact us at <a href="mailto:contact@tutorialspoint.com">admin</a>.<br>
   4th Floor,<br>
   Incor9 Building, <br>
   Kavuri Hills, <br>
   Madhapur, Hyderabad,<br>
   Telangana 500081
</address>
</body>
</html>

出力結果

HTMLのaddressタグとは？連絡先情報の正しい記述方法を実例付きで解説

上記の例では、<address>要素を使用して企業の連絡先情報を設定しています。

<address>
   Contact us at <a href="mailto:contact@tutorialspoint.com">admin</a>.<br>
   4th Floor,<br>
   Incor9 Building, <br>
   Kavuri Hills, <br>
   Madhapur, Hyderabad,<br>
   Telangana 500081
</address>

さらに、この中では「mailto」スキームを使って、メールアドレスへのリンクも設定しています。

<a href="mailto:contact@tutorialspoint.com">admin</a>

このようにhref属性に「mailto:」とメールアドレスを指定すると、リンクをクリックした際にユーザーのメールソフトが起動し、宛先が自動的に入力された状態で新規メールを作成できるようになります。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"