【HTML】実践的なaタグの使い方とよく使われる属性について解説！

はじめに

この記事では、HTMLを学習中の方向けにaタグの基本的な使い方やaタグで出来ること、セキュリティに関する注意点などを解説します。本記事を読むことで実践的なaタグの使い方を学んでいただくことができます。

この記事の対象者

• ウェブ制作を基礎からしっかり学びたい人

• aタグの使い方について詳しく知りたい人

この記事の目標

• aタグの基本的な使い方を知る
• aタグでよく使われる属性を知る
• セキュリティを意識してaタグを使えるようになる

aタグとは？

aタグとはウェブページ上でハイパーリンクを作成するために使用されるHTMLの重要な要素です。“a”は”anchor（アンカー）”の略であり、このタグを使用することで他のページやウェブサイト、文書、画像、音声、動画などへのリンクを作成することができます。ユーザーがリンクをクリックすると、指定されたリンク先にジャンプすることが可能です。

ウェブサイトにおいて、aタグはとても重要な役割を持っています。例えば、ナビゲーションメニューやフッターのリンク、記事内の関連ページへのリンクなど、ユーザーエクスペリエンスを向上させるために欠かせない要素として使用されます。

しかし、セキュリティ上の注意が必要な部分でもあります。aタグを正しく使いこなすことはウェブサイトの構築においてとても重要なスキルです。

aタグの基本的な使い方

aタグはhref属性（hypertext referenceの略）にリンク先のURLを記述することで要素をクリックした際の遷移先を指定することができます。以下がaタグの基本構造です。

<a href="リンク先のURLを記述">リンクテキスト</a>

href属性にはウェブページの他にもファイル、画像、動画、メールアドレスなど様々なものが指定できます。

また、ある要素にid属性を定義することでページ内の特定の場所に遷移させることもできます。これをページ内リンクと言い、縦長のウェブページ等でよく使用されます。

<section id="about">
    <!-- aboutコンテンツ -->
</section>

<section id="menu">
    <!-- menuコンテンツ -->
</section>

<section id="contact">
    <!-- contactコンテンツ -->
</section>

<nav>
    <ul>
        <li><a href="#">Top</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

id属性の指定は他のページに対しても使えます。以下の例はservice.htmlのid=”service3″というところに遷移するという意味になります。

<a href="service.html#service3">サービス内容を詳しく見る</a>

HTML5以前ではhref属性は必須だったので、リンク先のURLが決まっていない場合などでも指定するような慣習があります。一般的には、そのaタグが記述されたページに遷移するという意味の「href=”#”」と記述することが多いです。

<a href="#">リンク先URL未定</a>

aタグに含められる要素

aタグ内のテキストをクリックすることでリンク先に遷移しますが、aタグはimgタグなどの画像やdivタグ等でグルーピングされた要素を含めることもできます。しかし、誤った使い方をするとHTMLの構文チェックツールを使用した場合にエラーが表示されるので注意しなければいけません。

aタグのコンテンツモデルについて

aタグのコンテンツモデルは少し特殊で、親要素のコンテンツモデルを引き継ぐという特徴を持っています。親要素がpタグやdivタグ、liタグといったフローコンテンツであれば、aタグ内にはimgタグやstrongタグ、spanタグなどのフレージングコンテンツを含めることができるます。基本的にはフローコンテンツの子要素として使われることが多いです。

<!-- spanはpを含められないので以下は間違い -->
<span>
    <a href="#">
        <p>リンク</p>
    </a>
</span>

<!-- pはspanを含められるので以下は正しい -->
<p>
    <a href="#">
        <span>リンク</span>
    </a>
</p>

テキストリンクと画像リンク

テキストのリンクと画像のリンクでは特徴や利点に違いがあります。どちらの方法を選択するかはデザインの要件によって異なりますが、ユーザーのことを考えてマークアップすることはとても重要な観点であり、aタグの扱いが適切でないとユーザーエクスペリエンスに影響を与えてしまいます。

テキストリンクの特徴

• シンプルでわかりやすい：ユーザーがリンクであることを瞬時に理解できるので、クリックしやすい特徴があります。
• SEOに有利：テキストがリンクとして認識されるため、検索エンジンにとっても理解しやすくSEO的にもプラスになると考えられます。
• 表示崩れのリスクが低い：ユーザーがどのような端末やウェブブラウザを使用していても、通常のテキストと同様に画面サイズに合わせて適切に表示されます。

画像リンクの特徴

• 視覚的な魅力：画像はテキストよりも目を引きやすいため、サムネイル画像などリンクとして分かりやすいものを使用すると視覚的な魅力を高められます。
• クリック領域が広い：画像自体がクリック領域になるので、スマートフォンなど画面幅が狭い端末でも操作がしやすいです。
• アイコンの利用：アイコン画像を使用してテキストよりも表示領域をコンパクトにしたり、テキストでは表現しづらい場合に適しています。

aタグを使う際に気を付けること

aタグはユーザビリティの上でとても重要な要素であり、気を付けなければいけないこともあります。ウェブデザインを行う際にも必要な考え方になるでしょう。

テキストリンクで気を付けること

リンク先がどのような内容なのかを伝えることが適切なテキストリンクです。

• 適切なテキストリンク：「詳細情報を見る」「製品カタログをダウンロード」「お問い合わせフォームへ」
• 不適切なテキストリンク：「クリックしてください」

ユーザーがリンクの目的を理解できるように配慮することで、以下のようなメリットがあります。

• ユーザーエクスペリエンスの向上
• 検索エンジンの評価
• アクセシビリティの向上

テキストリンクが適切であれば、ユーザーはリンク先の内容を事前に把握することができます。必要な情報かどうかがクリックしないとわからないのでは、ユーザーにとって使い勝手が悪く、ユーザーエクスペリエンスを損なうことになります。

また、テキストリンクは検索エンジンの評価にも影響を及ぼします。テキストリンクが適切であれば、検索エンジンはウェブページの内容をより正確に理解することができます。

ウェブ制作はアクセシビリティにも配慮する必要がありますが、テキストリンクが適切であればスクリーンリーダーを使用しているユーザーに対しても分かりやすくなります。

テキストリンクが適切であることはウェブサイトの効果的な運営と信頼性向上に繋がるので、ユーザーが分かりやすい内容にすることを心がけましょう。

不適切なリンクを含まないようにする

不適切なリンクの例として以下のようなものがあります。

• リンクの目的が明確になっていない
• リンク先が不適切
• リンクの過剰使用

テキストリンクや周囲のコンテンツからリンクの目的が明確に理解できない場合、ユーザーに戸惑いを与えてしまいます。結果、ユーザーが望まないページに遷移してしまうなど、求める情報にたどり着けない可能性があります。

また、リンク先がテキストリンクの内容と異なる情報だと、ユーザーから信頼性の低いサイトだと判断されてしまいます。外部サイトのリンクがある場合はリンク切れにも注意する必要があります。

広告をたくさん掲載するなど、過剰にリンクが配置されたウェブページはユーザーが誤ってリンクをクリックしてしまう可能性が高まります。ウェブページの本来の目的は、ユーザーにリンクをクリックしてもらうことではなくユーザーが求める情報を提供することです。広告を掲載する場合にも意識する必要があります。

リンクの見た目や配置に気を付ける

リンクのスタイリングや配置に気を配ることで、ユーザーが操作しやすいウェブサイトを構築することができます。以下のような工夫をすると効果的です。

• 重要なリンクは目立つ場所へ配置する
• テキストとテキストリンクで見た目を変える
• リンクの周囲にスペースを設ける
• マウスポインターがリンクの上にある場合にスタイルを変える

ウェブサイトは何らかの目的があって制作されるため、目的との関係性が強いリンクは、ウェブページ上で目立つ位置に配置することが適切です。他にも、ボタン状のスタイリングを行うことで他のリンクよりも目立たせることができます。

また、通常のテキストのデザインとテキストリンクの見た目が似ていると、ユーザーがリンクだと判断することができません。ウェブブラウザはaタグに対してデフォルトで下線や文字色のスタイルを当てますが、コーディングは一般的にデザインカンプを参照して行われるため、コーディングとウェブデザインの担当者が違う場合にデザイナーの意図と違うかたちで実装される可能性があります。デザインカンプを作る際にリンクテキストのスタイルを定義しておくと良いでしょう。

リンクの周囲にスペースを設けることで、誤って他のリンクをクリックするリスクを下げられます。また、クリック領域を広げることでユーザーはリンクをクリックしやすくなり操作性が向上します。

CSSを使用することでマウスポインターがリンクの上にある場合に対するスタイルを指定することができます。背景や文字の色を変えたりアニメーションを加えることで、ユーザーはクリックするリンクが目的のものであることを理解できます。

aタグで出来ること

aタグはとても利用頻度が高く、属性やURLスキームを記述することで、リンクとしての動作以外にもファイルのダウンロードやメールソフトの起動、電話アプリの起動などができます。これらは一見便利なものですが、扱うにはセキュリティ上のリスクも考慮する必要があります。

リンク先を別タブで表示させる

リンク先のウェブページが他のサイトの場合、せっかく自分のサイトを訪問してくれたユーザーが他のサイトに流れてしまう可能性があります。そういった場合の対策として、他のサイトへのリンクは別タブで表示させる手法がよく行われます。その際に使用されるものとしてtarget属性とrel属性を紹介します。

target属性について

target属性はリンク先の表示場所を指定する属性です。一般的な使い方として、あらかじめ定義されているキーワードを属性値に記述します。

• _self：現在のタブでリンク先のページを表示します。target属性を省略した場合のデフォルトの動作になります。
• _blank：新しいタブでリンク先のページを表示します。

以下が記述例です。

<a href="#">同じタブで開きます。</a>
<a href="#" target="_self">同じタブで開きます。</a><!-- 上と同じ意味になります -->

<a href="#" target="_blank">別のタブで開きます。</a>

「target=”_blank”」と記述するだけで別タブで表示させることができるようになりますが、遷移先のページが悪意のあるサイトやハッキングされているサイトだった場合、遷移前のページが改ざんされる可能性があります。

そのようなリスクを回避するために、rel属性の指定を行うことが推奨されています。

rel属性について

rel属性を指定することで、リンク先と現在のページの関係性を定義することができます。属性値には以下のようなものがあります。

• nofollow：リンク先のページを検索エンジンに辿らせたくない場合に指定します。
• noopener：リンク先からリンク元のページへアクセスできないようにします。
• noreferrer：リンク元の情報をリンク先へ渡さないようにします。

以下が記述例です。

<a href="#" target="_blank" rel="noopener noreferrer">別タブで開きます。</a>
<a href="#" target="_blank" rel="noopener noreferrer nofollow">外部サイトです</a>

rel属性の値にnofollowを指定することで、検索エンジンがリンク先とリンク元のサイトを関連付けないようにすることができます。自分のサイトやリンク先のサイトが検索エンジンに悪い評価をされたとしても、お互いの迷惑にはならないようになります。

また、noopenerとnoreferrerを指定することで、リンク先との情報のやりとりができないようになります。これらの指定によりセキュリティリスクを抑えることが出来ます。

ファイルをダウンロードしてもらう

download属性を指定することで、サーバー上に置いたWord文書やPDFなどのファイルをユーザーにダウンロードしてもらうことができます。

download属性の使い方

aタグのhref属性にファイルのパスを記述し、download属性にダウンロードされたときのファイル名を記述します。以下が例です。

<a href="./pdf/sample.pdf" download="hogehoge.pdf">hogehogeの資料をダウンロード</a>

また、download属性は属性値を省略することができるので以下のような記述でも動作します。この場合は元のファイル名の「sample.pdf」でダウンロードが行われます。

<a href="./pdf/sample.pdf" download>sampleの資料をダウンロード</a>

ユーザーがどのような環境でインターネットを利用しているかはわからないので、ダウンロードする前にそのファイルがどのようなものか分かるようにしてあげると親切です。デザイン上での強いこだわりがなければファイル形式やファイルサイズを記載してあげると良いでしょう。

URLスキームでアプリケーションを起動させる

URLスキームを使用することで他のウェブページへの遷移だけでなく、指定したアプリケーションを起動させることができます。

URLスキームはURLの先頭に置かれる特殊な文字列で、そのリンクに対してどのような動作を行うかを示します。例えば、一般的なURLである「http://example.com」の「http://」の部分がURLスキームの部分です。これは「HTTPプロトコルを使用してexample.comにアクセスする」という意味になります。

aタグでよく知られているURLスキームは以下です。

• tel：電話番号を指定するためのスキームで、電話アプリを起動し、指定した番号に電話をかける動作を行います。
• mailto：メールアドレスを指定するためのスキームで、メールアプリを起動し、指定したメールアドレスにメールを作成する動作を行います。

また、アプリケーション開発者が独自に定義できる「カスタムURLスキーム」というものもあります。

電話番号を発信させる

telスキームを使用することで、リンクをクリックしたときに電話アプリを起動して指定した番号に発信させることができます。以下が例です。

<a href="tel:09011112222">お問い合わせはこちら</a>

この例では、「お問い合わせはこちら」というテキストリンクをクリックすると、電話アプリを起動して「090-1111-2222」という番号に電話をかける動作を行います。このように、href属性の値に「tel:」と記述し、その後に発信させたい電話番号を書くことで電話をかけるためのリンクを作成することができます。

また、telスキームは国際電話でも指定することができます。

<a href="tel:+819011112222">お問い合わせはこちら</a>

telスキームを使用する際の注意点として、telスキームはPCでリンクをクリックした場合でも動作します。ユーザーの混乱を避けるためにPCでは動作させないように実装することが多いですが、そのためにはCSSやJavaScriptの知識が必要になります。

また、ウェブブラウザはFAX番号などの電話番号に似た構造のテキストを自動で電話番号として認識してしまいます。この機能を無効化するにはheadタグ内に以下の記述をする必要があります。

<meta name="format-detection" content="telephone=no">

telスキームを使えば電話番号を入力する必要がないのでユーザーにとって便利と考えられますが、誤操作でタップされたときにビックリさせてしまいます。他のリンクが近いなど誤操作が起きる可能性がある場合には、JavaScriptで確認ダイアログを表示させるようにすると親切です。

メールを送信させる

mailtoスキームを使用することで、リンクをクリックしたときにメールアプリを起動して指定したメールアドレスに送信させることができます。以下が例です。

<a href="mailto:hogehoge@example.com">お問い合わせはこちら</a>

この例では、「お問い合わせはこちら」というテキストリンクをクリックすると、メールアプリを起動して「hogehoge@example.com」というメールアドレスにメールを送信する動作を行います。このように、href属性の値に「mailto:」と記述し、その後に送信先のメールアドレスを書くことで、メールを送るためのリンクを作成することができます。

また、mailtoスキームはメールの件名や本文、CCやBCC先のメールアドレスを指定することもできます。

件名	?subject=件名
本文	?body=本文
CC	?cc=メールアドレス
BCC	?bcc=メールアドレス
改行	%0d%0a
半角スペース	%20

これらはクエリ文字列といい、href属性内のURLにパラメーターと値を渡すことでメールアプリに情報を渡すことが出来ます。URLの後ろに「？」記述しますが、複数のパラメーターを渡す場合は「？」を「&」に置き換えます。以下が例です。

<a href="mailto:hogehoge@example.com?subject=お問い合わせありがとうございます&body=この度はお問い合わせいただきありがとうございます。以下にお問い合わせ内容を記載して送信して下さい。%0d%0a========お問い合わせ内容=========&cc=hoge@hoge.com&bcc=hogehoge@hoge.com">お問い合わせはこちら</a>

mailtoスキームを使用する際の注意点として、メールアドレスをウェブサイトに公開すると迷惑メールなどの標的になる危険性があります。また、ユーザーの環境によっては文字化け対策が必要になるなど、全てのユーザーに正しく動作させるのが困難なのでmailtoスキームは非推奨として扱われています。

お問い合わせ機能を実装する方法としては簡単ですが、mailtoは問題も多いので一般的にはPHPなどのサーバーサイド言語やWordPressなどのCMS等を使用したほうが良いでしょう。

ただ、実際の制作現場ではメールソフトを起動するようにしてほしいとクライアントから要求される可能性があるので、ウェブエンジニアを目指すなら知っていて損はないでしょう。

カスタムURLスキームについて

カスタムURLスキームはアプリケーション側で定義されており、そのURLをクリックした際にアプリケーションの起動とデータの送信を行います。そのため、そのアプリケーションが十分に信頼できるものであるかが重要になります。

カスタムURLスキームは実用的な技術であり、ウェブ制作でもSNSの連携などに使用されることがあります。リンクをクリックした際にいきなりウェブブラウザとは違うアプリケーションが立ち上がるとユーザーは驚いてしまう可能性があります。こちらもtelスキームと同様で、ユーザーに同意を求めるなどの処理を行うと親切です。

最後に

aタグについての解説は以上になります。

URLスキームは少し複雑な内容ですが、全てを覚える必要はありません。必要になった時に「こんな方法があったな」と思い出すことが出来れば十分です。

aタグはセキュリティやユーザビリティに大きく影響を与えるものなので、適切に扱うように心がけましょう。