【HTML Living Standard】a要素の使い方

a要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月24日

基本的な使い方

aオブジェクトは、HyperText Markup Language (HTML) において、ハイパーリンクを作成し、ウェブページ間の移動や外部リソースへのアクセスを実現するための重要な要素を表すオブジェクトです。このオブジェクトを用いることで、ユーザーがクリック可能なテキストや画像を設置し、指定されたウェブページ、ファイル、または他のコンテンツへ誘導することができます。

aオブジェクトの機能は、href属性によって定義されます。href属性には、リンク先のURL（統一リソースロケータ）を正確に指定する必要があり、これにより、クリック時に指定された場所へブラウザが移動します。例えば、別のウェブサイトのページ、ウェブサイト内の他のページ、画像ファイル、PDFドキュメント、さらにはメールアドレスや電話番号など、多種多様なリソースへのリンクを設定することが可能です。

さらに、target属性を利用することで、リンク先を新しいタブやウィンドウで開くかどうかを制御したり、download属性を用いることで、リンク先ファイルをダウンロードとして提供したりすることもできます。aオブジェクトは、ウェブの相互接続性を支え、ユーザーにシームレスなナビゲーション体験を提供する上で不可欠な要素です。

公式リファレンス: <a>: The Anchor element

構文(syntax)


1<a href="URL">リンクテキスト</a>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTML aタグでリンクを作成する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML aタグ サンプル</title>
7</head>
8<body>
9    <h1>aタグの基本的な使用例</h1>
10
11    <!-- <a>タグはハイパーリンクを作成するために使用されます。 -->
12    <!-- href属性にリンク先のURLを指定します。 -->
13    <p>
14        <a href="https://www.example.com/">Example.comへ移動</a>
15    </p>
16
17    <!-- target="_blank"属性を使うと、リンクを新しいタブで開くことができます。 -->
18    <!-- セキュリティ対策としてrel="noopener noreferrer"を併用することが推奨されます。 -->
19    <p>
20        <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/a" target="_blank" rel="noopener noreferrer">MDNのaタグ解説を新しいタブで開く</a>
21    </p>
22</body>
23</html>

HTMLの<a>タグは、ウェブページ上で他のページや外部サイトへの移動を可能にするハイパーリンクを作成するための要素です。一般的なプログラミング言語の関数やメソッドに見られる「引数」や「戻り値」といった概念は、HTML要素である<a>タグには直接適用されません。HTML要素は代わりに「属性」を使用し、その属性に値を設定することで挙動を制御します。

最も基本的な属性はhrefで、これにはリンク先のURLを指定します。例えば、<a href="https://www.example.com/">Example.comへ移動</a>と記述すると、「Example.comへ移動」というテキストがクリック可能なリンクとなり、指定されたURLへ遷移します。

また、リンクを新しいタブやウィンドウで開きたい場合には、target="_blank"属性を使用します。この際、セキュリティを考慮し、元のページへの不正なアクセスを防ぐためにrel="noopener noreferrer"属性を併用することが推奨されています。

このように、<a>タグはhref属性で「どこへ移動するか」を、targetやrel属性で「どのように移動するか」を定義し、ウェブのナビゲーション機能において中心的な役割を果たします。

<a>タグは、Webページ間で移動するためのハイパーリンクを作成する重要な要素です。必須属性であるhrefには、リンク先のURLを正確に記述してください。URLの誤りはリンク切れとなり、ユーザー体験を損ねます。

サンプルにあるように、target="_blank"属性を使用すると、リンクを新しいタブで開くことができます。しかし、この使い方にはセキュリティ上の注意が必要です。新しいタブで外部サイトを開く際には、元のページが不正に操作される脆弱性を防ぐため、必ずrel="noopener noreferrer"属性を併用してください。これはWebアプリケーション開発において必須のセキュリティ対策の一つです。

また、<a>タグはクリック可能なテキストや画像を囲むために使用されますが、ブロック要素である見出し（<h1>など）を直接含めることは避けるのが一般的です。文法上許されても、セマンティクス（意味）を考慮した適切な記述を心がけましょう。

HTMLでリンクを赤字にする方法


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>赤字リンクのサンプル</title>
7    <!-- スタイルを定義し、<a>要素（リンク）のテキスト色を赤に変更します -->
8    <style>
9        a {
10            color: red; /* <a>要素のテキスト色を赤色に設定 */
11        }
12    </style>
13</head>
14<body>
15    <h1>リンクの表示例</h1>
16    <!-- こちらはa要素を使用したリンクです。上記のスタイル設定により赤字で表示されます。 -->
17    <p><a href="https://www.example.com">このリンクは赤字で表示されます</a></p>
18</body>
19</html>

HTMLの<a>要素は、ウェブページ内でハイパーリンクを作成するために使用される要素です。この要素を使うことで、ユーザーがテキストや画像をクリックすると、別のウェブページやファイル、画像などの指定されたリソースへ移動できるようになります。<a>要素自体には、プログラミング言語の関数のような引数や戻り値といった概念は直接的にはありません。しかし、hrefという属性を用いて、リンク先のURLを必ず指定します。

提示されたサンプルコードでは、<p>タグ内に<a href="https://www.example.com">このリンクは赤字で表示されます</a>と記述されており、「このリンクは赤字で表示されます」というテキストがhttps://www.example.comへのリンクとして機能します。特に注目すべきは、<head>セクション内の<style>タグでCSS（カスケーディングスタイルシート）が定義されている点です。a { color: red; }という記述により、ページ内のすべての<a>要素のテキスト色が赤色に設定され、視覚的に目立つ赤字のリンクが実現されています。HTMLで情報の構造を定義し、CSSでその見た目を制御するという基本は、ウェブ開発において非常に重要です。

<a>要素はウェブページで他のページやリソースへ移動するためのリンクを作成する基本的な要素です。href属性は必須で、リンク先となるURLを正確に指定する必要があります。サンプルでは<style>タグ内でCSSを使用し、color: red;でリンクの文字色を赤くしていますが、このようにHTMLの見た目に関する装飾はCSSで行うのが一般的です。実運用では、HTMLファイル内に直接<style>タグを書くのではなく、CSSコードを別のファイルに記述し、HTMLから読み込む方法が推奨されます。これにより、コードの管理が容易になり、保守性が向上します。また、リンクテキストはユーザーがどこへ移動するのかを理解しやすい具体的な内容にすることが重要です。