<a>
<a> は HTML の要素（アンカー要素）で、href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。
<a> の内容は、リンク先を示すものであるべきです。href 属性が存在する場合、<a> 要素にフォーカスがある状態で Enter キーを押すと起動します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML 属性 | ||||||
href | 1 | 12 | 1 | 1 | 18 | 1 |
hreflang | 1 | 12 | 1 | 1 | 18 | 1 |
implicit_noopener target="_blank"`は、`rel="noopener"`の動作を意味する。 | 88 | 88 | 79 | 12.1 | 88 | 12.2 |
| rel 属性は、リンク先のリソースと現在の文書との関係を定義します。 link、a、area、form で有効で、対応する値は属性が見つかった要素に依存します。 | 1 | 12 | 1 | 1 | 18 | 1 |
target | 1 | 12 | 1 | 1 | 18 | 1 |
type | 1 | 12 | 1 | 1 | 18 | 1 |
| DOM API | ||||||
| HTMLAnchorElement インターフェイスはハイパーリンク要素を表し、そのような要素のレイアウトと表示を操作するための特別なプロパティとメソッド（継承元である通常の HTMLElement オブジェクトインターフェイスにないもの）を提供します。 このインターフェイスは 要素に対応しています。 は HTMLLinkElement で表されるものであり、混同しないでください。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.hash プロパティは、'#' の後に URL のフラグメント識別子が続く文字列を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.host プロパティは、ホストを含む文字列です。すなわち、ホスト名の後に、 URL のポートが空でない場合は、':'、および URL のポートが続きます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.hostname プロパティは、URL のドメインを含む文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.href はstringifierプロパティで、URL 全体を含む文字列を返し、 href を更新することもできます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| hreflang は HTMLAnchorElement インターフェイスのプロパティで、リンクされたソースの言語の文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.origin は読み取り専用プロパティで、表現している URL のオリジンを Unicode シリアル化した文字列です。 | 8 | 17 | 26 | 5.1 | 18 | 5 |
| HTMLAnchorElement.password プロパティは、ドメイン名の前で指定されたパスワードが入った文字列です。 | 32 | 79 | 26 | 10 | 32 | 10 |
| HTMLAnchorElement.pathname プロパティは、最初の '/' とその後に続く URL のパスが入った文字列（または、パスがない場合は空の文字列）です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.port プロパティは、URL のポート番号が入った文字列です。 URL に明示的にポート番号が含まれていない場合は、'' に設定されます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.protocol プロパティは、 URL のプロトコルスキームを表す文字列で、最後の ':' を含みます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.rel プロパティは rel 属性を反映しています。これは、空白で区切られたリンク種別のリストの入った文字列であり、a 要素で表されるリソースと現在の文書との関係を示します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.relList は読み取り専用プロパティで、rel 属性を反映します。 これは生きた DOMTokenList で、a 要素で表されるリソースと現在のドキュメントの間の関係を示すリンク種別のセットが入ります。 | 65 | 18 | 30 | 9 | 65 | 9 |
| HTMLAnchorElement.search プロパティは、クエリー文字列とも呼ばれる検索文字列、つまり '?' とその後に続く URL の引数の入った文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| target は HTMLAnchorElement インターフェイスのプロパティで、リンク先のリソースを表示する場所を示す文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| text は HTMLAnchorElement のプロパティで、要素内のテキストを表します。 このプロパティは Node.textContent と同じ情報を表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.toString() はstringifierメソッドで、 URL 全体の入った文字列を返します。 これは、 HTMLAnchorElement.href の読み取り専用バージョンです。 | 52 | 12 | 22 | 3 | 52 | 1 |
| type は HTMLAnchorElement インターフェイスのプロパティで、リンク先のリソースの MIME タイプを示す文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLAnchorElement.username プロパティは、ドメイン名の前で指定されたユーザー名の入った文字列です。 | 32 | 79 | 26 | 10 | 32 | 10 |
| その他 | ||||||
html.elements.a.href.href_sms `href = 'sms:'` | | | 12 | | | |
html.elements.a.href.href_top `href = '#top'` | 1 | 12 | 10 | ≤4 | 18 | ≤3.2 |
| noopener キーワードを rel 属性に指定すると、 a, area, form の各要素では、ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。開かれたウィンドウの Window.opener プロパティプロパティは設定されません（null を返します）。 | 49 | 79 | 52 | 10.1 | 49 | 10.3 |
| noreferrer キーワードを rel 属性に指定すると、 a, area, form の各要素はターゲットリソースへ移動する際、 Referer ヘッダーを省略してリファラー情報が漏洩しないようにブラウザーに指示します。それに加えて、 noopener キーワードを設定しているかのように動作します。 | 16 | 13 | 33 | 5 | 18 | 4.2 |
- Firefox 41 以降、`href` 属性のない <a> はインタラクティブコンテンツとして分類されなくなりました: <label> 内をクリックするとラベル付きコンテンツが有効になります (バグ 1167816)。
- Firefox 29 から Firefox 40 では、返される値のパーセントデコードが正しくありませんでした。
- Firefox 49 より前のバージョンでは、`blob` スキームを使用した URL の結果が誤って `null` を返していました。
- Firefox 53 より前のバージョンでは、`pathname` と `search` の `HTMLHyperlinkElementUtils` プロパティは URL の間違った部分を返していました。例えば、URL が `https://z.com/x?a=true&b=false` の場合、`pathname` は `'/x'` と `'?a=true&b=false'` を、`search` は '' を返します。これは現在修正されている。
- Firefox 53 より前のバージョンでは、`pathname` と `search` の `HTMLHyperlinkElementUtils` プロパティは URL の間違った部分を返していました。例えば、URL が `https://z.com/x?a=true&b=false` の場合、`pathname` は `'/x'` と `'?a=true&b=false'` を、`search` は '' を返します。これは現在修正されている。
- Firefox 63 以前では、`rel="noopener"` はデフォルトですべての機能が無効化されたウィンドウを作成していました。Firefox 63 以降、これらのウィンドウは他のウィンドウと同じ機能がデフォルトで有効になります。
基本構文
<a href="https://example.com">External links</a>
<a href="/about/">Internal links</a>
<a href="#section1">Links within this page</a>
<a href="mailto:info@example.com">Email links</a>
<a href="/file.pdf" download>Download PDF</a>ライブデモ
Basic links
Href attribute in various linkdestination specified.pe-jinsidelink or Emaillink also possible.
Button-style links
link button. like to styling.color or size changeTry changing it.. with CSS
実務での使いどころ
-
<a> の活用
<a> は HTML の要素（アンカー要素）で、href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。