要素と属性

html

HTML文書は「タグ」で文章を囲うことによってコンピュータに文章の役割を示します。 タグで役割を示された箇所を「要素」、タグの性質の事を「属性」といいます。

要素とは

HTMLは文章を開始タグと終了タグで囲うことにより、コンピュータに文章の役割を示します。 例えば大見出しであればh1タグで囲い、通常の文章であればpタグで囲います。 タグで役割を示された箇所を要素(element)といいます。見出しを示す<h1>タグをマークアップした場合、このようになります。

tag

また改行などの一部要素には内容を持たないものがあり、これを「空要素」といいます。 例えば改行を示す<br>タグをマークアップした場合、このようになります。

tag

要素のマークアップ

内容を開始タグと終了タグで囲うことによりマークアップします。
開始タグは要素名を「<」「>」で、終了タグは要素名を「</」「>」で囲います。
特定条件下で終了タグを省略できる要素もありますが、省略はお勧めしません。

<要素名>内容</要素名>

空要素のマークアップ

空要素は開始タグのみ記述します。要素が線と線を結ぶ区間なのに対し、空要素は点で示すポイントと考えてください。

<空要素名>

属性とは

同じ要素でも違った内容で表示する事ができます。 例えば文字要素であれば、同じ文字でも色や大きさを変えることができます。 それを実現するのが属性です。

属性のマークアップ

属性は開始タグの要素名から半角スペース開けて指定します。 属性値は引用符(‘‘または””)で囲って記述します。 複数の属性を指定するも可能で、その場合はまた半角スペース開けて記述します。
複数の属性値を許容する属性の場合、引用符の中に属性値を半角スペース開けて記述します。 同じ属性名を複数回記述するのは間違いなので気をつけましょう。

<!--空要素imgに属性srcを指定する-->
<img src="hogehoge1.jpg">

<!--空要素imgに属性src、width、heightを指定する-->
<img src="hogehoge2.jpg" width="100px" height="50px">

<!--空要素imgにlargeクラスとborderクラスを指定する-->
<img src="hogehoge3.jpg" class="large border">

※引用符が不要なパターンもありますが、常に囲っておいたほうが分かりやすく間違いがありません

テキストであればfont要素の属性値を指定して文字の色や大きさなどを変える事ができます。 このように同じ要素でも属性が違えば、表示も違ってくるのです。

<p>黒文字</p>
<p style="color:red">赤文字</p>
char

アマルウェブ HOME