a要素でリンク先を指定

インターネット上のWebサイトやWebページ同士をつなげるハイパーリンクを設定するのがa要素です。a要素は「anchor」の略で、船を繋ぎ止める「錨」を意味します。a要素はWebページ同士の遷移だけでなく、ページ内の文章間の移動やファイルのダウンロードにも使用されます。

リンク先はhref属性（エイチレフ）を使って指定します。href属性は「hypertext reference」の略で、「ハイパーテキストの参照」という意味になります。

a要素はテキストや画像をマークアップするだけでなく、様々な要素を含んでマークアップすることができます。<a>タグで囲まれた範囲がハイパーリンクとして機能し、クリックするとhref属性で指定したページへ移動することができます。

<a href="リンク（参照）先のファイルパス">テキスト・画像・要素など</a>

リンク先のURLを指定するhref属性

href属性の値にはリンク先（参照先）のファイルのパスやURLを指定します。ファイルのパスには「相対パス」と「絶対パス」のどちらでも指定することができます。

<a href="index.html">相対パスのリンク</a>
<a href="http://www.example.com/index.html">絶対パスのリンク</a>

href属性には、HTMLや画像など別のファイルへのリンク以外にも以下のような値を設定することができます。

リンク先を開くときのウインドウを設定

a要素のtarget属性では、リンク先のWebページをどのウィンドウ（あるいはタブ）に表示するかを指定することができます。

<a href="http://www.example.com/" target="リンクの表示先を指定するキーワード">テキスト・画像・要素など</a>

target属性の値には以下の4つのキーワードが指定できます。

次のコードでは、リンクをクリックすると新しいウィンドウやタブが開かれてページが表示されるます。外部リンク（別のドメイン）へのリンクなどを設定する場合に使用されます。

<a href="http://www.example.com/" target="_blank">新しいウィンドウでリンクを開く</a>

ページ内の指定した位置へのリンク（ページ内リンク）を指定

ページ内の指定した要素の位置（アンカー）にジャンプ（移動）するリンクは「ページ内リンク」と呼ばれ、href属性の値に移動先の要素に設定したid名（アンカー名）の先頭に#（ハッシュ）を付けて「#id名」という形で指定することで設置できます。

ページ内リンクはユーザーが目的の情報に素早くたどり着けるため、ストレスなくコンテンツを閲覧できといったユーザビリティの向上のために、よく使われる手段です。

<nav>
    <ul>
        <li><a href="#html">HTML</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#javascript">JavaScript</a></li>
    </ul>
</nav>

<section>
    <h2 id="html">HTML</h2>
    <p>Webページの文書構造を定義するためのマークアップ言語です。</p>
</section>
<section>
    <h2 id="css">CSS</h2>
    <p>Webページのレイアウトやデザイン・装飾をするための言語です。</p>
</section>
<section>
    <h2 id="javascript">JavaScript</h2>
    <p>ブラウザ上で実行されるスクリプト言語です。</p>
</section>

このアンカーへのリンクは他のWebページにあるアンカーにも使用できます。href属性の値に設定したURLまたはファイルパスに続けて「#アンカー名」を指定すれば、他のWebページの設定したアンカー位置へ移動することができます。

<a href="company.html#history">会社の歴史</a>

a要素でメールへのリンクを指定

href属性の値の設定でメールアドレスの先頭に「mailto:」を付加して「mailto:メールアドレス」という形で記述すると、リンクをクリックした時メールソフトが立ち上がるようになります。メールソフトのメールの宛先欄には、指定したメールアドレスが入力されている状態になります。

<a href="mailto:info@example.com">メールはこちらへ</a>