HTML 属性

Volardev 編集部 April 12, 2026

HTML属性は、HTML要素に関する追加情報を提供します。

1. HTML属性の基本ルール

すべてのHTML要素は属性（Attributes）を持つことができます。属性は、要素の挙動や見た目を制御するための情報を付加する役割を担います。

すべてのHTML要素は属性を持つことができます。
属性は要素に追加情報を提供します。
属性は常に開始タグの中に記述します。
属性は通常、名前="値"（例：name="value"）のようなペアで記述します。

2. href 属性

<a> タグはハイパーリンクを定義します。href 属性は、リンク先のページのURLを指定するために使用されます。

<a href="https://www.volardev.com">Volardevを訪れる</a>

3. src 属性

<img> タグは、HTMLページに画像を埋め込むために使用されます。src 属性は、表示する画像へのパスを指定します。

<img src="img_girl.jpg">

src 属性で指定するパスには、2つの種類があります。

3.1 絶対URL (Absolute URL)

外部のウェブサイトでホストされている画像へのリンクです（例：src="https://www.google.com/images/img_girl.jpg"）。

注意： 外部画像は著作権の対象である可能性があり、許可なく使用すると著作権法に抵触する恐れがあります。また、外部画像の所有者が画像を削除したり変更したりすると、サイト上でも表示されなくなります。

3.2 相対URL (Relative URL)

ウェブサイト内にある画像へのリンクです。ここではドメイン名は含まれません。
URLがスラッシュなしで始まる場合は、現在のページと同じディレクトリにあるファイルを指します（例：src="img_girl.jpg"）。
URLがスラッシュで始まる場合は、ドメインのルートにあるファイルを指します（例：src="/images/img_girl.jpg"）。

ヒント： 自分のサイト内の画像を表示する場合は、常に相対URLを使用するのがベストプラクティスです。ドメインを変更してもリンクが壊れる心配がありません。

4. width と height 属性

<img> タグには、画像の幅と高さをピクセル単位で指定する width 属性と height 属性を含める必要があります。

<img src="img_girl.jpg" width="500" height="600">

5. alt 属性

<img> タグに必須の alt 属性は、画像が表示できない場合（通信速度が遅い、src 属性のエラー、スクリーンリーダーの使用など）に、画像の代わりに表示されるテキストを指定します。

<img src="img_girl.jpg" alt="麦わら帽子をかぶった女の子">

6. style 属性

style 属性は、要素にインラインスタイル（色、フォント、サイズなど）を適用するために使用されます。

<p style="color:red;">これは赤い段落です。</p>

7. lang 属性

HTMLドキュメントの言語を宣言するために、常に <html> タグ内に lang 属性を含める必要があります。これは、検索エンジンやブラウザにウェブページの言語を伝える役割があります。

以下の例では、英語を言語として指定しています。

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

国コードも lang 属性に追加できます。最初の2文字は言語（ja）を、後の2文字は国（JP）を表します。

<!DOCTYPE html>
<html lang="ja-JP">
<body>
...
</body>
</html>

8. title 属性

title 属性は、要素に関する追加情報（ツールチップ）を定義します。要素の上にマウスを置くと、属性値がツールチップとして表示されます。

<p title="私はツールチップです">ここにマウスを置いてみてください。</p>

9. 推奨事項：小文字の使用

HTML標準では属性名に大文字を使用しても問題ありません（href でも HREF でも可）。しかし、W3CおよびモダンなWeb開発では属性名を小文字で書くことが強く推奨されています。また、XHTMLのような厳格な規格では小文字が必須となります。

10. 推奨事項：属性値を引用符で囲む

HTML標準では、属性値を必ずしも引用符で囲む必要はありません。

<a href=https://www.volardev.com/>

しかし、W3Cは属性値を引用符で囲むことを推奨しており、XHTMLのような厳格なドキュメントタイプでは必須です。また、値にスペースが含まれる場合は、引用符が絶対に必要です。

<p title=About volardev>
<p title="About volardev">

10.1 シングルクォートかダブルクォートか

HTMLではダブルクォート（"）が最も一般的ですが、シングルクォート（'）を使用することもできます。
属性値自体にダブルクォートが含まれる場合は、シングルクォートで囲む必要があります。その逆も同様です。

<p title='John "Shotgun" Nelson'>
<p title="John 'Shotgun' Nelson">

11. まとめ

以下は、今回学習した主な属性のまとめです。

属性名	説明
`href`	リンクのURLを指定します
`src`	表示する画像のパスを指定します
`width`	画像の幅（ピクセル）を指定します
`height`	画像の高さ（ピクセル）を指定します
`alt`	画像の代替テキストを指定します
`style`	要素にインラインスタイルを適用します
`lang`	ウェブページの言語を指定します
`title`	要素に関する追加情報をツールチップとして指定します