この記事では、HTMLタグの属性について事例を交えながらわかりやすく解説します。
属性は、Webサイトを制作する上で必ず必要になる知識ですので、この記事で勉強して使えるようにしておきましょう！
属性とは
HTMLタグの属性（Attribute）は、タグに追加の情報を提供するためのものです。
いわゆるタグオプションのようなイメージです。
例えば属性を設定することによって、
・リンクのURL
・画像のファイルパス
・フォームの入力タイプ
など、さまざまな情報をタグに埋め込むことができます。
属性の書き方
属性は開始タグの中に記述し、基本的に以下のように記述します。
<tagname attribute="value">Content</tagname>ここで、tagnameはHTMLタグの名前、attributeは属性の名前、valueは属性の値を示します。 属性の名前の後ろに「=（イコール）」を書いて、値は「”（ダブルクォーテーション）」で囲むのが基本です。
複数の属性を持つことができ、それぞれの属性はスペースで区切られます。
<tagname attribute1="value1" attribute2="value2">Content</tagname>id属性とclass属性
数ある属性の中でもid属性とclass属性は非常によく使います。
どちらも要素に名前をつけるために使用されますが、細かな違いなどを勘違いしやすいので、確認していきましょう。
id属性
id属性はWeb制作において使用頻度の高い属性の一つです。
<div id="name"></div>id属性は、要素に名前（識別子）をつけるために使用されます。
id属性の値は、ひとつの要素にひとつだけ付与することができます。
また、同じウェブページ内で同じid名を複数使用することはできません。
idの値には空白やタブなどを含めることもできません。
また、数字から始まる値もつけることができません。
<!-- NGな例：同じid名を使用している -->
<div id="name"></div>
<div id="name"></div>
<!-- NGな例：数字から始まる値になっている -->
<div id="1name"></div>
<!-- NGな例：値を複数設定している -->
<div id="name2 name3"></div>
<!-- OKな例 -->
<div id="name4"></div>
<div id="name5"></div>class属性
class属性もid属性と同じく使用する頻度の高い属性です。
<div class="name"></div>class属性は、要素に名前をつけるために使用されます。
また、ひとつの要素に複数のclass名をつけることができ、idとは違い同じclass名を複数使用することができます。
<!-- NGな例：数字から始まる値になっている -->
<div class="123"></div>
<div class="1name"></div>
<!-- OKな例 -->
<div class="name2 name3 name4"></div>
<div class="name2 name4"></div>同じように要素に名前をつけるために使用されるidとclass属性、それぞれの特徴をわかりやすく表にしましたので確認しておきましょう。
| id | class | |
|---|---|---|
| 用途 | 名前をつける | 名前をつける |
| 持てる値の数 | 1 | 複数 |
| ページ内での値の重複 | 不可 | 可 |
特定のタグと一緒に使用する属性
属性はたくさん種類がありますが、どのタグでも使用できるものと、特定のタグでしか使用しないものがあります。
ここでは、特定のタグで使用する属性の一例を紹介します。
<a>タグ：href属性
<a href="<https://example.com">Visit Example</a>リンクのタグである<a>タグには、リンク先となるURLを指定する必要があります。
そのURLを指定するのがhref属性です。
<img>タグ：src属性とalt属性
<img src="image.jpg" alt="Example Image">画像を表示する<img>タグには、表示する画像のファイルパスを指定するsrc属性と、画像の代替テキストを設定するalt属性の2つの属性あります。
<input>タグ：type属性
<input type="text" />お問い合わせフォームや検索フォームで使用されるテキスト入力欄などのユーザーに入力や選択してもらう要素である<input>に、入力タイプを属性として指定することができます。
よく使う属性一覧
よく使われる属性をいくつか紹介します。
ここで紹介するのは、最低限知っておくべき属性です。（これ以外にたくさんあります）
丸暗記しなくても問題ないので、どのタグにどういう属性があるのかということをイメージしておけば大丈夫です。 実際にコーディングしていると自然と覚えます。
| 属性名 | タグ | 説名 | 例 |
|---|---|---|---|
| class | 全て | 要素に名前を付与 | <div class=”class-name”></div> |
| id | 全て | 要素に名前を付与 | <div id=”id-name”></div> |
| style | 全て | CSSを直接定義 | <p style=”color: red;”>赤字テキストです</p> |
| alt | img | 画像が表示できない時の代替テキストを指定 | <img src=”/assets/images/caffee.jpg” alt=”コーヒー”> |
| src | img | 画像のファイルパスを指定 | |
| colspan | td, th | テーブルのセルの列を結合する際の列数を指定 | <td colspan=”2”></td> |
| rowspan | td, th | テーブルのセルの行を結合する際の行数を指定 | <td rowspan=”2”></td> |
| href | a | リンク先のURLを指定 | <a href=”https://kakuzaki-web.com” >かくざきWebへ</a> |
| target | a | リンク先のページへ遷移した際のウィンドウの設定 | <a href=”https://kakuzaki-web.com” target=”_blank”>かくざきWebへ（別ウィンドウで開きます）</a> |
まとめ
本記事では、基本的な属性の書き方やよく使われる属性について説明しました。
属性は種類が多かったり、タグによって使える属性が限られていたりと複雑です。初めから全部丸暗記するのではなく、必要な時に適切な属性を正しく使えることが重要です。そのためには、属性の使い方や対応するタグなどを自分で調べるということが大切になります。
HTMLの属性について詳しく調べる時は、MDN Web Docsを参照することをお勧めします。
この記事のような要約記事も簡単に情報収集ができますが、常に最新の情報とは限りません。そういう時のためにも公式ドキュメントを見る癖をつけておきましょう。
コメント