【HTML入門】href属性の使い方やオプションを理解しよう！

2024年3月29日

かい

みなさんこんにちは！

HTMLでほかサイトに飛ばしたり、別ページに移動させたいときってありますよね。

そんなときに使うhref属性ですが、正しく使えていますか？

今日は、

・href属性の使い方
・相対パスと絶対パス
・target属性
・download属性

について詳しくみていくので、href属性の使い方や様々なオプションを使いこなしたいという方は是非参考にしていただければ幸いです！

href属性とは

まずはじめに、href属性とは何かということについて軽く触れておきます。

href属性とは、a(アンカー)タグの属性の一つです。

aタグは他ページや他サイトのリンクを貼るときに利用しますが、リンク先を指定する属性がこのhref属性です。

使い方を見ていこう

実際の使い方を見ておきましょう。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <a href="https://www.sejuku.net">aタグデモ</a>
    </body>
</html>

このように、aタグの属性として利用してやって、””の中にリンク先を指定します。

クリックすると、

きちんとリンクとして動作していますね。

相対パスと絶対パスを理解しよう

先程、””の中にリンク先を指定すると書きましたが、リンク先の指定の仕方には相対パスと絶対パスの2種類があります。

一つずつみていきましょう。

相対パスとは

相対パスとは、現在の位置から見て遷移先がどこにあるかを示します。

例えば、以下のようなファイル構成があったとしましょう。

.
├── a.html
└── index.html

この場合、index.htmlの中身のaタグからa.htmlを表示させたいときは、

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <p>index.htmlです</p>
        <a href="./a.html">a.htmlへ</a>
    </body>
</html>

このように、””の中にa.htmlまでのパスを書いてやれば良いです。

因みに現在では、カレントを示す”./“が書かれていますがHTMLでは省略可能です

クリックすると、

きちんとできていますね。

また、違う階層にある場合も見ておきましょう。

.
├── index.html
└── src
    └── a.html

例えばこのように、srcフォルダの中にあるa.htmlを指定してみましょう。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <p>index.htmlです</p>
        <a href="src/a.html">a.htmlへ</a>
    </body>
</html>

このように指定してやると、

クリックすると、

うまく動作していますね。

絶対パスとは

相対パスが現在の位置から見たものに対し、絶対パスは現在の位置に関係なく一番頭からリンクまでのパスを示します。

つまり、どの階層のファイルで書いても記述の内容は変わりません。

例えばa.htmlの絶対パスをみてみると、

/Users/kai/Desktop/test/a.html

このようになっているので、

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <p>index.htmlです</p>
        <a href="/Users/kai/Desktop/test/a.html">a.htmlへ</a>
    </body>
</html>

このようにしてやると、うまく遷移します。

今は、ファイルの相対パスや絶対パスを例に取ってみましたが、URL等の場合でも同じことが言えます。

とにかく、絶対パスは最上階から、相対パスは現在位置からということが重要なので覚えておくようにしましょう。

“#”の意味を理解しよう

それでは、実際の現場でよくhref属性の””の中に#が入っているのをみかけます。

これは、ページのロードを表します。

つまり、

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <p>index.htmlです</p>
        <a href="#">ロード</a>
    </body>
</html>

このように書いてやり、

ロードボタンを押すと、ページがリロードされます。

実際の意味はページのリロードですが、開発の現場ではaタグを使うことは決まっているけど、具体的なリンク先が決まってないときにとりあえず入れておくという使い方をすることもあるので、覚えておきましょう。

href属性と併用して使える属性を見ていこう！

さて、href属性についてみてきましたが、aタグにはhref属性の他にも様々な属性があり、href属性として併用することでオプション的な動作をすることができます。

target属性とは

まず代表的なものはtarget属性です。

これは、リンク先をどのようなウィンドウで表示するかということを指定できます。

代表的な_blankでは、新規ウィンドウに表示することができます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <p>index.htmlです</p>
        <a href="#" target="_blank">新規ウィンドウで表示</a>
    </body>
</html>

このようにかいてやると、

新規ウィンドウにてリロードされました。

target属性には他にもフレームを使用している場合、親フレームに表示する_parentや、フレーム分割を解除してウィンドウ全体に表示する_topなどがあります。

あまり使う機会はありませんが、気になる方は試してみると良いでしょう。

download属性とは

他にもhrefと併用して使う属性には、download属性があります。

download属性は名前の通り、DLするための属性です。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <p>index.htmlです</p>
        <a href="sample.png" download="sample_dl.png">画像ダウンロード</a>
    </body>
</html>