HTML 属性

❮ 前章へ 次章へ ❯

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

HTML 属性

言語属性

文書の言語は、<html> タグで宣言することができます。

言語は、lang 属性で宣言します。

言語を宣言することは、ユーザ補助アプリケーション（スクリーンリーダ）や検索エンジンには重要です：

例

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

先頭２文字は、言語 (en) を指定しています。方言が存在する場合は、更に2つ文字（US）を使用します。

title 属性

HTML の段落は、<p> タグで定義します。

この例では、<p> 要素は title 属性を持っています。 属性の値は、"About W3Schools" です：

例

<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

Try it Yourself ❯

要素の上にマウスを移動すると、タイトルがツールチップとして表示されます。

href 属性

HTML リンクは、<a> タグで定義されます。リンクのアドレスは、href 属性で指定します:

例

<a href="http://www.w3schools.com">This is a link</a>

Try it Yourself ❯

このチュートリアルの後段で、リンクと <a> タグについてより詳しく学習します。

サイズ属性

HTML 画像は、<img> タグで定義されます。

ソースのファイル名 (src) と画像のサイズ (width と height) は、全て 属性として指定します：

例

<img src="w3schools.jpg" width="104" height="142">

Try it Yourself ❯

画像のサイズはピクセルで指定します：width="104" は、104 スクリーンピクセル幅の意です。

このチュートリアルの後段で、画像と <img> タグについてより詳しく学習します。

alt 属性

alt 属性は、HTML 要素が表示出来ない場合に使用する代替テキストを指定します。

属性の値は「スクリーンリーダ」で読み取ることができます。このように、web ページを「聞いている」誰か（例えば視覚障害者）が、 要素を「聞く」ことができます。

例

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Try it Yourself ❯

私達の提案：常に小文字の属性を使用する

HTML5 標準は、小文字の属性名を要求していません。

title 属性は、Title や TITLE のように大文字または小文字で書くことができるます。

W3C は、HTML4 で小文字を推奨しており、また XHTML のような厳密な文書タイプには、 小文字の使用を要求しています。

W3Schools では、常に小文字の属性名を使うようにしています。

私達の提案：常に属性値は引用符で括る

HTML5 標準は、属性を引用符で括ることを要求していません。

上で示した href 属性は、次のようにも書くことができます：

例

<a href=http://www.w3schools.com>

Try it Yourself ❯

W3C は、HTML4 で引用符で括ることを推奨しており、また XHTML のような厳密な文書タイプには、 引用符で括ることを要求しています。

時には、引用符で括る必要があます。それは、スペースが含まれている場合で、引用符で括らないと正しく表示されません：

例

<p title=About W3Schools>

Try it Yourself ❯

引用符を使用することが最も一般的です。引用符を省略するとエラーが発生する場合があります。
W3Schools では、常に属性値の周りに引用符を使うようにしています。

シングルまたはダブルコーテーション？

HTML では、ダブルコーテーションが最も一般的ですが、シングルコーテーションも使用できます。

ある状況では、属性値自体にダブルコーテーションが含まれている場合がありますが、 この場合はシングルコーテーションを使用する必要があります：

例

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

またはその逆に

例

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

章のまとめ

練習問題を自分でテストしてください！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯  Exercise 5 ❯

HTML 属性

下は、HTML でよく使用される属性の一部のアルファベット順リストです：

属性 説明
alt 画像の代替テキストを指定する
disabled input 要素が無効であることを指定する
href リンクの URL (web アドレス) を指定する
id 要素のユニークな id を指定する
src 画像の URL (web アドレス) を指定する
style 要素のインライン CSS style を指定する
title 要素に関する特別な情報を指定する (ツールチップとして表示される)
value input 要素の値 (テキストコンテンツ) を指定する

HTML：各 HTML 要素に対するすべての属性の完全なリストは、HTML タグリファレンス に記載してています。


❮ 前章へ 次章へ ❯