要素の属性

この章のゴールは HTML の要素で使われる「属性」の理解をすることです。

属性は要素に追加の情報を加えるもの

サンプルコードがあった方がイメージがつきやすいと思うので、まずは以下のコードをご覧ください。（Web ページ上に表示する body 部分だけを抜粋）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
  <h1 id="logo">ロゴ</h1>
  <div class="item">
    <a
      href="https://tsuyopon.xyz/lp/mail-magazine-training-course-for-beginner/"
    >
      <h2>【初心者向け】Webエンジニア養成メルマガ講座</h2>
      <img
        src="https://tsuyopon.xyz/wp-content/uploads/2020/09/eyecatch-for-mail-magazine-training-course-for-beginner.png"
        alt="【初心者向け】Webエンジニア養成メルマガ講座"
      />
    </a>
  </div>
  <div class="item">
    <a href="https://js-drills.com/">
      <h2>JavaScript関数ドリル</h2>
      <img
        src="https://js-drills.com/wp-content/uploads/2020/09/eyecatch-for-top-page-in-js-drills.png"
        alt="HTML&CSS速習教室"
      />
    </a>
  </div>
</body>

上記サンプルコード内で出てくる属性の種類は以下の 5 つになります。

id 属性（h1 要素の中で利用）
class 属性（div 要素の中で利用）
href 属性（a 要素の中で利用）
src 属性（img 要素の中で利用）
alt 属性（img 要素の中で利用）

属性を書くときのルールは「<要素名属性名="属性値">」となります。

例えば、上記サンプルコードの a 要素を例に取ると「要素名」「属性名」「属性値」は次の通りです。

要素名: a
属性名: href
属性値: https://tsuyopon.xyz/lp/mail-magazine-training-course-for-beginner/

上記 5 つの中から、ここでは「href 属性」と「src 属性」を取り上げて「追加の情報とは何か？」を説明したいと思います。

href 属性の説明

「href 属性」は a 要素の属性の 1 つです。

a 要素の役割は「別のページに遷移するリンクテキストを作る」ことです。

別のページに遷移するには、「遷移先のページ URL」を指定する必要があります。

href 属性の役割がまさにそれで、遷移先のページ URL 情報を href 属性に記述することで、リンクテキストをクリックすると、href 属性にセットした URL にページ遷移します。

src 属性の説明

「src 属性」は img 要素の属性の 1 つです。

img 要素の役割は「Web ページ上に画像を表示する」ことです。

画像を表示するためには、「画像 URL」を指定する必要があります。

img 要素の src 属性の役割がまさにそれで、画像 URL を src 属性に記述することで、画像 URL に対応する画像が Web ページ上に表示されます。

属性を全て暗記しようとしない

「属性」も「要素」と同じように数多く存在します。どれだけ多くの属性があるか気になる場合は、MDN の「HTML 属性リファレンス」をご確認いただけたらと思います。

「HTML 属性リファレンス」を見ていただくと暗記するのは難しいというのが伝わるかと思います。

「全ての属性を覚えるぞ！」と意気込むというよりは、「頻繁に使う属性は自然と覚える」くらいな感じで学習を進めると良いです。

属性は大きく分けて 2 種類に分けられる

HTML の属性は大きく分けると次の 2 通りに分けられます。

CSS や JavaScript と一緒に使われる属性
CSS や JavaScript とあまり一緒に使われず、独立して使う属性

先ほど挙げた以下の 5 つの属性がどちらに分類するかも見ていきましょう。

id 属性（h1 要素の中で利用）
class 属性（div 要素の中で利用）
href 属性（a 要素の中で利用）
src 属性（img 要素の中で利用）
alt 属性（img 要素の中で利用）

CSS や JavaScript と一緒に使われる属性

CSS や JavaScript と一緒に使われる属性は主に次の 2 つがあります。（先程挙げた 5 つの属性の最初の 2 つ）

id 属性（h1 要素の中で利用）
class 属性（div 要素の中で利用）

３日目以降の「CSS」の学習で id 属性や class 属性が、どのようにして一緒に使われるか学習するので、ここでは「id と class は CSS で利用する」と認識していただけたらと思います。

CSS や JavaScript とあまり一緒に使われず、独立して使う属性

先程挙げた５つの属性の内、最後の３つが「独立して使う属性」になります。

href 属性（a 要素の中で利用）
src 属性（img 要素の中で利用）
alt 属性（img 要素の中で利用）

厳密に言うと、上記３つの属性が CSS や JavaScript から利用される場面もありますが、id 属性、class 属性と比べると圧倒的に一緒に使われる機会は少ないです。

また、「id」「class」属性に関しては、どの要素にでも使うことが出来ますが、「href」「src」「alt」属性は使える要素が限られています。

どの要素にでも使える属性のことを「グローバル属性」と呼ぶ。

例えば、先ほど共有した「HTML 属性リファレンス」を参考にすると、「href」「src」「alt」属性が使える要素はそれぞれ次のとおりだと示されています。

href: <a>, <area>, <base>, <link>
src: <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>
alt: <applet>, <area>, <img>, <input>

「href」「src」「alt」のそれぞれの役割を確認すると、次のように説明されています。

href: リンクされたリソースの URL です。
src: 埋め込みコンテンツの URL。
alt: 画像が表示できない場合の代替テキストです。

繰り返しになりますが、「全ての要素」「全ての属性」を暗記しようとは思わないでください。

「要素とは何か？」「属性とは何か？」が理解できれば、あとは必要に応じて以下の順番で調べれば、求めている答えが見つかりやすいです。

使いたい要素をググって見つける
要素のドキュメントの中で利用できる属性の説明があるためそれを参考にする
使い方のイメージがつかない場合は、例（サンプルコード）を元に使い方のイメージを付ける

「自己解決の流れ」「ググり方」に関しては「【コラム】知識を増やすと、少しずつ検索できる幅が広がる」でも説明しているので、そちらも参考にしていただけたらと思います。

学習状況をツイートする

HTML&CSS速習教室