【HTML】属性 - 要素の設定項目

HTMLの属性について解説します。

属性

属性は“要素の設定”です。

要素にIDやクラス、その他動作に関する値を設定する際に使用します。

基本構文

属性は開始タグのタグ名の後に半角スペースを入れ、属性名="属性値"の形式で記述します。

<タグ 属性名="属性値"></タグ>

また、属性名のみの記述も可能で、その場合はイコール（=）以降は不要です。

<タグ 属性名></タグ>

特定の属性

属性名や属性値は任意に設定できますが、特定の属性名や属性値はWebブラウザの動作に影響します。

例えば、hidden属性などです。

この属性を設定した要素はWebブラウザで非表示になります。

<h1 hidden>HTML</h1>
<p>
    HTMLはマークアップ言語の１つで、正式名称は『HyperText Markup Language』です。
    主に“Webページの構成言語の１つ”として使用します。
</p>

このようにWebブラウザ上で動作に影響する属性が他にもあり、Webブラウザの種類（ChromeやSafari、Microsft Edgeなど）によって異なる場合があるので開発対象のブラウザで確認が必要です。

種類

Webブラウザの動作に影響する属性には『全てのタグに共通する属性』と『特定のタグのみの属性』があります。

前者を一般的にグローバル属性と呼び、代表的なモノは次の３つです。

id

id属性は要素にIDです。

<h1 id="main-title">HTML</h1>

Webブラウザの表示において、id属性に有無で変化はありませんが、装飾（CSS）やプログラム（Javascript）などで識別子として頻繁に使用します。

class

class属性は要素のクラスです。

<h1 class="title large blue">HTML</h1>

id属性と異なり、半角スペースで区切って複数値を設定できます。

こちらもWebブラウザの表示において、変化はありませんが、装飾（CSS）やプログラム（Javascript）などで識別子として頻繁に使用します。

hidden

hidden属性は要素の表示可否です。

<h1 hidden>HTML</h1>

前述と重なりますが、この属性を付与した要素はWebブラウザで非表示になります。

活用

属性はWebブラウザでの動作制御、要素の装飾（CSS）やプログラム（Javascript）で制御するための識別子を設定したりなど様々な場面で活用します。

他の開発技術と関連する属性が多数ありますので、初めから全て覚えようとせず、必要に応じて習得する方が学習効率が良いと考えられます。