技術コンテンツ

HTML

No.24 a / リンク

【HTML】aタグ - リンク

HTMLのaタグについて解説します。

検証環境

HTML

macOS

14.1

aタグ

aタグは“リンク”を意味するタグです。

リンクにはページリンクやページ内リンク、電話番号、メールアドレスなどがあります。

基本構文

<a href="リンク">コンテンツ</a>

属性

主な属性は次の通りです。

属性名	必須	内容
href	-	リンク先
target	-	リンク先の表示対象（同じタブ: `_self`、別タブ: `_blank`）
download	-	リンク先のダウンロード（属性値はファイル名）

サンプル

URLリンク

同タブ

___ih_hl_start
<a href="https://it-hack.net">ITHACK</a>
___ih_hl_end

プレビュー

別タブ

___ih_hl_start
<a target="_blank" href="https://it-hack.net">ITHACK</a>
___ih_hl_end

プレビュー

ページ内リンク

ページ内の特定部分にリンクするには、href属性に#リンク先のid属性値の形式で値を設定します。

※ 次の例のプレビューは動作上、ページ内リンクに遷移しませんので、お手元の開発環境でお試しください。

sample.html

___ih_hl_start
<a href="#html-file">『HTMLファイル』セクションへのリンク</a>
___ih_hl_end

<h1>HTML</h1>
<p>
    HTMLの正式名称は<br>
    HyperText Markup Languageです。
</p>

<h2>マークアップ言語</h2>
<p>
    マークアップ言語は<br>
    テキストを構造化する言語です。
</p>

___ih_hl_start
<h2 id="html-file">HTMLファイル</h2>
___ih_hl_end
<p>
    HTMLで記述されたテキストファイルを<br>
    HTMLファイルと呼びます。
</p>

<h2>ブラウザ</h2>
<p>
    ブラウザは<br>
    ChromeやSafari、Microsoft Edge、Firefox<br>
    など様々な種類があります。
</p>

プレビュー

ダウンロード

sample.html

___ih_hl_start
<a download="ithack.html" href="https://it-hack.net">ITHACK</a>
___ih_hl_end

プレビュー

電話番号

電話番号をリンク先にする場合、href属性の値をtel:電話番号の形式にします。

※ 例の電話番号は実在しないものを記載しておりますが、おかけにならないようしてください。

sample.html

___ih_hl_start
<a href="tel:000-0000-0000">000-0000-0000</a>
___ih_hl_end

プレビュー

メールアドレス

メールアドレスをリンク先にする場合、href属性の値をmailto:メールアドレスの形式にします。

※ サンプルのメールアドレスは実在しないものを記載しておりますが、送信しないようしてください。

sample.html

___ih_hl_start
<a href="mailto:example@it-hack.net">example@it-hack.net</a>
___ih_hl_end

プレビュー