こんにちは、Ka-Chanです。
こちらの記事は、私のメモのようなものです。
HTMLを取得するにつれて学んだことを記事にしてまとめています。
参考になったらと思います。
下記のような手順で学んでいきました。
それでは、今回は「HTMLの属性」についてです！
HTMLの属性
HTML属性について
属性は、HTML要素に関する追加情報を提供するものです。
・すべてのHTML要素は属性を持つことができます
・属性は要素に関する追加情報を提供するものです。
・属性は、常に開始タグから始まります。
・属性は通常、name = “value”のように名前と値がペアです。
href属性について
HTMLリンクは<a>タグで表すことができます。それでそのリンクアドレスを指定するときに使われる属性はhref属性になります。
リンクと<a>タグの詳細については、後半で説明します。
src属性について
HTML画像は<img>タグを使うことで画像が表示されます。
その画像ソースのファイルを指定するためにsrc属性をを使用します。
See the Pen
vYNgZzR by Nakashima (@ka-chan)
on CodePen.
幅と高さの属性
HTML画像には、画像と幅の高さを指定するwidthとheight属性があります。
上記のソースを見てもらえばわかると思いますが、「width=”104″」と「height=”142″」があるのがわかると思います。それによって幅と高さを指定しています。
※width = 幅 height = 高さ
幅と高さはデフォルトでピクセル単位で指定されています。したがって、width=”104″は、幅が104ピクセルであることを意味しています。
alt属性
このalt属性は、画像を表示できない場合に使用する代替テキストを使用します。
alt属性の値はスクリーンリーダーで読み取ることができます。
See the Pen
bGVqwrb by Nakashima (@ka-chan)
on CodePen.
style属性
このalt属性は、細かくフォントの種類や色、サイズなど、要素のスタイルを指定するために使用することができます。
※style属性は、基本的にはCSSの入門記事でご紹介できたらと思います。
lang属性
ドキュメントの言語は<html>タグで宣言することができます。
言語はlang属性で宣言されます。
言語の言語は、ユーザーインターフェイスアプリケーションと検索エンジンにとって重要です。
See the Pen
qBOraYY by Nakashima (@ka-chan)
on CodePen.
上記のように<html>タグ内に書くことができます。
最初の2文字(en)は言語の英語を意味します。方言がある場合は、さらに2文字(US)の米国という意味を追加することができます。
title属性
ここではtitle、<p>要素に属性が追加されています。タイトル属性の値は、段落の上にマウスを置くとtitle内に書かれている文字が表示されます。
See the Pen
JjYWRav by Nakashima (@ka-chan)
on CodePen.
上記の内容はわかりましたでしょうか？
こちらは、何度もお話していますがまた、繰り返し言いますね！
HTML5では、大文字と小文字の区別はありません。どちらでもよいです。
しかし、推奨するならやはり小文字です。特に問題はでたことはないのですが小文字にしましょう！
それに、W3CではHTMLは小文字で！なぜならXHTMLのようなより厳密なドキュメントタイプでは小文字を要求されてしまうためです。
まとめ
・すべてのHTML要素は属性を持つことができます。
・属性には、追加の「ツールチップ」の情報を表示できます。
・属性には、リンクのアドレス情報を記載することができます。
・属性は、画像のサイズの変更ができます。
・属性は、スクリーンリーダーにテキストを表示させることができます。
・属性名などは常に小文字を使うこと。 それでは、こちらの記事はこれで終わりです。
次の記事はこちらです。
