【HTML初心者】属性と要素をわかりやすくまとめてみた | らい氏のブックマーク

らい氏のブックマーク

気になったことを書いているブログです。

HTMLを勉強していると例えば<img>タグの場合


【例】

<img src="img/sample.png" alt="道(タオ)のブログ" width="200" height="200">

黄色部分要素名

赤色部分が属性名


【属性】

src属性
画像ファイルのURLを指定(必須属性)

alt属性
画像が利用できない環境向けのテキストを指定

width属性
属性イメージの幅を指定

height属性
イメージの高さを指定

他にも
<a>タグだとhref属性 target属性



𝐐. 属性ってなに?


属性とは


𝐀.  

HTML 属性リファレン

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

(各要素の細かい動きや働きを設定するための付属情報)


💬 属性には、どの要素にでも指定できるグローバル属性がある。


【HTML属性一覧】(属性名と要素)


ソース:MDN Web Doce


ざっと数えたら138個…今はまだ覚えなくて大丈夫、

HTMLを書いていれば自ずと覚えるから。


属性値


【例】】

<img src="img/sample.png" alt="道(タオ)のブログ" width="200" height="200">

青色属性値


alt属性画像やフォーム、Javaアプレットといった非テキスト要素を表示できないユーザーエージェント向けに、代替テキストを設定するための属性です。

属性値に非テキスト要素の代わりとなる文章を指定することで、代替テキストを設定することができます。



要素

(イメージ図)

HTML要素

要素は開始タグで始まり、終了タグで終わります。要素によっては終了タグを省略できるものもあります。

また、要素によっては開始タグと終了タグの間に他の要素や文字列を入れることができます。開始タグと終了タグの間に入れることができるものを 内容モデル と言います。

情報元:  HTMLの要素



タグ


タグには『開始タグ』と『閉じタグ』が必要な場合もあり、開始タグは『<body>』のように『<』と『>』で囲み、閉じタグはスラッシュをつけた『</』と『>』で囲みます。『</body>』等が該当しますね。閉じタグが必要ないタグの代表としてimgタグというものがあります。先ほどのHTMLソースにそれっぽいところがありますね。閉じタグの必要がない(内容をもたない)タグの事を『空要素タグ』といいます。


;(´◦ω◦`):要素とタグの違いが…解りにくい