こんにちは、Ryohei（@ityryohei）です！

本記事では、HTMLでhref属性を指定することができる要素一覧をご紹介しています。

href属性ってどんな要素にも指定できるの？

上記の疑問にお答えします。

では、解説していきます。

href属性を指定することができる要素一覧

href属性は、下記の要素に指定することができます。

要素名説明
<a>別のページへのリンクを設定することができる
<area><map>内にクリックすることができる領域を設定することができる
<base><head>内でドキュメントで使用するベースURLを指定することができる
<link>外部リソースを読み込むことができる（大体はスタイルシートの読み込みに使用）

どんな要素にも指定することができるグローバル属性とは異なり、指定することができる要素に制限がありますのでご注意ください。

参考：https://www.w3schools.com/tags/att_href.asp

href属性とは

href属性はハイパーリンクで移動する先のURLを指定する属性です。href属性の値にはHTTPだけではなくブラウズが対応している全プロトコルを指定することができます。

href属性は下記のように指定します。

<a href="https://into-the-program.com/">トップページへ</a>

上記の例ではa要素で別ページへのリンクを作成しています。リンク文字列のトップページへをクリックすると、href属性の値に指定しているURLに移動します。

ちなみに<base>では下記のように使用します。

<!DOCTYPE html>
<html>
<head>
    <base href="https://into-the-program.com/">
</head>
<body>
    <a href="category/html/">Category HTML</a>
</body>
</html>

上記の例では、ドキュメント全体のベースとなるURLを指定しています。階層等の影響を受けずにベースとなるURLを持つことができるため、階層構造が複雑なサイトを制作する際に役に立つ要素です。

最後に

本記事を書くことになった理由は、業務中に発せられた同僚からの質問でした。

同僚「href属性ってどんな要素にでも使えるんだっけ？」

私「URLを指定するものだし全属性は無理なんじゃない？」

私としては気にしたこともない内容でした。href属性は普段は<a>もしくは<link＞でしか使わないため、他の要素に使えるかどうか気にしたこともありません。でも言われてみれば気になるもので、業務が終わった後に調査したところ、やはり指定できる要素には限りがあることがわかりました。

同僚も調べたでしょうから同じ質問を受けることはないと思いますが、次は自信を持って答えられるようにしておきたいと思います。いつまで経っても日々勉強ですね。

以上、HTMLでhref属性を指定することができる要素一覧のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら