Web開発 - HTML：ハイパーリンク

初めに

　本記事では、HTMLにおけるハイパーリンクの作成方法について記述します。

Index

ハイパーリンクの基本

　HTMLにおいて、ハイパーリンク（リンク）を作成するには、<a>（anchor）タグを使用します。<a>タグは href 属性を使用してリンク先のURLを指定します。

<a href="リンク先のURL">リンクテキスト</a>

（例）

<a href="https://www.google.com/">Googleへのリンク</a>

同じページ内のリンク

　同じページ内の別のセクションや場所へのリンクを作成する場合、リンク先のURLとしてそのセクションや場所のIDを指定することもできます。

<!-- ページ内の特定のセクション -->
<h2 id="section1">セクション1</h2>
<p>セクション1の内容</p>

<!-- リンクを作成 -->
<!-- 同じページ内のリンクの場合, #をつける -->
<a href="#section1">セクション1へのリンク</a>

　なお、下のように href 属性でIDを指定せず、#だけ記述するとページ内のトップにスクロールします。

<a href="#">ホーム</a>

ブロックレベルリンク

　<a> タグで挟んだものはすべてリンクにすることができます。

    <a href="https://www.google.com/">
        <h1>Googleへのリンク</h1>
        <p>Googleのページに飛びます</p>
    </a>

画像リンク

　ブロックレベルリンクの書き方を用いて、画像をリンクにすることができます。

    <a href="https://www.google.com/">
        <img src="google_logo.png" alt="Googleロゴ">
    </a>

title属性による補足情報の追加

　リンクに追加したいもう一つの属性は title です。 タイトルには、そのページがどのような情報を含んでいるか、あるいはウェブサイトで注意すべきことなど、リンクに関する追加情報が含まれます。

    <a href="https://www.google.com/" title="Googleへのリンク先">
        <img src="google_logo.png" alt="Googleロゴ">
    </a>

　リンクの上にマウスを当てると、title属性に記述した内容がツールチップとして表示されます。

メールのリンク

　href 属性に mailto: を使うことで、クリックすると、リソースまたはページにリンクするのではなく、新しい送信メールメッセージを開くリンクを作成することができます。

<a href="mailto:メールアドレス">リンクテキスト</a>

参考

developer.mozilla.org