<a>タグは、ハイパーリンクを指定する際に使用します。
ウェブページ内のテキストや画像などを<a>~</a>で囲んで必要な属性値を指定してやることで、
ハイパーリンクの始点(出発点)や終点(到達点)とすることができます。
ここをクリック
<a>は、anchor(アンカー)の略です。
anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。
<a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。
href属性は、ハイパーリンク先のURLを指定する際に使用します。
href属性の値には相対パスと絶対パスのどちらでも指定することができます。
相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で、
同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。
絶対パスとは、https://~で始まるURLを指定する方法で、別のドメイン名のURLにリンクする際などに利用されます。
<a href=”https://www.htmq.com/tech/htmls/a”>相対パスでリンクします</a><br>
<a href=”https://www.htmq.com/tech/html5/a”>絶対パスでリンクします</a><br>
<a href=”https://www.htmq.com/”>ひとつ上のディレクトリへ</a><br>
<a href=”mailto:[email protected]” class=”__cf_email__” data-cfemail=”bdd4d3dbd2fdd5c9d0cc93ded2d0″>[email protected]”>メール</a><br>
<a href=”https://www.htmq.com/tech”><img src=”https://www.htmq.com/wp-content/uploads/2024/07/logo.gif” alt=”HTMLクイックリファレンス”></a>
target属性はハイパーリンク先のターゲット、つまり、リンク先をどのように開くかを指定する際に使用します。
target属性の値には以下の4種類、または、任意のターゲット名を指定することができます。
任意のターゲット名を指定する際には、リンク先にそのターゲット名を付けておきます。
ターゲット名は、一文字目がアンダースコア( _ )以外で始まる値でなければいけません。
<a href=”https://www.htmq.com/tech/htmls/a” target=”_blank”>別画面を開いてリンクします</a><br>
<a href=”https://www.htmq.com/tech/htmls/a” target=”_self”>リンク元と同じフレームにリンクします</a><br>
<a href=”https://www.htmq.com/tech/htmls/a” target=”_parent”>ひとつ上の親フレームにリンクします</a><br>
<a href=”https://www.htmq.com/tech/htmls/a” target=”_top”>フレームをすべて解除してリンクします</a><br>
<a href=”https://www.htmq.com/tech/htmls/a” target=”abc”>abcという名前のフレームにリンクします</a><br>
※このサイトではフレームを使用していないので、target=”_parent”とtarget=”_top”の動作はtarget=”_self”と同じになります。
またabcという名前のフレームは設定していないのでtarget=”abc”の動作はtarget=”_blank”と同じになります。
rel属性・media属性・hreflang属性・type属性は、リンク先のリソースがどんな性質を持つかを、ユーザーがリンクをたどる前に知らせるための属性です。
rel属性は現在の文書とハイパーリンク先との関係性、
media属性はハイパーリンク先のメディア、
hreflang属性はハイパーリンク先の言語、
type属性はハイパーリンク先のMIMEタイプを、それぞれ指定する際に使用します。
HTML5では、a要素のname属性は廃止されています。
HTML4.01におけるname属性は、ウェブページ内の特定個所に名前を付けて、ページ内リンクを作成する際などに使用していました。
HTML5で同様の機能を作成する場合にはid属性を使用します。
id属性は、ひとつの文書の中では重複して同じ名前を付けることはできないので、ウェブページ内の場所を一意に特定できます。
<a id=”abc”>ファイルの途中にabcという名前を付けます</a><br>
<a href=”#abc”>abcと名前を付けた場所へリンクします</a><br>
<a href=”https://www.htmq.com/tech/htmls/a#tex”>別ファイルの名前を付けた場所へリンクします</a>
ファイルの途中にabcという名前を付けます
abcと名前を付けた場所へリンクします
別ファイルの名前を付けた場所へリンクします
HTML4.01ではa要素はインライン要素であったため、ブロックレベル要素全体をリンクを指定することはできませんでした。
例えば、段落全体を<a>~</a>で囲んでリンクするような指定方法は認められていませんでした。
HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、
段落・リスト・表などのセクションに対しても、全体を<a>~</a>で囲んでリンクを指定できるようになっています。
ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。
<aside class=”ad”>
<h1>広告</h1>
<a href=”https://www.htmq.com/tech/ad/?adid=00001″>
<section>
<h1>美味しいお取り寄せ</h1>
<p>北海道の毛ガニ・鮭・イクラがお買い得!</p>
<p>ワケあり商品で最大通常の80%OFF!</p>
</section>
</a>
<a href=”https://www.htmq.com/tech/ad/?adid=00002″>
<section>
<h1>グルメなスイーツ特集</h1>
<p>行列のできる有名店のスイーツが大集合!</p>
<p>期間限定で送料無料キャンペーン実施中!</p>
</section>
</a>
</aside>
HTML5では、a要素にhref属性が指定されていない場合には、プレースホルダーを意味する要素となるとされています。
ここでいうプレースホルダーとは、暫定的に代わりに配置しておくものという程度の意味です。
例えば、コンテンツの一部がまだ作成されていない場合などに、ナビゲーションメニューからリンクを指定するURLが存在しないということがあるかと思います。
そのような場合に、将来的にはリンクメニューが入る予定のその位置に、href属性を持たないa要素を暫定的に配置しておくことができます。
尚、href属性を指定しない場合には、target属性・rel属性・media属性・hreflang属性・type属性も同じく指定できません。
<nav>
<ul>
<li><a href=”../”>トップページ</a></li>
<li><a href=”../html5/”>HTML5リファレンス</a></li>
<li><a href=”../css3/”>CSS3リファレンス</a></li>
<li><a>CANVASリファレンス</a></li>
<li><a href=”../images/ico32.gif”>アイコンファイルへリンク</a></li>
<li><a href=”../ico32.gif” download=”icon”>アイコンファイルをダウンロード</a></li>
</ul>
</nav>