【HTML】aタグでURLリンクを作る方法を基礎から解説

同一サイト内の別ページへの移動や、外部サイトへの誘導など、URLリンクはWebサイトにとってなくてはならないものです。

それゆえにHTML/CSSの勉強を始めると、かなり最初の段階で登場します。簡単に思われがちですが、実は奥が深いものです。

この記事では、URLリンクの基礎と使い方を詳しく解説していますので最後までご覧ください。

URLリンクの貼り方

URLリンクを貼るには、aタグを使用します。

aとはアンカー（anchor）の略で、リンクの出発点と到達点を繋ぐという意味です。

ちなみにURLはユニフォーム リソース ロケータ（Uniform Resource Locator）の略で、インターネット上の住所を示しています。いわゆる、「アドレス」です。

実際にURLリンクを貼るには、以下のように記述します。

HTML
<p><a href=”http://www.〇〇〇.com”>アンカーテキスト</a></p>

アンカーテキストについて

このaタグで囲まれたテキストのことを、アンカーテキストと呼びます。アンカーテキストはリンク先の内容を示すものなので、文章はリンク先のページの内容と一致するようにしてください。そうしないと、ユーザーが混乱する可能性があるからです。

例えば、HTMLの解説記事というアンカーテキストがあったとして、リンク先がPHPの解説記事だったら、ユーザーは求めている内容とは違うと、閲覧をやめてしまうでしょう。あまり長くするのも、分かりにくくなってしまうので好ましくありません。リンク先のページのタイトルや、内容を端的に説明する単語などが適切です。また、URLリンクはSEOに効果があるので、アンカーテキストは検索ワードを意識するようにしてください。

画像にURLリンクを貼る方法

URLリンクは、画像にも貼ることができます。

HTML
<a href=”http://www.〇〇〇.com”><img src="example.gif" alt=”サンプル” width=”50” height=”50”></a>

これで画像全体にURLリンクが貼られました。クリックすると指定されたURLにジャンプします。画像も注意すべき点はテキストと同じで、閉じタグを忘れないこと、リンク先の内容と一致させることに気をつけてください。altもSEOに効果があるので、必ず記述するようにしてください。もちろん、ユーザビリティの観点からも必須です。

URLの種類

URLの指定方法にはいくつかの種類があり、パスとも呼ばれています。パスについて一つずつ紹介していきます。

絶対パス

httpsから始まる、サイトの正式なURLを記述する方式です。省略が不可能で長くなってしまいますが、外部サイトへのURLリンクを貼る場合は、必ずこの方式で記述する必要があります。

絶対パスの例

HTML
<p><a href=”https://www.〇〇〇.com”>アンカーテキスト</a></p>

ルート相対パス

同一サイト内にURLリンクを貼る場合、URLをかなり省略できます。「https://www.〇〇〇.com」のサイト内で、「https://www.〇〇〇.com/about/index.html」にURLリンクを貼るには、以下のように記述します。

HTML
<p><a href=”/about/index.html”>アンカーテキスト</a></p>

「https://www.〇〇〇.com」は共通しているので、省略可能なのです。

「https://www.〇〇〇.com/about/access/index.html」にURLリンクを貼る場合は、以下のようになります。

HTML
<p><a href=”/about/access/index.html”>アンカーテキスト</a></p>

最上位の階層を起点として、階層を区切っているのです。階層が深くなるたびに「/」で区切っていきます。

なお、それぞれの階層のトップページにあたる「index.html」は省略可能です。

HTML
<p><a href=”/about/”>アンカーテキスト</a></p>

このように記述しても、「https://www.〇〇〇.com/about/index.html」にジャンプします。

ルート相対パスは同一サイト内であれば、階層に関係なくどのページにいても変わらないので、とても管理がしやすい記述法です。大規模サイトを構築する際は、ほとんど場合この方式が採用されています。

相対パス

ルート相対パスが最上位階層を起点としていたのに対し、相対パスは自分の現在位置を起点としています。

「https://www.〇〇〇.com/about/access/index.html」から、「https://www.〇〇〇.com/about/index.html」にURLリンクを貼るには、以下のようになります。

HTML
<p><a href=”../index.html”>アンカーテキスト</a></p>

「..」は階層を一つ上がるという意味です。これで一つ上の階層である、aboutを示しています。階層が上がる度に、「..」と「/」が増えていきます。

「https://www.〇〇〇.com/about/access/index.html」からaboutと同じ階層にある「https://www.〇〇〇.com/works/index.html」にURLリンクを貼る場合は以下のようになります。

HTML
<p><a href=”../../works/index.html”>アンカーテキスト</a></p>

二つ階層を上がり、最上位階層に戻ってから、worksに入るという意味です。

このように階層間移動が多い場合は、コードが長くなってしまうし、具体的な階層名ではなく「..」の記述では分かりにくくもなってしまいます。しかし、階層移動が少ない場合は便利です。

例えば「https://www.〇〇〇.com/about/access/index.html」から、同階層の「https://www.〇〇〇.com/about/access/map.html」にURLリンクを貼る場合は、以下のようになります。

HTML
<p><a href=”map.html”>アンカーテキスト</a></p>

階層が同じ場合は、ファイル名を指定するだけでよいのです。

このように相対パスはソースを極力短くしたいというときに便利ですが、階層によって記述が変化してしまうという点には気をつけなければなりません。特にグローバルメニューなど、ソースを使いまわすことが多いパーツには使わない方がよいでしょう。管理のしにくさから、大規模なサイトではあまり使われない方式です。

同じページ内で移動する

URLリンクは、ページ間の移動や外部リンクに接続するときだけに用いられるものではありません。ページ内の指定した箇所に移動させることも、可能なのです。

HTML
<p><a href=”#example”>アンカーテキスト</a></p>

<h2 id=”example”>見出し</h2>

このようにURLに「#」と任意の文字列を指定すると、ページ内の指定した文字列と同じID名を持つ要素の位置に移動できるのです。最初に目次を設け、見出しのクリックによって、ページ内のその箇所に移動させるときなどに使われています。

「#example」はただの単語のようですが、実はれっきとしたURLです。ページのURLが「http://www.〇〇〇.com」の場合、「#example」は「http://www.〇〇〇.com/#example」が正式なURLとなります。同一ページのため、省略が可能なのです。

aタグの属性

aタグには、いくつもの属性が存在しています。

特に頻繁に使うのが、

今回は、上記2つの属性について解説していきます。意味を理解して、URLリンクを正しく学んでいきましょう。

href

これまでに何度も登場しているリンク先を示す属性で、aタグの中で最も重要かつ最も使用されます。ハイパーテキスト リファレンス（hypertext reference）の略で、エイチレフと読みます。この属性があることによってaタグは出発点と到着店、両方が指定された状態となり、URLリンクとして機能します。

シンプルにURLを記述する以外にも、以下のようなことが可能です。

それぞれ解説していきます。

メールアドレスを指定

HTML
<p><a  href=”mailto:info@〇〇〇.com”>アンカーテキスト</a></p>

このように先頭に「mailto:」、その後にメールアドレスを記述することで、そのメールアドレスが宛先として入力された状態で、メーラーが起動します。

電話番号を指定

HTML
<p><a  href=”tel:0120-xxx-xxx”>0120-xxx-xxx</a></p>

先頭に「tel:」、その後に電話番号を記述すると、指定された番号に電話をかけられるようになります。スマートフォンサイトでは頻繁に使われているので、覚えておきましょう。

target

主に、リンク先を別ウィンドウで表示させるときに使われる属性です。

以下のように記述します。

HTML
<p><a href=”http://www.〇〇〇.com” target=”_blank”>アンカーテキスト</a></p>

このように「_blank」と記述されたURLリンクをクリックすると、新しいタブが立ち上がりリンク先のページが表示されます。デフォルトは「_self」で同じタブのままページが遷移します。同じタブのまま開かせたい場合は、記述する必要はありません。

他、フレーム分割を解除して表示させる「_top」、親フレームに表示させる「_parent」などがありますが、使用機会は決して多くありません。ほとんど、「_blank」のためにあると言って過言ではない属性です。

HTMLのURLリンク：まとめ

URLリンクはシンプルなようでいて、実はとても奥が深く、そしてとても重要なものです。記述方法もさまざまなので、覚えていないと思いがけないところで迷ってしまうかもしれません。まずは基礎をしっかりと理解し、どんなシーンでも混乱が無いようにしてください。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！