HTMLの基礎学習、お疲れさまでした！

ここまでのレッスンでタグの使い方や基本的な構造についてしっかりと理解できたことでしょう。見出しタグや段落タグ、リンクや画像の挿入など、HTMLを使ってシンプルなWebページを作るための土台はすでに身に付いています。

しかし、HTMLをさらに自由自在に扱えるようになるためには、タグだけでなく「属性」についても深く理解することが重要です。

これまでの学習の中でも、hrefやsrcといった属性に触れてきましたが、実は属性はWebページをより便利で意味のあるものにするための大切な要素なのです。

今回のLessonではこの「属性」に特化して、基本的な仕組みから実践的な使い方までをわかりやすく解説していきます。

今後の学習や実際のコーディングで役立つ知識ばかりなので、ぜひ最後まで読んでみてください。

本記事では以下の５つの内容を解説します。

<<前のページ

HTML/CSSの記事一覧

次のページ>>

属性とは何か？

HTMLのタグは、Webページの構造を定義するために使われます。しかしタグだけでは十分な情報を表現できない場合があります。

そこで登場するのが「属性」です。

属性（attribute）はHTMLタグに「追加情報」を与えるためのもので、タグがどのように機能するかを詳しく指定する役割を持っています。

たとえば、リンクを作成するための<a>タグを考えてみましょう。単に<a>タグを書くだけでは、どこにリンクするのかはわかりません。

そこで、リンク先のURLを指定するためにhref属性を使います。

<a href="https://example.com">こちらをクリック！</a>

この例では、href="https://example.com" の部分が属性です。ここでのポイントは以下の通りです。

このように、属性は「名前」と「値」のセットで構成されています。属性名が何を指定するかを示し、属性値がその具体的な内容を定義します。

そして属性はリンク以外の場面でも活用されます。たとえば画像を表示する際にも、画像のファイルパスを指定するsrc属性や、画像が表示できないときの代替テキストを指定するalt属性などがあります。

<img src="photo.jpg" alt="美しい風景の写真">

この例でもsrcとaltが属性として使われています。

属性はHTMLの基本的な機能を強化し、Webページをより意味のあるものにするための重要な要素なのです。

属性の基本構造

属性はHTMLタグに追加情報を与えるための重要な要素です。ここでは、属性の書き方（基本構造）について詳しく解説します。

属性の基本的な書き方

属性はタグの開始タグ内に記述します。基本構造は以下の通りです。

<タグ名 属性名 = " 属性値 "> コンテンツ </タグ名>

• タグ名: 例えば a（リンク）や img（画像）などのHTMLタグ。
• 属性名: 追加したい情報の種類を示す名前。例：href, src, alt など。
• 属性値: 属性が持つ具体的な内容。ダブルクォーテーション " で囲むのが一般的です。

属性の書き方における注意点

• 属性名は小文字で書くのが推奨されます。（HTMLは大文字も許可しますが、一般的なコーディングルールとして小文字が標準です）
• 属性値はダブルクォーテーション " で囲むのが一般的。
• 複数の属性は、半角スペースで区切って記述します。

複数の属性を持つタグの例は以下の通り。

<a href="https://example.com" title="公式サイト">公式サイトへ</a>

• href と title という2つの属性を使っています。
• それぞれの属性は半角スペースで区切られていることに注目してください。

属性の基本構造を理解することでHTMLタグをさらに自由自在にカスタマイズできるようになります。

次はよく使われる代表的な属性について詳しく見ていきましょう。