属性はHTMLの要素に関する追加情報を提供します。
HTML 属性
- すべてのHTML要素は 属性を持つことができます
- 属性は要素に関する 追加情報 を提供します
- 属性は常に 開始タグで指定されます
- 属性は通常、名前と値のペアで次のようになります。: name=”value”
href属性
HTMLリンクは<a> タグで定義されます。. リンクアドレスは href 属性で指定されます。:
例文
<a href=”https://www.berry.com”>これはリンク</a>
このタグ <a> は後半で詳しく学びます
src 属性
HTML画像は <img> タグで定義されています。
画像ソースのファイル名は次のsrc 属性で指定されます。:
例文
<img src=”img_girl.jpg”>
幅と高さの属性
HTML画像には、画像の幅と高さを指定する属性width と height 属性もあります。:
例文
<img src=”img_girl.jpg” width=”500″ height=”600″>
幅と高さはデフォルトでピクセル単位で指定されます。したがって width=”500″ は 500 幅500ピクセルを意味します。
詳しく学ぶにはHTML 画像チャプターを参照することをお薦めします。
alt属性
alt 属性は画像を表示できない場合、代替テキストを指定します。
この値 alt スクリーンリーダーによって読み取ることができます。
このようにして、Webページを「聴いている」誰か、例えば視覚障害者は、その要素を “「聞く」” ことができます。
例文
<img src=”img_girl.jpg” alt=”Girl
with a jacket”>
この alt 属性は画像を表示できない場合（たとえば、存在しない場合）も、便利です。:
例文
存在しない画像を表示しようとするとどうなるか:
<img src=”img_typo.jpg” alt=”Girl
with a jacket”>
style属性
style 属性は、色、フォント、サイズなどのように、要素のスタイルを指定するために使用されます。
例文
<p style=”color:red”>This is a paragraph.</p>
このチュートリアルの後半および
CSS トライアルで、スタイリングの詳細について学べます 。
lang属性
HTML文書は <html> タグで宣言できます。
言語は lang で宣言されています。
言語を宣言することは、ユーザー補助アプリケーション（スクリーンリーダー）や検索エンジンにとって重要です。:
<!DOCTYPE html>
<html lang=”en-US”>
<body>
…
</body>
</html>
The first two letters specify the language (en). If there is a dialect, add two more letters (US).
title属性
ここでは title、 <p>要素に属性が追加されています。段落の上にマウスを移動すると、title属性の値がツールチップとして表示されます。:
例文
<p title=”I’m a tooltip”>
This is a paragraph.
</p>
おすすめ：小文字の属性を使う
HTML 5規格は小文字の属性名を必要としません。
title属性は、 title か TITLEように大文字または小文字で書くことができます。
W3CはHTMLでは小文字を 推奨 しており、 XHTMLのようなより厳密な文書タイプには小文字を 要求しています。
私は、常に小文字の属性名を使用します。
おすすめ：属性値の見積もり
HTML 5規格では、属性値を引用符で囲む必要はありません。
href 属性は”” で書くこと:
悪い
<a href=https://www.berry.com>
良い
<a href=”https://www.berry.com”>
W3Cは引用符（””）を付けることを 推奨 していて XHTMLのようなより厳密な文書タイプは引用符を 要求 しています。
たまに 必ず 引用符を使用する必要があります。この例では、title属性がスペースを含んでいるため、正しく表示されません。:
例文
<p title=About berry>
引用符を使用するのが最も一般的です。引用符を省略するとエラーが発生する可能性があります。
属性値は常に 引用符で囲みます。
一重引用符または二重引用符
属性値を囲む二重引用符はHTMLで最も一般的ですが、一重引用符も使用できます。
状況によっては、属性値自体に二重引用符が含まれている場合は、一重引用符を使用する必要があります。 :
<p title=’John “ShotGun” Nelson’>
もしくは:
<p title=”John ‘ShotGun’ Nelson”>
まとめ
- すべてのHTML要素は属性を持つことができます
- この
title属性は追加の “ツールチップ” 情報を指定します。 href属性は、リンクのアドレス情報を指定しますwidthとheightは、画像のサイズ情報を提供します。- この
alt属性はスクリーンリーダーにテキストを表示します - 常に小文字 の属性名を使うこと
- 常に引用符（クォート） で属性値を挟む
テスト エクササイズ演習
エクササイズ:
Add a tooltip to the paragraph below with the text "About berry". 演習を開始する-->