【HTML】aタグの使い方をマスター！リンク設定から属性の使い方まで徹底解説
HTMLでWebサイトを作成する際、ほぼ必ず必要になるのが「aタグ」です。aタグは他のページへ移動したり、メールアドレスや電話番号へ直接つなげたりと、ユーザーの行動を促す重要な役割を担っています。
初心者の方は「とりあえずリンクが貼れればいい」と思うかもしれませんが、aタグには様々な属性があり、使い方次第でユーザビリティやSEO効果が大きく変わってきます。
この記事では、aタグの基本的な書き方から、実務で役立つ応用テクニックまで丁寧に解説します。href属性やtarget属性といった基礎はもちろん、ページ内リンクやダウンロード機能の実装方法もご紹介しますので、ぜひ最後までお読みください。
HTMLのaタグとは？
aタグは、HTMLで別のページや特定の場所へのリンクを作成するための要素です。「anchor（アンカー）」の頭文字を取った名称で、Webサイト内の導線を作る上で欠かせない存在となっています。
このタグを使えば、他のWebページへ移動させたり、同じページ内の特定箇所へ遷移させたりできます。さらに、メールアドレスや電話番号へ直接つなぐことも可能です。
Webサイトの使いやすさを左右する重要な役割を持っているため、正しい使い方を理解しておく必要があるでしょう。
なお、HTMLには、aタグ以外にも様々なタグが存在します。詳しくは以下の記事を参考にしてください。
「なんか今の仕事合わないな・・・」
「IT業界に転職してみたいなぁ・・・」
という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか？
「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です！
WEBCAMPの卒業生は転職後に年収もUP！（例：年収250万円→500万円）
しかも今なら受講料の最大70%が給付金として支給されます。
DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です
【HTML】aタグの基本の書き方
aタグは基本的に、以下の形式で記述します。
<a href="リンク先のURL">テキスト</a>開始タグと終了タグで囲んだテキスト部分が、クリックできる箇所として表示される仕組みです。この囲まれたテキストは「アンカーテキスト」と呼ばれ、リンク先の内容を表す言葉を入れるのが基本です。
検索エンジンはアンカーテキストからリンク先のページ内容を判断するため、適切なキーワードを含めることでSEO効果も期待できます。たとえば「こちら」ではなく「HTMLの基礎講座」のように、具体的な表現を使うとよいでしょう。
aタグでリンクを貼る方法については、以下の記事でも紹介していますので、ぜひ参考にしてください。
【基本～応用】aタグの属性と記述方法
aタグには、リンクの動作や表示方法を細かく制御できる様々な属性が用意されています。最も基本となるのがリンク先を指定するhref属性ですが、他にも新しいタブで開くかどうかを決めるtarget属性や、検索エンジンへの指示を出すrel属性など、用途に応じた設定が可能です。
これらの属性を適切に組み合わせることで、ユーザーにとって使いやすく、SEO面でも効果的なリンクを作成できます。ここからは、実務でよく使う属性とその記述方法を順番に見ていきましょう。
リンク先のURLを指定する「href属性」
href属性は、aタグで最も重要な属性です。この属性にURLを指定することで、ユーザーがクリックした際の移動先を決定します。
href属性には内部リンク、外部リンク、電話番号やメールアドレスなど、様々な形式の値を設定できます。指定方法によってリンクの挙動が変わるため、目的に応じた適切な記述を選ばなければなりません。
内部リンクを設定する方法
内部リンクは、自分のサイト内の別ページへ移動させるリンクです。設定方法には「絶対パス」と「相対パス」の2種類があります。
絶対パスは、ドメインから始まる完全なURLを記述する方法です。
<a href="https://example.com/about/profile.html">プロフィール</a>この記述では、クリックすると指定した完全なURLへ移動します。
一方、相対パスは現在のページを基準にした記述方法です。
<a href="about/profile.html">プロフィール</a>同じ階層にあるフォルダを参照する場合は、このように書けば済みます。相対パスの方がシンプルで、サイト移転時の修正も楽になるため、内部リンクでは相対パスを使うケースが多いです。
外部リンクを設定する方法
外部リンクは、自分のサイト以外のWebページへ誘導するリンクです。設定には必ず絶対パスを使用します。
<a href="https://example-site.com/">外部サイト名</a>この記述で、クリック時に指定した外部サイトへ移動します。外部リンクを設置する際は、後述するtarget属性やrel属性と組み合わせて、新しいタブで開いたりセキュリティ対策を施したりするのが一般的です。
電話番号（tel:）やメール（mailto:）の設定方法
href属性には、URLだけでなく電話番号やメールアドレスも指定できます。電話番号へのリンクは、tel:を使って記述します。
<a href="tel:03-1234-5678">03-1234-5678</a>スマートフォンでこのリンクをタップすると、自動的に電話アプリが起動して発信画面が表示されます。
そしてメールアドレスへのリンクは、mailto:を使用します。
<a href="mailto:info@example.com">お問い合わせ</a>クリックするとメールアプリが立ち上がり、指定したアドレスが宛先に自動入力されるため、ユーザーの手間を減らせるでしょう。
リンク先の表示方法を指定する「target属性」
target属性は、リンクをクリックした際にページをどこに表示するかを制御する属性です。新しいタブやウィンドウで開くか、今見ているページと同じ場所で開くかを指定できます。
外部サイトへのリンクでは新しいタブで開いて元のページを残したり、内部リンクでは同じタブで移動させたりと、用途に応じた使い分けが可能です。ユーザーの閲覧体験を左右する要素なので、適切な設定を心がけましょう。
新しいウインドウで表示する方法
新しいタブやウィンドウでリンク先を開きたい場合は、target属性に「_blank」という値を指定します。
<a href="https://example-site.com/" target="_blank">外部サイト</a>この記述により、クリックすると元のページはそのまま残り、別のタブでリンク先が開きます。外部サイトへのリンクや、PDFファイルなどを表示させたいときによく使われる設定です。
ただし、セキュリティ上の理由から、target=”_blank”を使う際はrel=”noopener”も併せて記述するのが推奨されています。
<a href="https://example-site.com/" target="_blank" rel="noopener">外部サイト</a>この対策により、リンク先のページから元のページへ不正アクセスされるリスクを防げるでしょう。
現在のウィンドウ・タブで表示する方法
現在開いているタブやウィンドウでリンク先を表示したい場合は、target属性に「_self」を指定します。
<a href="about.html" target="_self">会社概要</a>クリックすると、今見ているページが閉じて、リンク先のページに切り替わります。ただ、実はtarget属性を指定しない場合も同じ動作になるため、_selfをわざわざ記述する必要はありません。
<a href="about.html">会社概要</a>このように書いても、同じタブ内でページが遷移します。内部リンクでは基本的にこの動作が望ましいため、target属性自体を省略するケースが多いでしょう。
リンク先との関係性を示す「rel属性」
rel属性は、現在のページとリンク先のページがどのような関係にあるかを示す属性です。検索エンジンやブラウザに対して、リンクの性質や目的を伝える役割を持っています。
この属性を適切に設定することで、SEO効果を高めたり、セキュリティリスクを回避したりできます。用途によって様々な値が用意されているため、状況に応じた使い分けを覚えておくといいでしょう。
別デバイス用や翻訳ページを提示する方法
同じ内容のページが別の形式で存在する場合、rel属性で「alternate」を指定します。スマートフォン向けページがある場合は、次のように記述します。
<a href="https://example.com/sp/" rel="alternate">スマートフォン版はこちら</a>また、多言語サイトで翻訳ページへのリンクを設置する際も使用できます。
<a href="https://example.com/en/" rel="alternate" hreflang="en">English</a>hreflang属性と組み合わせることで、検索エンジンに言語の違いを正しく認識させられるでしょう。
前後ページとの関係を明示する方法
連続したページ構成で前後のページへのリンクを設置する場合、rel属性を使って関係性を示せます。次のページへのリンクには「next」を指定します。
<a href="page2.html" rel="next">次のページ</a>前のページへのリンクには「prev」を使用します。
<a href="page1.html" rel="prev">前のページ</a>これらの指定により、検索エンジンがページの連続性を理解しやすくなり、適切なインデックス処理が期待できます。記事を複数ページに分割している場合には、とくに有効な設定です。
リンク先を検索エンジンに評価させない設定方法
検索エンジンにリンク先を評価させたくない場合は、rel属性に「nofollow」を指定します。
<a href="https://example.com/" rel="nofollow">参考サイト</a>この記述により、検索エンジンのクローラーがリンク先を辿らなくなります。広告リンクや信頼性が確認できないサイトへのリンクを設置する際に使われる設定です。
また、「ugc」という値も用意されています。
<a href="https://example.com/" rel="ugc">ユーザー投稿リンク</a>ugcはUser Generated Content（ユーザー生成コンテンツ）の略で、コメント欄やフォーラムなど、ユーザーが自由に投稿したリンクに使用します。検索エンジンに対して、サイト運営者が直接管理していないリンクであることを伝えられるでしょう。
別タブで開く際のセキュリティ対策方法
target=”_blank”で新しいタブを開く際は、セキュリティ対策としてrel属性に「noopener」を指定します。
<a href="https://example.com/" target="_blank" rel="noopener">外部サイト</a>この設定を行わないと、リンク先のページが元のページを操作できる状態になってしまいます。悪意のあるサイトに誘導されるフィッシング詐欺などのリスクを防ぐため、target=”_blank”を使う際は必ずnoopenerも併記しましょう。
さらに、「noreferrer」を追加することもあります。
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">外部サイト</a>noreferrerを指定すると、リンク先に対して参照元の情報が送信されなくなります。プライバシー保護を重視する場合に有効な設定です。
リンク先のファイル形式を指定する「type属性」
type属性は、リンク先がどのような形式のファイルであるかをブラウザに伝える属性です。MIME タイプと呼ばれる形式で指定することで、ブラウザがリンク先の内容を事前に把握できるようになります。
現在のブラウザは自動的にファイル形式を判断できるため、必須の属性ではありません。しかし、明示的に指定しておくことで、ブラウザの処理が効率化されたり、ユーザーに親切な表示ができたりするメリットがあります。
HTMLドキュメントを指定する方法
通常のWebページへのリンクには、type属性に「text/html」を指定します。
<a href="about.html" type="text/html">会社概要</a>この記述により、ブラウザはリンク先がHTMLファイルであることを認識します。ただし、一般的なWebページへのリンクではtype属性を省略しても問題なく動作するため、実務ではあまり使われません。
むしろ、特殊な形式のファイルへリンクする際に、type属性の重要性が高まります。
PNG画像を指定する方法
画像ファイルへのリンクを設置する場合、type属性でファイル形式を明示できます。PNG画像の場合は「image/png」を指定します。
<a href="sample.png" type="image/png">サンプル画像を見る</a>クリックすると画像ファイルが開きます。ブラウザは事前にPNG形式だと理解できるため、適切な表示方法を準備できるでしょう。
JPEG画像の場合は「image/jpeg」、GIF画像の場合は「image/gif」というように、ファイル形式に応じて値を変更します。
PDFファイルを指定する方法
PDFファイルへのリンクには、type属性に「application/pdf」を指定します。
<a href="document.pdf" type="application/pdf">資料をダウンロード</a>この記述により、ブラウザはリンク先がPDFファイルであると認識します。クリックすると、ブラウザの設定に応じてPDFビューアーで開いたり、ダウンロードが始まったりするでしょう。
PDFのような大きなファイルへリンクする際は、type属性を記述しておくことで、ユーザーが事前にファイル形式を把握できる利点があります。
リンク先の文字コードを指定する「charset属性」
charset属性は、リンク先のページがどの文字コードで作成されているかをブラウザに伝える属性です。以前は異なる文字コードのページへリンクする際に使用されていました。
記述例は次のとおりです。
<a href="page.html" charset="UTF-8">リンクテキスト</a>この指定により、ブラウザはリンク先がUTF-8という文字コードで書かれていることを事前に認識できました。
しかし、現在のHTML5ではcharset属性は非推奨とされています。なぜなら、現代のブラウザは自動的に文字コードを判別できるようになったため、わざわざ指定する必要がなくなったからです。
実際の制作現場でこの属性を使うことはほとんどないと考えていいでしょう。もし文字化けが心配な場合は、リンク先のHTMLファイル内で文字コードを適切に宣言しておく方が確実です。
aタグ側で対応するのではなく、各ページのhead要素内で<meta charset=”UTF-8″>と記述する方法が推奨されています。
なお、以下の記事では、aタグを含む、よく利用されるタグについて詳しく紹介しています。気になる方はぜひご一読ください。
【実践編】aタグの便利なリンク設定方法
ここまでaタグの基本的な属性について解説してきましたが、実際の制作現場ではさらに応用的な使い方が求められる場面も多くあります。同じページ内の特定箇所へジャンプさせたり、ファイルを直接ダウンロードさせたり、画像をクリック可能にしたりと、用途は様々です。
ここからは、実務で頻繁に活用される便利なリンク設定方法を紹介します。ここで紹介するものをうまく使いこなせば、ユーザーにとって格段に使いやすいWebサイトを作れるでしょう。
同一ページ内に飛ばす「ページ内リンク」
ページ内リンクは、同じページ内の特定の場所へ一気に移動させる機能です。長い記事の目次や「ページトップへ戻る」ボタンなどでよく使われています。
設定するには、まず移動先の要素にid属性を付けます。
<h2 id="section1">セクション1の見出し</h2>次に、aタグのhref属性で「#」に続けてそのid名を指定します。
<a href="#section1">セクション1へ移動</a>このリンクをクリックすると、ページ内のid=”section1″が設定された要素まで自動的にスクロールします。
ページの最上部へ戻るリンクを作りたい場合は、次のように記述します。
<a href="#top">ページトップへ</a>body要素などにid=”top”を付けておけば、クリック時に最上部まで移動するでしょう。長いページでユーザーの利便性を高めたいときに有効な手法です。
資料を保存させる「ダウンロードリンク」
ダウンロードリンクは、PDFや画像などのファイルをユーザーの端末に保存させるリンクです。資料配布やカタログ提供などでよく活用されています。
基本的な記述は、type属性でファイル形式を指定する方法です。
<a href="document.pdf" type="application/pdf">資料をダウンロード</a>この場合、ブラウザの設定によってはファイルが開いてしまうこともあります。確実にダウンロードさせたい場合は、HTML5で追加されたdownload属性を使用します。
<a href="document.pdf" download>資料をダウンロード</a>download属性を付けると、クリック時にブラウザで開かずに直接ダウンロードが始まります。さらに、保存時のファイル名を指定することも可能です。
<a href="document.pdf" download="会社案内.pdf">資料をダウンロード</a>この記述では、元のファイル名がdocument.pdfでも、ユーザーの端末には「会社案内.pdf」という名前で保存されます。わかりやすいファイル名を付けることで、ユーザーの管理がしやすくなるでしょう。
バナー画像などをクリックさせる「画像リンク」
画像リンクは、テキストではなく画像をクリック可能にする設定です。バナー広告やサムネイル画像など、視覚的に訴求したい場合に使われます。
設定方法は、aタグの中にimgタグを入れるだけです。
<a href="https://example.com/">
<img src="banner.png" alt="キャンペーンバナー">
</a>この記述により、banner.pngの画像全体がクリック可能になり、クリックすると指定したURLへ移動します。画像リンクを設定する際は、必ずimg要素にalt属性を付けましょう。
<a href="product.html">
<img src="product-image.jpg" alt="新商品の詳細ページへ">
</a>alt属性にリンク先の情報を含めることで、画像が表示されない環境でも内容が伝わりますし、スクリーンリーダーを使うユーザーにも配慮できます。アクセシビリティとSEOの両面で重要なポイントです。
まとめ
aタグはHTMLの中でも特に重要な要素で、Webサイトの使い勝手を大きく左右します。基本的なhref属性に加えて、target属性やrel属性を適切に組み合わせることで、ユーザーにとって親切な導線を作れるでしょう。
ページ内リンクやダウンロード機能、画像リンクといった応用テクニックも、実務では頻繁に求められる技術です。最初は属性の種類が多く感じるかもしれませんが、実際に手を動かしながら覚えていけば自然と身についていきます。
この記事で紹介した内容を参考に、ぜひ実践的なコーディングに挑戦してみてください。
今回紹介したaタグをはじめ、HTMLやCSSのスキルをもっと本格的に学びたい方には、DMM WEBCAMPのフロントエンドコースがおすすめです。実務で求められるコーディング技術を体系的に習得でき、現役エンジニアによる丁寧なサポートを受けられます。
基礎からしっかり学べるカリキュラムで、未経験の方でも安心して学習を進められるでしょう。Webサイト制作の実践的なスキルを身につけたい方は、ぜひチェックしてみてください。
