目次
本記事では、HTMLでhref属性を指定することができる要素一覧をご紹介しています。
href属性ってどんな要素にも指定できるの？
上記の疑問にお答えします。
では、解説していきます。
スポンサーリンク
href属性を指定することができる要素一覧
href属性は、下記の要素に指定することができます。
| 要素名 | 説明 |
|---|---|
| <a> | 別のページへのリンクを設定することができる |
| <area> | <map>内にクリックすることができる領域を設定することができる |
| <base> | <head>内でドキュメントで使用するベースURLを指定することができる |
| <link> | 外部リソースを読み込むことができる（大体はスタイルシートの読み込みに使用） |
どんな要素にも指定することができるグローバル属性とは異なり、指定することができる要素に制限がありますのでご注意ください。
href属性とは
href属性はハイパーリンクで移動する先のURLを指定する属性です。href属性の値にはだけではなくブラウズが対応している全を指定することができます。
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属性を指定することができる要素一覧のご紹介でした！
