HTMLのaとは？リンクを作るアンカータグの意味と使い方

HTMLのコードを見たとき、a という一文字だけのタグが最初はちょっと謎に感じることありませんか？

こんにちは、『ゴイノワ』のナギです。<a href="..."> という形で書かれているあれ、何度か目にしているうちに「リンクに使うもの」というのはなんとなくわかるんですが、名前の由来とか、正確な役割とか、属性の使い分けとか、曖昧なまま進んでいるとあとで詰まることがあるんですよね。

今回は a タグの意味と使い方を、順を追って確認していきます。

「a」はAnchorの頭文字

a タグの a は「Anchor（アンカー）」の略です。アンカーとは直訳すると「いかり」のこと。船がいかりを打って場所を示すように、Webページ上で「ここがリンクの出発点ですよ」という印をつけるイメージです。

MDNの定義では、<a> 要素は href 属性を使って、別のウェブページ・ファイル・メールアドレス・同一ページ内の場所など、あらゆるURLへのハイパーリンクを作成する要素とされています。わたしはこれを見て、「リンクを貼るタグ」じゃなくて、「出発点と到達点をつなぐタグ」なんだと理解しました。

基本の書き方とhref属性

一番シンプルな書き方は次の形です。

href属性の中に飛び先のURLを入れ、タグで囲んだ部分がクリック可能なリンクになります。href は「Hypertext Reference（ハイパーテキスト参照）」の略で、「どこへつなぐか」を指定するためのものです。

文字だけでなく、画像を <a> で囲めば、画像をクリックしたときにリンク先へ飛ぶ仕組みも作れます。テキストでも画像でも「囲んだもの全体がリンクになる」という感覚で理解しておくと応用しやすいです。

よく使う3つの属性

a タグには href 以外にも覚えておくと便利な属性があります。使うシーンで迷わないよう、代表的なものを確認しておきます。

なかでも target="_blank" はよく見かけますが、これだけ設定するとフィッシング攻撃に悪用されるリスクがあるとされています。セキュリティ対策として rel="noopener noreferrer" を一緒に書くのが現在の一般的な書き方です。

ページ内リンクの仕組み

「同じページ内の見出しへ飛ばしたい」というとき、a タグはアンカーとしての別の使い方をします。飛ばしたい先の要素に id="名前" を付けておき、<a href="#名前"> と書くことで、クリックするとそのidの場所へスクロールされます。

これが「アンカー」という名前の本来の使われ方に近いイメージです。リンクの出発点だけでなく、到達点を指定する役割も持っているのが a タグの面白いところで、わたしはここで一度「あ、この名前はリンクを貼る用のタグじゃなくて、場所を示す用のタグだったんだ」と理解し直した感覚がありました。

hrefを省略したらどうなる？

href 属性を指定しない <a> タグは、HTML5 の仕様ではリンクではなく「プレースホルダー（仮の場所）」を表す要素になります。クリックしても何も起きませんし、URLも生成されません。

JavaScriptと組み合わせてクリックイベントだけを実装したいときなどに使われることがありますが、意味的には「どこにもつながっていない印」として扱われます。CSSやフレームワークのコードを読むとたまに見かけるので、「href がないと通常のリンクにはならない」という点は頭の隅に置いておくと混乱しにくいです。

aタグを使うときに確認したいこと

最後に、a タグを書くときにわたしが先に確認するようにしていることをまとめておきます。

特に最後の「テキストがリンク先を示しているか」は、SEO的にも読者の体験的にも、地味に後回しにしがちなところです。「こちら」「詳しくはこちら」だけでは、検索エンジンにもスクリーンリーダーにも何のリンクかが伝わりません。

aタグ、一通り見てみると意外とシンプル

a タグは「リンクを作るタグ」という認識だけで使い始めることもできますが、Anchorという名前の由来や、href属性の役割、属性ごとの使い分けを一度ちゃんと見ておくと、コードを読むときに迷いが減ります。

特にページ内リンクの仕組みは、LP や長い記事のナビゲーションを作るときに役に立つので、書いたことがない方は一度試してみると感覚がつかみやすいです。

まず <a href="URL">テキスト</a> の基本形を自分で書いて動かしてみるところから始めると、属性の意味も自然に入ってきます。ぜひ一度手を動かしてみてください。