HTML属性
HTML属性は、HTML要素に関する追加情報を提供します。
HTML属性
- すべてのHTML要素は属性を持つことができます
- 属性は、要素に関する追加情報を提供します
- 属性は常に開始タグで指定されます
- 属性は通常、次のような名前と値のペアで提供されます：name = "value"
href属性
タグは<a>ハイパーリンクを定義します。この
href属性は、リンク先のページのURLを指定します。
例
<a href="https://www.w3schools.com">Visit W3Schools</a>
リンクの詳細については、 HTMLリンクの章をご覧ください。
src属性
タグは、<img>HTMLページに画像を埋め込むために使用されます。このsrc属性は、表示される画像へのパスを指定します。
例
<img src="img_girl.jpg">
src
属性でURLを指定する方法は2つあります。
1.絶対URL-別のWebサイトでホストされている外部画像へのリンク。例：src = "https://www.w3schools.com/images/img_girl.jpg"。
注：外部画像は著作権で保護されている可能性があります。使用許可を得ていない場合は、著作権法に違反している可能性があります。さらに、外部画像を制御することはできません。突然削除または変更される可能性があります。
2.相対URL -Webサイト内でホストされている画像へのリンク。ここでは、URLにドメイン名は含まれていません。URLがスラッシュなしで始まる場合、それは現在のページに相対的です。例：src = "img_girl.jpg"。URLがスラッシュで始まる場合、それはドメインに相対的です。例：src = "/ images /img_girl.jpg"。
ヒント：ほとんどの場合、相対URLを使用するのが最適です。ドメインを変更しても壊れません。
幅と高さの属性
タグには、画像の幅と高さ（ピクセル単位）を指定するand属性<img>も含める必要があります
。width
height
例
<img src="img_girl.jpg" width="500" height="600">
alt属性
タグの必須alt属性は、<img>
何らかの理由で画像を表示できない場合に、画像の代替テキストを指定します。これは、接続が遅いか、src属性のエラーが原因であるか、ユーザーがスクリーンリーダーを使用していることが原因である可能性があります。
例
<img src="img_girl.jpg" alt="Girl
with a jacket">
例
存在しない画像を表示しようとするとどうなるかを見てみましょう。
<img src="img_typo.jpg" alt="Girl
with a jacket">
画像の詳細については、 HTML画像の章をご覧ください。
スタイル属性
このstyle属性は、色、フォント、サイズなどのスタイルを要素に追加するために使用されます。
例
<p style="color:red;">This is a red paragraph.</p>
スタイルについて詳しくは、 HTMLスタイルの章をご覧ください。
lang属性
Webページの言語を宣言するには、常にタグlang内に属性を含める必要があります。<html>これは、検索エンジンとブラウザを支援することを目的としています。
次の例では、言語として英語を指定しています。
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
lang
属性の言語コードに国コードを追加することもできます。したがって、最初の2文字はHTMLページの言語を定義し、最後の2文字は国を定義します。
次の例では、言語として英語を指定し、国として米国を指定しています。
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
すべての言語コードは、 HTML言語コードリファレンスで確認できます。
タイトル属性
このtitle属性は、要素に関するいくつかの追加情報を定義します。
要素の上にマウスを置くと、title属性の値がツールチップとして表示されます。
例
<p title="I'm a tooltip">This is a paragraph.</p>
提案：常に小文字の属性を使用する
HTML標準では、小文字の属性名は必要ありません。
title属性（および他のすべての属性）は、titleやTITLEのように大文字または小文字で書くことができます。
ただし、W3CはHTMLで小文字の属性を推奨し、 XHTMLなどのより厳密なドキュメントタイプには小文字の属性を要求します。
W3Schoolsでは、常に小文字の属性名を使用します。
提案：常に属性値を引用する
HTML標準では、属性値を引用符で囲む必要はありません。
ただし、W3CはHTMLでの引用を推奨し、 XHTMLなどのより厳密なドキュメントタイプの引用を要求します。
良い：
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>悪い：
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>引用符を使用する必要がある場合があります。この例では、スペースが含まれているため、title属性が正しく表示されません。
例
<p
title=About W3Schools>
W3Schoolsでは、常に属性値を引用符で囲んでいます。
一重引用符または二重引用符？
HTMLでは、属性値を二重引用符で囲むのが最も一般的ですが、一重引用符も使用できます。
状況によっては、属性値自体に二重引用符が含まれている場合、一重引用符を使用する必要があります。
<p title='John "ShotGun" Nelson'>
またはその逆：
<p title="John 'ShotGun' Nelson">
章のまとめ
- すべてのHTML要素は属性を持つことができます
- の
href属性は<a>、リンク先のページのURLを指定します - の
src属性は<img>、表示される画像へのパスを指定します widthおよびのheight属性は<img>、画像のサイズ情報を提供します- の
alt属性は<img>、画像の代替テキストを提供します - この
style属性は、色、フォント、サイズなどのスタイルを要素に追加するために使用されます - タグの
lang属性は<html>、Webページの言語を宣言します - 属性は、要素に関するいくつかの
title追加情報を定義します
HTML演習
HTML属性リファレンス
各HTML要素のすべての属性の完全なリストは、 HTML属性リファレンスにリストされています。