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

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

aタグ（アンカー要素）とは

HTMLの<a>要素は、ハイパーリンクを使ってページ同士をつなぐために使用される要素です。ブラウザでは、未訪問のリンクは青色、訪問済みのリンクは紫色、クリック中のアクティブなリンクは赤色で表示され、いずれも下線が引かれます。リンク先には外部のWebページだけでなく、サイト内のローカルページやページ内の特定位置（アンカー）も指定できます。

aタグの主な属性一覧

<a>タグで利用できる主な属性は以下の通りです。

属性値説明
charset（非推奨）character_encodingリンク先ドキュメントの文字エンコーディングを定義します。
coords（非推奨）shape="rect" の場合："left, top, right, bottom"
shape="circ" の場合："centerx, centery, radius"
shape="poly" の場合："x1, y1, x2, y2, ..., xn, yn"		イメージマップにおいて、shape属性に対応する座標を指定し、画像上の領域を定義します。
downloadfilenameユーザーがハイパーリンクをクリックした際に、リンク先ファイルをダウンロードさせます。
hrefURLリンク先のページURL、またはジャンプ先アンカー名を指定します。
hreflanglanguage_codeリンク先URLの言語コードを指定します。
mediamedia_queryリンク先ドキュメントが最適化されているメディアタイプを指定します。
name（非推奨）section nameリンクのジャンプ先となるページ内の領域を示します。HTML5以降は代わりにid属性を使用します。
relalternate / 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：ウィンドウ全体で開く。
typemime_typeリンク先URLのMIMEタイプ（Multipurpose Internet Mail Extensions）を指定します。

それでは、HTMLで<a>タグを実装する具体例を見てみましょう。

使用例

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<nav>
   <a href="/compile_java_online.php">Java</a> |
   <a href="/php_terminal_online.php">PHP</a> |
   <a href="/online_jquery_editor.php">jQuery</a> |
   <a href="/compile_c_online.php">C</a> |
   <a href="/compile_cpp_online.php">C++</a> |
   <a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
</body>
</html>

表示結果

このコードをブラウザで開くと、「Java」「PHP」「jQuery」「C」「C++」「AngularJS」という各オンラインコンパイラへのナビゲーションリンクが横並びで表示され、それぞれのテキストをクリックすると対応するページへ移動できます。

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

まとめ

<a>タグはWebページの根幹を支える最も重要な要素のひとつです。特に実務でよく使われるのは「href」（リンク先の指定）と「target="_blank"」（新しいタブで開く）です。一方、charset・coords・name・rev・shapeといった属性はHTML5で非推奨となっているため、新規のコードでは使用しないように注意しましょう。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"