HTMLの属性

HTMLの属性とは

HTMLの属性とは要素に対して情報を追加するオプションのようなものです。
属性には要素固有のものもあり数が多いので、ここでは使い方や種類などをまとめておきます。

HTMLの属性の使い方

属性は下記のように開始タグのタグ名の後に半角スペースを空けて 属性名=”属性値” の形式で設定します。

半角スペースで区切って複数の属性を設定することもできます。
ただし、属性の中には指定方法が決められているものもあります。

列挙型属性

あらかじめ決められた値の中から選択して属性値を指定する方式の属性のことを列挙型属性といいます。(例：dir属性)

論理型属性

属性名=”属性値” の形式ではなく、属性名だけで指定する方式の属性のこと論理型属性といいます。(例：hidden属性)

グローバル属性

HTMLの属性には各要素ごとに用意された属性と、すべての要素で使用できる属性があります。
すべての要素で使用できる属性のことをグローバル属性といいます。

ここではグローバル属性の中で使いそうなものと、列挙型と論理型の例となる属性についてまとめておきます。

class属性

class属性は要素の種類や分類をあらわす属性です。
空白文字で区切ると複数の値を指定することができます。

CSSのセレクタとしてよく使用します。

id属性

id属性は要素に対して固有の名前を付けるための要素です。
id属性を使用する場合には少し注意が必要になります。

<p id="id1">段落1</p>
<p id="id1">段落2</p>

<p id="id1 id2">段落1</p>

id属性はリンク先としても使用することができます。

<a href="test.html#jump">リンク</a>

このようにa要素のhref属性に#id属性の値というように指定すると、test.htmlの中のid属性に「jump」が指定されている要素に直接と移動させることができます。

また、id属性はclass属性と同様にCSSのセレクタとしてもよく使用します。

style属性

style属性は指定した要素に直接CSSを設定する属性です。
外部スタイルシートやstyle要素とは異なり、セレクタと { } は必要ありませんが、それ以外のCSS設定方法は同じです。

<p style="color: red; font-weight: bold;">段落</p>

lang属性

lang属性は要素内容と属性値の言語をあらわす属性です。
日本語の場合は「ja」を指定します。

html要素でlang属性を指定すれば、文書全体の言語を指定することができます。

title属性

title属性は要素に関する補足情報を指定するための属性です。
要素の上にカーソルを移動させるとツールチップとして表示されます。

dir属性

dir属性は文字の表示方向を指定するための属性です。

列挙型属性なので指定できる値が決められています。
「ltr(左から右)」、「rtl(右から左)」、「auto」のいずれかの値を指定します。

tabinex属性

tabindex属性はTABキーでのフォーカスの移動の順番を指定するための属性です。

属性値に整数を指定すると、TABキーを押したときに数字の小さい順にフォーカスが移動するようになります。
また、負の値を設定するとTABキーの移動対象から除外されます。

hidden属性

hidden属性は要素を表示しないようにするための属性です。
hidden属性が使用されている要素は、ページとは無関係になっていることをあらわします。

論理型属性なので属性値の指定は必要なく、属性名だけで使用することができます。

<p hidden>hidden属性を使うと要素が表示されなくなります。</p>

HTMLの属性のまとめ

この記事ではHTMLの属性についてまとめました。
class属性やid属性はCSSにも絡んでくるので、しっかりと理解しておくことが必要です。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。