HTML属性の使い方を徹底解説！href・target・カスタム属性の基本

よく使われる属性名とその値の実例を見ながら、HTML属性の基本的な使い方を学びましょう。

HTML属性とは？

HTMLにおける属性（attribute）とは、HTML要素に追加情報を持たせたり、デフォルトの動作を変更したりするための修飾ツールです。

属性が一切付いていないHTML要素は、次のようなシンプルな形をしています。

<tag>Content</tag>

一方、属性付きのHTML要素は、次のように定義します。

<tag attribute="value">Content</tag>

この基本モデルを頭に入れた上で、実際によく使われる属性の例を見ていきましょう。

href属性

href属性は、HTMLの中でも最も重要な属性のひとつです。

hrefは、主に以下のようなURLを指定するために使われます。

• ハイパーリンク（いわゆる「リンク」）
• スタイルやスクリプトなど、外部リソースの読み込み

hrefの最も一般的な用途は、アンカー要素<a>にリンク先URLを指定することです。

<a href="url-path">Link text</a>

このリンクのおかげで、ユーザーはクリックするだけでページからページへ移動できます。移動先は、同一サイト（ドメイン）内の内部リンクか、別サイトへの外部リンクのどちらかです。

内部リンク

内部リンクでは相対パスを使用します。

<a href="/">Home</a>

慣例として、"/"はどのサイトでもフロントページ（index.html）につながります。

たとえばAboutページがあり、対応するHTMLファイルがabout.htmlだとすると、次のように内部リンクを張れます。

<a href="/about">About</a>

外部リンク

一方、外部リンクには絶対パスが必要です。

<a href="https://www.youtube.com">Go to YouTube.com</a>

target属性

アンカー要素を扱っているので、もうひとつの重要な属性であるtarget属性も見てみましょう。

target属性は、ユーザーがリンクをクリックしたときに、どこでリンクを開くかを指定します。

たとえば、次のコードのリンクをクリックすると、今開いているのと同じブラウザタブ内でYouTube.comが表示されます。

<a href="https://www.youtube.com/">Go to YouTube.com</a>

これは、デフォルトで<a>要素のtarget属性の値が_selfに設定されているためです。_selfは「ユーザーが現在いるウィンドウと同じ場所でリンク先を開く」という意味を持ちます。

つまり、このリンク要素は——

<a href="https://www.youtube.com/"></a>

——ブラウザからは、次のように解釈されていることになります。

<a href="https://www.youtube.com/" target="_self"></a>

では、リンクを新しいタブで開きたい場合はどうすればよいでしょうか？

簡単です。デフォルトの_selfを_blankで上書きすればOKです。

<a href="https://www.youtube.com" target="_blank" rel="noopener">
  Go to YouTube.com (opens in a new tab)
</a>

これで、YouTubeへのリンクが新しいブラウザタブで開くようになります。セキュリティ対策として、rel="noopener"を併記しておくのもおすすめです。

値を持たない属性

通常、属性は「属性名＋属性値」のセットで構成されます（先ほどのアンカー要素の例のように）。

しかし中には、値（＝動作）があらかじめ属性名自体に組み込まれているものもあります。

代表例が、HTMLの<script>要素を制御するdefer属性です。

<script defer src="app.js"></script>

ご覧のとおり、deferには代入演算子（=）も値もありません。動作が組み込まれているためです。

deferはいわゆるブーリアン（boolean）属性と呼ばれるものです。ブーリアンとは、true / false（有効／無効）の2値しか取らないデータ型のことです。

defer属性の動作を詳しく確認してみましょう。

defer属性なしの<script>要素は、ブラウザが読み込んだ瞬間に、すぐにapp.jsのJavaScriptコードを実行します。

<script src="app.js"></script>

デフォルトでは、HTMLドキュメントは上から下へ1行ずつ解析（読み取り）されていきます。そのため、ドキュメントの上部にJavaScriptを置くと、残りのHTMLの解析が終わる前にスクリプトが実行されてしまうのです。

これが<script>要素のデフォルトの挙動です。

しかし、<script>要素にdeferを追加すると、このデフォルト動作が無効化されます。

<script defer src="app.js"></script>

こうすることで、JavaScriptコードはページ全体の読み込みが完了するまで実行されなくなります。

ちなみにdeferは英語で「延期する・後回しにする」という意味の単語です。動作そのものを表しているのが分かりやすいですね。

要点を整理すると、次のようになります。

• deferなし：JavaScriptは読み込まれた直後に実行される
• deferあり：JavaScriptはHTMLページ全体の読み込み完了を待ってから実行される

属性の概念がまだピンとこなくても大丈夫。実際に手を動かして使ってみれば、理解はぐっと深まりますよ。

カスタム属性

HTMLでは、独自のカスタム属性を作成し、JavaScriptから操作することもできます。カスタム属性名には必ずdata-という接頭辞を付ける必要があります。

<tag data-custom-attribute-name="value">Content</tag>

たとえば、「Apple」という食べ物を表す要素があるとしましょう。ユーザーがクリックしたときに、ポップアップダイアログでその食べ物の種類を表示したいとします。

そのために、food-typeというカスタム属性（data-接頭辞をお忘れなく）を作成し、Appleというテキストを含む<div>要素に追加してみましょう。

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

そして、この機能を動かすためのJavaScriptがこちらです。

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

HTMLコードの仕組み：

• まず、<div>要素にonclick属性を追加しました。これはイベント属性のひとつで、お察しのとおり「クリック」を検知するイベントリスナーを設定します。
• 次に、onclick属性の値としてshowDetailsBox(this)を指定しています。
• showDetailsBox()は、Appleのテキスト要素がクリックされた瞬間に呼び出されるJavaScript関数の名前です。
• (this)のthis部分は、その要素自身（属するオブジェクト）を指す引数です。初心者には少し難しく感じるかもしれませんが、今は完璧に理解しなくても大丈夫です。
• idは、HTML要素に一意の識別子を与えるための組み込み属性です。この例ではappleがIDに該当します。

JavaScript側の処理については、この記事はHTMLチュートリアルなので詳細は割愛し、簡潔に説明します。

onclickイベント属性によってshowDetailsBox()関数が呼び出されると、そのコードブロック{ ... }の中身が順番に実行されます。

1行目では、カスタム属性data-food-typeを持つHTML要素を取得し、その値をfoodTypeという変数に代入しています。

2行目では、組み込みのalert()メソッドを呼び出し、ポップアップダイアログにfoodTypeの値（この例ではfruit）を表示しています。

最初はコード全体を完全には理解できないかもしれませんが、練習を重ねれば必ず腹落ちします。焦らず少しずつ進んでいきましょう。

HTML属性についてさらに詳しく学びたい方は、MDN Web Docsの「HTML属性リファレンス」を読むことをおすすめします。

注意点：
画面に表示すべき重要なコンテンツをデータ属性（data-*）の中に入れてはいけません。スクリーンリーダーなどの支援技術がデータ属性にアクセスできないケースがあるほか、検索クローラーもデータ属性の値をインデックスしない場合があります。SEOに関わる重要な内容は、データ属性ではなく通常のHTML本文に記述しましょう。