基本知識 2026年7月2日

【HTML基礎講座第9回】属性とメタデータ：HTMLの拡張とブラウザ向け設定

HTML基礎講座全10回（第9回）

属性とメタデータ：HTMLの拡張とブラウザ向け設定

第9回では、タグに細かな意味や制御を追加する「属性（Attributes）」の仕組みと、検索結果やスマホ最適化を制御する「メタデータ（Metadata）」の書き方を学習します。

📌 講座ロードマップ一覧（クリックで移動）

第1回第2回第3回第4回第5回第6回第7回第8回第9回第10回

1. HTMLの属性（Attributes）の基本ルール

属性とは、HTMLタグに様々な追加情報を与えるための機能です。開始タグの中に、「属性名=”値”」の形式で記述します。

属性は、これまで紹介した aタグの `href` や imgタグの `src` のほか、ほぼすべてのタグで共通して使える「グローバル属性」が存在します。

2. class属性とid属性の決定的な違い

CSSでデザインを当てる際や、JavaScriptでプログラム的な動作を加える際、特定のタグを狙い撃ちするために `class` と `id` 属性を使用します。この2つには厳格な使い分けルールがあります。

👥 class 属性（分類クラス）

同じスタイルやグループを「複数」の箇所に適用したい場合に使用します。

・1つのページ内に何回でも同じクラス名を使って構いません。
・記述例: `

テキスト

🆔 id 属性（固有ID）

ページ内で「ただ1つだけ」存在する要素を識別するために使用します。

・同じid名を同じページ内で複数回使ってはいけません（違反するとHTMLエラーになります）。
・ページ内リンクの移動先ターゲットなど、固有名詞として狙いたい場所に使います。
・記述例: `

ヘッダー

3. headタグに書くべき重要なメタデータ

HTMLファイルの設定情報を司る `` タグの中には、ブラウザや検索エンジン（SEO）に指示を与えるための重要な meta（メタ）タグを記述します。

📱 viewport（ビューポート）によるスマホ対応設定

スマートフォンでWebページを閲覧した際、文字が極端に小さくならずに画面幅にフィットして表示されるように（レスポンシブ表示）、必ず以下のビューポート設定を記述します。これがないと、スマホではPC用の表示がただ縮小されただけの見づらい画面になってしまいます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

🔍 meta description（ディスクリプション）とSEO

Googleでキーワードを検索した際、検索結果一覧のタイトル下に表示される「そのページの説明文」を設定するためのメタタグです。ユーザーのクリック率に大きく影響するため、各ページごとに固有の100文字程度の概要を記述します。

<meta name="description" content="HTMLの基礎からWebデザインまでをわかりやすく解説する入門講座です。">

4. メタ属性を網羅したheadタグ記述コード

Webサイト制作においてテンプレートとして毎回記述すべき、完璧なhead構造のコードです。

head-template.html

<head>
    <!-- 文字エンコーディング指定（文字化け防止のために最初に記述） -->
    <meta charset="UTF-8">

    <!-- レスポンシブウェブデザイン（スマートフォン表示）の有効化 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 検索エンジン向けのページ解説文 -->
    <meta name="description" content="HTML基礎講座第9回。属性のルールとhead内の設定を学びます。">

    <!-- ブラウザのタブに表示されるページタイトル -->
    <title>属性とメタデータの役割をマスターする</title>
</head>