一歩ずつ学ぶ

最終更新日:

HTML5準備編: 属性、属性名、属性値等の用語を整理する

前のページでは要素、タグ、要素名、要素内容といった用語の整理をしました。 見ていない方はぜひ一度読んでみてください。
HTML5準備編: 要素、タグ、要素名等の用語を整理する

このページでは、属性、属性名、属性値といった用語を整理していきます。

属性とは

属性とは、一言でいうと「要素の詳細情報」です。 要素の性質や役割等の詳細情報を示します。

今回もh1要素を例として説明していきます。

<h1 id="headline">これは見出しです</h1>

この場合、id="headline" の部分が属性となります。 具体的には左側の部分から名前をとってid属性と言います。

属性

属性名、属性値

<h1 id="headline">これは見出しです</h1>

=(等号)を境として左側が属性名、右側が属性値です。属性の名前と値を意味します。 属性値は単に"値"という表現を使う場合が多いです。 「属性名="属性値(値)"」と記述します。 属性値はシングルクォーテーションでも大丈夫ですが、 一般的にはダブルクォーテーションを使用します。

上の例でいうとidが属性名、headlineが属性値(値)です。

属性名・属性値

属性を複数指定する場合

属性を複数指定する場合、下記のように半角スペースで区切って記述します。 順番は問いません。

<textarea row="5" col="20">テキストボックス</textarea>

この場合は、行数(row)が5、幅(col)が20のテキストボックスが表示されます。

よく使用する汎用的な属性

使用頻度が高くて汎用的な属性として「id属性」と「class属性」があります。

id属性は、要素に対して名前をつける場合に使用します。 id="名前"という形で記述。 注意点としては、同じページの中で同じ名前を重複して使用することができない所です。 同じページの中では一意の名前を付けてください。 id属性は主にスタイルシートでの指定、リンク先としての指定等でよく使用します。

class属性は、要素に対してクラス名を付ける場合に使用します。 class="クラス名"という形で記述。 クラス名は同じページの中で重複して何度でも使えます。 スタイルシートでの指定でよく使用します。

これからHTML文書を作成していくにあたって、id属性とclass属性は良く使う属性です。 同じページ内において、id属性は重複不可、class属性は重複可能。 この違いを把握しておいてください。

↑ PAGE TOP