【HTML】レッスン1-☆01:HTMLの『属性』とは?タグに命を吹き込む重要なポイント!

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

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

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

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

今回のLessonではこの「属性」に特化して、基本的な仕組みから実践的な使い方までをわかりやすく解説していきます。今後の学習や実際のコーディングで役立つ知識ばかりなので、ぜひ最後まで読んでみてください。

Lesson1-0:HTML/CSSの開発環境を無料で整備しよう
Lesson1-1:HTML学習の入り口|Webページの基本構造を理解しよう
Lesson1-2:基本的なHTMLタグを理解しよう
Lesson1-3:Webページにリンクや画像を挿入しよう
Lesson1-4:3種類のリストを理解しよう
Lesson1-5:テーブル(表)の基礎を理解しよう
Lesson1-6:フォームを作成しよう
Lesson1-7:セクションタグとメタタグを知ろう
Lesson1-☆1:HTMLの『属性』とは何か|詳細に解説 ◁今回はココ
Lesson1-☆2:コピペして使える!HTMLのお勧めコード集(初心者向け)

この記事は会員向けの有料記事として作成したものを、期間限定で無料公開しているものです。

予告なく有料に戻すことがあります。

<<前のページ HTML/CSSの記事一覧 次のページ>>

属性とは何か?

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

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

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

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

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

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

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

  • 属性名(名前): href
  • 属性値(値): "https://example.com"

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

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

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

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

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

属性の基本構造

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

属性の基本的な書き方

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

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

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

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

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

<a href="https://example.com" title="公式サイト">公式サイトへ</a>
  • hreftitle という2つの属性を使っています。
  • それぞれの属性は半角スペースで区切られていることに注目してください。

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

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

よく使われる代表的な属性

HTMLには多くの属性が存在しますが、ここでは初心者が特に覚えておきたい代表的な属性を紹介します。

それぞれの属性がどのような場面で使われ、どんな役割を果たすのかを、具体的なコード例とともに解説します。

href(リンク先を指定する属性)

hrefリンク先のURLを指定するための属性です。主に<a>タグ(アンカータグ)と一緒に使われます。

<a href="https://example.com">公式サイトへ</a>
  • <a>タグ:リンクを作成するタグ。
  • href属性:リンク先のURLを指定する属性。
  • "https://example.com":実際のリンク先となるURL。

このコードをブラウザで表示すると、「公式サイトへ」というテキストがリンクとして表示され、クリックすると指定されたURLに移動します。

src(画像やメディアのソースを指定する属性)

src画像やメディアファイルのパスを指定するための属性です。主に<img>タグと組み合わせて使われます。

<img src="photo.jpg" alt="美しい風景">
  • <img>タグ:画像を表示するタグ。
  • src属性:表示する画像ファイルのパスを指定。
  • "photo.jpg":実際の画像ファイル名(またはURL)。

このコードでは、同じフォルダ内にあるphoto.jpgという画像が表示されます。

alt(代替テキストを指定する属性)

alt画像が表示されない場合に代わりに表示されるテキストを指定する属性です。これにより、アクセシビリティ向上やSEO対策にも役立ちます。

<img src="not_found.jpg" alt="商品の写真が表示されません">
  • alt属性:画像が読み込めなかったときに表示されるテキスト。
  • 例えば、画像ファイルが存在しない場合、このテキストが代わりに表示されます。
  • 画像が正常に表示される場合、altテキストは表示されません。
  • 画像が見えないユーザーやスクリーンリーダーを利用する人にも情報を伝える役割があります。

title(補足情報を表示する属性)

titleは要素にマウスカーソルを合わせたときに表示される補足情報(ツールチップ)を指定するための属性です。

<a href="https://example.com" title="公式サイトへアクセス">公式サイトへ</a>
  • title属性:リンクにカーソルを合わせると「公式サイトへアクセス」というメッセージがポップアップ表示されます。
  • ユーザーにとって、リンクの目的をより明確に伝えるのに便利です。

id(要素に一意の識別子を付与する属性)

idHTML内の特定の要素を一意に識別するための属性です。主にJavaScriptやCSSで要素を指定する際に使用されます。

<h2 id="section1">第1章: はじめに</h2>
  • id属性:この見出しに"section1"という一意の識別子を付けています。
  • ページ内リンクやJavaScriptの操作対象として使用できます。

まとめ

ここで紹介した属性は、HTMLの中でも特に使用頻度が高いものばかりです。

  • href:リンク先の指定
  • src:画像やメディアファイルの指定
  • alt:画像が表示されない場合の代替テキスト
  • title:補足情報の表示(ツールチップ)
  • id:要素の一意な識別子

これらの属性を正しく理解し使いこなすことで、Webページの機能性やアクセシビリティを大きく向上させることができます。

次は、属性を使う際のルールや注意点について学んでいきましょう。

属性のルールと注意点

HTMLの属性はとても便利ですが、正しく機能させるためにはいくつかのルールや注意点を理解しておく必要があります。

この章では属性を記述する際の基本的なルールと、よくある間違いを防ぐためのポイントについて解説します。

属性名は小文字で書くのが一般的

HTMLでは属性名は小文字で書くのが推奨されています。

HTMLは大文字と小文字を区別しない仕様(大文字でも動作する)ですが、コードの可読性や一般的なコーディングルールとして小文字で統一するのがベストプラクティスです。

以下のような書き方をしても機能はしますが、読みづらくなるため避けましょう。

<A HREF="https://example.com">公式サイトへ</A>

属性値はダブルクォーテーションで囲む

属性値は必ずダブルクォーテーション(")で囲むのが標準的な書き方です。

一部の状況では省略可能ですが、予期しないエラーを防ぐために常にダブルクォーテーションで囲むことを推奨します。

以下のような書き方も可能ではありますが、ミスを誘発する確率も上がるため避けましょう。

<img src=photo.jpg alt=美しい風景>

複数の属性は半角スペースで区切る

1つのタグに複数の属性を指定することができます。その場合、属性同士は半角スペースで区切る必要があります。

以下は正しい書き方です。hreftitleの間に半角スペースがあることで、ブラウザはそれぞれの属性を正しく認識します。

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

一方以下は間違えた書き方です。ブラウザが正しく解釈できず、意図した通りに表示されない可能性があります。

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

同じ属性を複数回書かない

1つのタグ内で同じ属性を複数回記述することは避けましょう。

ブラウザは最初に登場した属性を無視し、最後に記述された属性のみを適用する場合があります。

<a href="https://example.com" href="https://test.com">リンク</a>

この場合https://example.comは無視され、https://test.comへのリンクとして動作します。

空の属性に注意する

一部の属性は値を持たない「空の属性」として使用することができます。特に論理属性(boolean attributes)と呼ばれるものが該当します。

以下はチェックボックスのchecked属性の例です。

<input type="checkbox" checked>
  • checked属性は値を持たなくても「チェックされている」状態になります。
  • checked="checked"と書いても同じ意味です。

しかし通常の属性(例えばhrefsrc)では必ず値を指定する必要があるので注意しましょう。

まとめ

属性を正しく使うための基本的なルールは以下の通りです。

  • 属性名は小文字で書くのが推奨される。
  • 属性値はダブルクォーテーションで囲む。
  • 複数の属性は半角スペースで区切る。
  • 同じ属性を複数回書かない
  • 必要な場合は空の属性の使用に注意する。

これらのルールを守ることで、バグの少ない、読みやすいHTMLコードを書くことができます。

次は、タグによって異なる「グローバル属性」と「特定属性」の違いについて学んでいきましょう。

グローバル属性と特定属性の違い

HTMLの属性にはどのタグにも共通して使用できる「グローバル属性」と、特定のタグにのみ使用できる「特定属性」の2種類があります。

この章では、それぞれの違いと代表的な例について解説します。

グローバル属性とは?

グローバル属性(Global Attributes)とは、ほとんどすべてのHTMLタグで使用できる属性のことです。

これらの属性はタグの種類に関係なく共通の機能を提供します。

id(要素の一意な識別子)

<p id="introduction">はじめにの段落です。</p>
  • id属性はHTML内の要素を一意に識別するために使用します。
  • CSSやJavaScriptで特定の要素を操作する際に便利です。

class(要素をグループ化する識別子)

<p class="highlight">重要なテキストです。</p>
  • class属性は複数の要素を同じグループとして扱うために使います。
  • 複数の要素に同じclassを付けて、まとめてスタイルを適用できます。

title(補足情報の表示)

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

title属性はマウスカーソルを要素に重ねたときに表示される補足情報(ツールチップ)を指定します。

style(インラインスタイルを適用)

<p style="color: red;">赤い文字の段落です。</p>
  • style属性を使うとCSSを直接HTMLタグ内に記述できます。
  • ただしスタイルは通常CSSで管理するのが推奨されます。

data-*(カスタムデータ属性)

<div data-user-id="12345">ユーザー情報</div>
  • data-*属性は開発者が独自のデータをHTMLタグに埋め込むために使用します。
  • data-の後に好きな名前を付けて、カスタム情報を保持できます。

特定属性とは?

特定属性(Specific Attributes)は特定のタグでのみ使用できる属性です。

タグの役割に応じた機能を提供するため、別のタグで使用しても効果はありません。

href(リンク先の指定) – <a>タグ専用

<a href="https://example.com">公式サイトへ</a>
  • href属性はリンクを作成するための<a>タグ専用の属性です。
  • 他のタグ(例: <p><div>)で使っても機能しません。

src(メディアファイルのパス指定) – <img>, <audio>, <video>など専用

<img src="image.jpg" alt="風景の写真">
  • src属性は画像や動画、音声ファイルなどのソース(パス)を指定するために使います。
  • <p><a>タグで使うと無効です。

alt(代替テキストの指定) – <img>タグ専用

<img src="photo.jpg" alt="山の風景">
  • alt属性は画像が表示されない場合に表示される代替テキストを指定します。
  • <div><a>タグには適用されません。

まとめ

  • グローバル属性はどのタグにも使える汎用的な属性で、代表例としてidclassがあります。
  • 特定属性は特定のタグ専用で、代表例としてhref<a>専用)やsrc<img>専用)があります。
  • これらの違いを理解することで、より柔軟かつ効果的にHTMLを活用できるようになります。

まとめ

ここまでHTMLの「属性」について詳しく学んできました。

HTMLタグだけでは伝えきれない追加情報動作の指定を行うために、属性がいかに重要な役割を果たしているか理解できたでしょうか?

ここで学んだ「属性」の知識は、HTMLを使ったWebページ制作の土台となるものです。

今後、より複雑なレイアウトや動的な機能を実装する際にも、属性の正しい理解が大きな力になります。

この調子で次のレッスンに進み、さらにスキルを磨いていきましょう!

あなたのHTMLの理解は確実に深まっています。お疲れさまでした! 

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る