HTMLでアンカーを作成する方法!<a>タグの使い方と属性一覧を解説
HTMLでアンカーを作成する方法
HTMLでアンカー(リンク)を作成するには、<a>タグを使用します。<a>タグは、別のドキュメントへのハイパーリンクを作成するだけでなく、現在のドキュメント内の特定の位置(ページ内リンク)へジャンプさせる際にも利用できます。
<a>タグで使用できる主な属性は以下のとおりです。
| 属性 | 値 | 説明 |
|---|---|---|
| charset | character_encoding | リンク先ドキュメントの文字エンコーディングを定義します。 |
| coords | shape="rect" の場合:coords="left, top, right, bottom" shape="circ" の場合:coords="centerx, centery, radius" shape="poly" の場合:coords="x1, y1, x2, y2, …, xn, yn" | shape属性に対応する座標を指定し、イメージマップ用の画像上の領域を定義します。 |
| download | filename | ユーザーがハイパーリンクをクリックしたときに、リンク先のファイルをダウンロードします。 |
| href | URL | リンク先のページのURL、またはジャンプ先のアンカー名を指定します。 |
| hreflang | language_code | リンク先URLの言語コードを指定します。 |
| media | media_query | リンク先ドキュメントがどのメディア向けに最適化されているかを指定します。 |
| name | section name | リンクのジャンプ先となるページ内の領域を示します。 |
| rel | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark | 現在のドキュメントとリンク先URIとの関係を記述します。 |
| rev | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark | リンク先URLと現在のドキュメントとの関係を指定します。 |
| shape | rect(rectangle) circ(circle) poly(polygon) | イメージマップの形状を指定します。 |
| target | _blank _parent _self _top | リンク先URLをどこで開くかを指定します。 _blank:新しいウィンドウ(タブ)で開く _self:クリックされたのと同じフレームで開く _parent:親フレームセットで開く _top:ウィンドウ全体で開く |
| type | mime_type | リンク先URLのMIMEタイプ(Multipurpose Internet Mail Extensions)を指定します。 |
コード例
以下のコードを実行して、HTMLでアンカーを組み込む方法を実際に確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>HTML aタグ</title>
</head>
<body>
<p>ようこそ <a href="https://www.qries.com">Qries</a> へ</p>
</body>
</html>
この例では、<a>タグのhref属性にリンク先のURLを指定することで、テキスト「Qries」がクリック可能なリンクになります。このように、<a>タグを使うだけで、外部サイトへのリンクもページ内リンクも簡単に作成できます。
-
HTMLのaタグとは?使い方と主要属性をサンプルコード付きで解説
aタグ(アンカー要素)とはHTMLの<a>要素は、ハイパーリンクを使ってページ同士をつなぐために使用される要素です。ブラウザでは、未訪問のリンクは青色、訪問済みのリンクは紫色、クリック中のアクティブなリンクは赤色で表示され、いずれも下線が引かれます。リンク先には外部のWebページだけでなく、サイト内のローカルページやページ内の特定位置(アンカー)も指定できます。aタグの主な属性一覧<a>タグで利用できる主な属性は以下の通りです。属性値説明charset(非推奨)character_encodingリンク先ドキュメントの文字エンコーディングを定義します。coords(非推
-
HTML DOM アンカーのtargetプロパティとは?使い方と設定値を解説
HTML DOM アンカーのtargetプロパティとは HTML DOMにおいて、アンカータグ(<a>)に関連付けられたtargetプロパティは、URLをクリックした後にリンク先のWebページをどこに開くかを指定するためのものです。このプロパティには、以下の値を設定できます。 target属性に指定できる値 _blank − リンク先のドキュメントを新しいウィンドウ(新しいタブ)で開きます。 _parent − リンク先のドキュメントを親フレームセット内で開きます。 _top − リンク先のドキュメントをウィンドウ全体(フレームを解除した状態)で開きます。 _self − リンク