【HTML】属性とは

HTMLのタグには属性（Attribute）という設定を付けることができます。
ここでは属性についてご紹介します。

属性

属性はタグに設定を行うものです。

基本構文

設定するには、開始タグのタグ名の後に半角スペースを入れ、属性名="値"のように記述します。

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

属性名のみを記述することも可能です。
その場合はイコール（=）以降は記述しません。

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

属性名は自由に決めることができます。

一般的な属性

前述で属性名は自由に決めることができると述べましたが、ブラウザ上で動作に影響する属性名があります。

例えばhidden属性などです。
hidden属性を設定すると、そのタグはブラウザで非表示になります。

<h1 hidden>
    HTMLとは
</h1>
<p>
    HTMLの正式名称はHyperText Markup Languageです。
    コンピュータ言語の１つで、マークアップ言語という分類に属します。
</p>

このようにブラウザ上で意味を持つ属性が他にも多数あります。
ただし、ブラウザ（ChromeやSafari、Microsft Edgeなど）によって異なる場合があるので開発対象のブラウザで確認が必要です。

分類

ブラウザ上で意味を持つ属性は２つの分類に分けることができます。

• 全てのタグに共通して意味を持つグローバル属性
• 特定のタグにのみ意味を持つ属性

例

グローバル属性を３つご紹介します。

id

id属性はタグにIDを設定できます。

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

ブラウザ上で変化はありませんが、装飾（CSS）やプログラム（Javascript）などで識別子として頻繁に使われます。

class

class属性はタグにクラスを設定できます。
id属性とは異なり、複数設定でき、その場合は半角スペースで区切って記述します。

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

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

hidden

hidden属性は付与したタグをブラウザで非表示にします。

<h1 hidden>HTMLとは</h1>

活用方法

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

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

まとめ

属性はタグに設定を行うものです。
属性名は自由に決めることができ、さらにブラウザ上で意味を持つ属性などがあります。
広い活用方法があるので、習得していきましょう。