HTML属性とは？基本から使い方までステップバイステップで解説

HTML属性は、HTML要素に追加のプロパティ（性質）を定義するためのものです。属性はHTML要素の開始タグ内に記述され、要素によっては機能するために属性が必須となる場合もあります。

---

HTML属性とは何か、そしてどのように使うのか。HTMLを学び始めると、属性（attributes）という用語に出会うことがあります。属性は、HTMLページ上の特定の要素について追加情報を提供するために使われます。

属性はHTMLの開始タグ内に記述され、通常は「名前/値」のペアで指定します。たとえば、nameという属性にvalueという値を設定する場合は、name=valueのように記述します。

この記事では、具体的な例を交えながら、HTMLにおける属性の基本と、なぜ属性が使われるのかを解説します。さらに、ほとんどのHTML要素に適用できる汎用的な属性（グローバル属性）のうち、コーディング中によく出会うものについても紹介します。

HTML属性とは？

HTMLマークアップ言語のすべての要素には属性を持たせることができ、属性はその要素が持つ追加のプロパティを定義するために使われます。

たとえば、画像の高さを指定する属性や、フォーム要素に保存される値を定義する属性などが必要になることがあります。これらの属性は要素固有のものであり、Webページ上で特定の要素がどのように動作するかをカスタマイズするために活用できます。

場合によっては、属性が必須となることもあります。たとえば、<a>タグを使う場合、クリックされたときにどのURLへ移動するかをタグに伝えるために、href属性を定義する必要があります。

HTMLの属性は次の2つの要素で構成されます。

• 名前（name）：作成する属性の名前を定義します。
• 値（value）：属性が保持する値を定義します。

たとえば、Career Karmaのホームページへのリンクを定義したいとします。その場合、HTMLの<a>タグを使います。しかし、タグをCareer Karmaのホームページにリンクさせるには、href属性も併せて使う必要があります。

Career Karmaのホームページにリンクする<a>タグの例は次のとおりです。

<a href="https://careerkarma.com/">Career Karma</a>

このタグでは、hrefという属性を使い、その値としてCareer KarmaホームページのURLである「https://careerkarma.com/」を設定しています。

HTMLの属性は大文字・小文字を区別しませんが、通常は小文字で記述するのが一般的です。

HTMLにおけるシングルクォートとダブルクォートの使い分け

属性に値を代入する際は、シングルクォートとダブルクォートのどちらも使えます。ダブルクォートを使うのが最も一般的な方法です（先ほどの例でもダブルクォートを使用しました）。ただし、どちらを使うかは属性の内容によって異なります。

たとえば、値がJohn 'Rocketman' Smithであるフォーム要素を作成するとします。この場合、値にシングルクォートが含まれているため、属性値はダブルクォートで囲むべきです。この属性を宣言するコードは次のとおりです。

<input type="text" value="John 'Rocketman' Smith">

逆に、値にダブルクォートが含まれていて、John "Rocketman" Smithである場合は、属性をシングルクォートで定義します。そのコードは次のとおりです。

<input type="text" value='John "Rocketman" Smith'>

HTMLのブール型属性の使い方

一部の属性は「名前/値」のペア構造を使用しません。これらはブール型属性と呼ばれます。ブール型属性は真偽値（true/false）のみを持ち、指定されていればtrue、指定されていなければfalseとなります。

ブール型属性は、HTMLフォームでよく使われます。たとえば、ユーザーの名前を入力してもらうフォームフィールドを作成し、このフィールドをデフォルトで必須にしたいとします。この場合、requiredブール型属性を使えば実現できます。

<input type="text" value="Name" required>

この例では、3つの属性を持つinputタグを定義しています。最初の2つの属性であるtypeとvalueは「名前/値」構造を使用しています。3つ目の属性であるrequiredはブール型属性です。requiredブール型属性を指定しているため、その値はtrueに設定されます。

HTMLの標準属性（グローバル属性）の使い方

HTMLのすべての要素に適用できる属性がいくつかあります。これらはグローバル属性と呼ばれます。

これらの属性はWebページ全体でよく目にするため、それぞれが何であり、どのように機能するのかを理解しておくことが重要です。ここでは、要素に適用される最も一般的な標準HTML属性を4つ紹介します。

HTMLのid属性

id属性は、要素に一意の識別子を与えます。id属性自体はHTML要素の見た目に影響を与えませんが、CSSやJavaScriptを扱う際に、特定の要素を選択して操作できるようにします。

要素に割り当てるidは、ドキュメント内で一意である必要があります。

<p>タグでid属性を使用した例は次のとおりです。

<p id="secondParagraph">こんにちは！私のサイトへようこそ。</p>

この例では、<p>タグにsecondParagraphという値を持つid属性を割り当てています。

HTMLのtitle属性

HTMLのtitle属性は、要素やその内容を説明するためによく使われます。title属性に保存された値は、ユーザーがカーソルを要素の上に置いたときに表示されるツールチップとして表示されます。

たとえば、ユーザーの名前を入力する入力フィールドがあり、ユーザーがフィールドにカーソルを合わせたときに「この項目は必須です」と表示したいとします。この目標は次のコードで実現できます。

<input type="text" title="この項目は必須です">

テキストフィールドにカーソルを合わせると、次のようなツールチップが表示されます。

HTMLのstyle属性

HTMLのstyle属性は、特定の要素にCSSスタイルを指定するために使われます。このような要素へのスタイル適用方法は、インラインスタイルと呼ばれます。

たとえば、グレーで表示したいテキストの段落を作成するとします。style属性を使えばテキストの色を指定できます。そのコードは次のとおりです。

<p style="color: gray;">こんにちは！これは私のウェブサイトです。</p>

このコードの出力結果は次のとおりです。

ご覧のとおり、テキストの色がグレーに変わっています。これは、style属性を指定し、colorスタイルをgrayに変更したためです。

要素固有のHTML属性

要素固有の属性には、さまざまな種類があります。ここでは、代表的な例をいくつか紹介します。

img src

<img src="source.png">

この例では、src属性を指定しています。この属性はimgタグとともに使用され、Webページ上に表示する画像ファイルを指定します。

a href

<a href="https://careerkarma.com/">Career Karmaのホームページ</a>

この例では、href属性を使用して、リンクがクリックされたときに<a>タグがユーザーをどのサイトへ誘導するかを指定しています。

img alt

<img src="source.png" alt="本の画像">

このコードでは、alt属性を指定しています。この属性はimgタグ固有のもので、画像が表示できない場合にWebページが代わりに表示する代替テキストを指定します。

HTMLのalt属性はスクリーンリーダーで読み上げることができるため、スクリーンリーダーに依存している視覚障害のある方でも、Webページの内容を理解できます。アクセシビリティの観点からも、alt属性の設定は重要です。

まとめ：HTML属性の使い方

属性とは、HTMLの特定の要素に適用される追加のプロパティです。属性は常に要素の開始タグ内に記述され、通常は「名前/値」のペアを使用します。

この記事では、具体的な例を交えながら、HTMLにおける属性の基本、ブール型属性、いくつかの標準HTML属性（グローバル属性）、そして要素固有の属性について解説しました。これで、HTMLで属性を使う方法をしっかりと理解できたはずです。ぜひ実際のコーディングで活用してみてください。