HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでハイパーリンクを作成する方法！aタグの使い方と属性一覧を解説

aタグとは？ハイパーリンクの基本

HTMLで別のドキュメントへのリンク（ハイパーリンク）を作成するには、<a>（アンカー）タグを使用します。<a>タグは、外部サイトや別ページへのリンクはもちろん、同じページ内の特定の場所へジャンプするリンクにも利用できる、HTMLの最も基本的かつ重要な要素のひとつです。

aタグの主な属性一覧

<a>タグにはさまざまな属性があり、リンクの挙動を細かく制御できます。主な属性は以下のとおりです。

属性値説明
charset
※非推奨		character_encodingリンク先ドキュメントの文字エンコーディングを定義します。HTML5では廃止されています。
coordsshape="rect" の場合：left, top, right, bottom
shape="circ" の場合：centerx, centery, radius
shape="poly" の場合：x1, y1, x2, y2, …, xn, yn		shape属性と組み合わせて、イメージマップ上のクリック可能な領域の座標を指定します。
downloadfilenameユーザーがハイパーリンクをクリックした際に、リンク先のファイルをダウンロードさせます（HTML5で追加）。
hrefURLリンク先のページURL、またはページ内アンカーの名前を指定します。リンク作成において最も重要な属性です。
hreflanglanguage_codeリンク先URLの言語コード（例：ja、en）を指定します。
mediamedia_queryリンク先ドキュメントがどのメディア向けに最適化されているかを指定します（HTML5で追加）。
name
※非推奨		section nameページ内リンクのジャンプ先となる領域を示します。HTML5では代わりにid属性の使用が推奨されます。
relalternate / stylesheet / start / next / prev / contents / index / glossary / copyright / chapter / section / subsection / appendix / help / bookmark など現在のドキュメントとリンク先URIとの関係性を記述します。
rev
※非推奨		relと同じ値リンク先URLから見た、現在のドキュメントとの関係を指定します。HTML5では廃止されました。
shaperect / circle / polyイメージマップで使用する領域の形状を指定します。
target_blank / _self / _parent / _topリンク先URLをどこで開くかを指定します。
_blank：新しいウィンドウ（タブ）で開く
_self：クリックされたのと同じフレームで開く
_parent：親フレームセットで開く
_top：ウィンドウ全体で開く
typemime_typeリンク先URLのMIMEタイプ（Multipurpose Internet Mail Extensions）を指定します。

ハイパーリンク作成のコード例

以下のコードを実行すると、外部サイトへのリンクを持つページが表示されます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML aタグの例</title>
   </head>
   <body>
      <p>これは <a href="https://qries.com">Qries.com</a> へのリンクです</p>
   </body>
</html>

ブラウザでこのHTMLを表示すると、「これは Qries.com へのリンクです」という文章の中に、Qries.comへのリンクが埋め込まれて表示されます。このように、<a>タグのhref属性にリンク先のURLを指定するだけで、簡単にハイパーリンクを作成できます。

まとめ

ハイパーリンクの作成には<a>タグを使い、リンク先はhref属性で指定するのが基本です。新しいタブで開きたい場合はtarget="_blank"を、ダウンロードリンクにしたい場合はdownload属性を追加するなど、目的に応じて属性を組み合わせることで、柔軟にリンクを制御できます。ただし、charset・name・revなどの一部の属性はHTML5で非推奨または廃止されているため、新規の開発では使用しないように注意しましょう。

  1. HTMLのaタグとは？使い方と主要属性をサンプルコード付きで解説

    aタグ（アンカー要素）とはHTMLの<a>要素は、ハイパーリンクを使ってページ同士をつなぐために使用される要素です。ブラウザでは、未訪問のリンクは青色、訪問済みのリンクは紫色、クリック中のアクティブなリンクは赤色で表示され、いずれも下線が引かれます。リンク先には外部のWebページだけでなく、サイト内のローカルページやページ内の特定位置（アンカー）も指定できます。aタグの主な属性一覧<a>タグで利用できる主な属性は以下の通りです。属性値説明charset（非推奨）character_encodingリンク先ドキュメントの文字エンコーディングを定義します。coords（非推

  2. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800