HTML 元素（タグ）と属性

JPKODA 編集部 May 5, 2026

開発環境を整え、HTMLドキュメントの基本構造を理解した後は、いよいよコンテンツに命を吹き込む核心的なコンポーネント、すなわち「HTML要素」と「属性」について深く掘り下げる時が来ました。

これらは、見出しや段落から画像、インタラクティブなフォームに至るまで、Webページ上のあらゆる情報を構築・整理・記述するための「積み木（ビルディングブロック）」です。

要素と属性は、コンテンツがどのように表示され、ブラウザがドキュメントをどのように解釈するかを決定します。これらの概念をしっかりと習得しなければ、意味があり、かつ正常に機能するWebページを作成することはできません。

1. HTML要素とは？

HTML要素は、すべてのHTMLドキュメントを構成する基本単位です。

HTML要素は、一般に「HTMLタグ」とも呼ばれます。

これらはWebページコンテンツの構造と意味を記述します。テキストや画像、さらには他の要素を収めるための「コンテナ（容器）」だと考えてください。シンプルな段落から複雑なナビゲーションメニューまで、Webページ上で目にするあらゆるコンテンツはHTML要素によって定義されています。

1.1 HTML要素の構造解析

ほとんどのHTML要素は、明確な構造に従っています。

開始タグ（Opening Tag）： 要素の始まりを示します。山括弧（くの字型の括弧）で囲まれた要素名で構成されます。例えば、<p> は段落、<h1> はメインの見出しを表します。
コンテンツ（Content）： 要素に含まれる実際の情報です。テキストの場合もあれば、他のHTML要素（これを「ネスト」と呼びます）、あるいはその両方の組み合わせである場合もあります。
終了タグ（Closing Tag）： 要素の終わりを示します。開始タグと似ていますが、要素名の前にスラッシュ（/）が含まれます。例えば、</p> や </h1> です。

例

<p>  これは段落のコンテンツです。 </p>
 ^            ^                ^
 |            |                |
開始タグ    コンテンツ         終了タグ

1.2 HTML要素のネスト（入れ子）

HTML要素は、他のHTML要素の内部に配置することができます。これは「ネスト（Nesting）」と呼ばれ、より複雑な構造のコンテンツを作成するための手法です。

要素をネストする場合、それらが「開かれた」順序とは逆の順序で正しく「閉じる」必要があります（つまり、後入れ先出しの原則です）。

正しいネストの例：

<p>これは <strong>太字のテキスト</strong> を含む段落です。</p>

ここでは、<strong> 要素が完全に <p> 要素の内部に含まれています。

誤ったネストの例：

<p>これは <strong>太字のテキストです。</p></strong>

これは間違いです。<strong> 要素が <p> 要素が終了する前に正しく閉じられていないためです。これは、ブラウザで予測不可能な表示問題を引き起こす可能性があります。常に「最も内側のタグから先に閉じる」ことを忘れないでください。

1.3 空要素（自己完結型タグ）

一部のHTML要素にはコンテンツが含まれないため、終了タグを必要としません。これらは「空要素（Empty Elements）」または「自己完結型タグ」と呼ばれます。これらは通常、コンテンツを囲むのではなく、ドキュメントに何かを挿入するために使用されます。

一般的な例：

<br>：改行（Line Break）を表し、直後のテキストを強制的に次の行へ移動させます。
<hr>：主題の区切り、または水平線（Horizontal Rule）を表し、通常はページを横切る一本の線として表示されます。

注意： モダンなHTML5では、末尾のスラッシュ（例：<br />）はオプションであり、簡潔にするために省略されるのが一般的です。現在のコードベースでは、主に <br> や <hr> という表記を目にするでしょう。

2. HTML属性とは？

要素がコンテンツの「種類」を定義するのに対し、「属性（Attributes）」はHTML要素に追加の情報や特性を提供します。

属性は常に要素の開始タグの中で指定され、name="value"（名前="値"）のペアで記述されます。

2.1 HTML属性の構造解析

一つの属性には以下が含まれます：

属性名（Attribute Name）： 要素に設定したいプロパティ名（例：id, class, style）。
等号（=）： 属性名とその値を区切ります。
属性値（Attribute Value）： その属性の具体的な設定やデータです。常に引用符（二重引用符 "" または一重引用符 '' のどちらか。二重引用符が最も一般的です）で囲みます。

デモ

<p class="highlight" style="color: blue;">
     ^        ^
   属性名    属性値

一つの要素に複数の属性を持たせることもでき、開始タグ内でスペースで区切って記述します。

2.2 一般的なHTML属性

多くの属性は特定の要素タイプ専用ですが（今後のレッスンで詳しく説明します）、多くのHTML要素に広く適用できる属性も存在します。

1. id 属性

id 属性は、ドキュメント全体の中でHTML要素に一意の識別子（ID）を付与します。同一のHTMLページ内で、二つの要素が同じ id 値を持つことは許されません。

目的： 要素を一意に特定すること。これは以下の操作に不可欠です。

CSSを使用して、特定の要素に対して独自のスタイリングを適用する。
JavaScriptを使用して、特定の要素を操作する。
特定のセクションへ誘導するページ内リンク（アンカーリンク）を作成する。

使用法：<タグ名 id="一意の名前">

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ID属性のデモ</title>
</head>
<body>
    <h1 id="mainTitle">私のユニークなページへようこそ</h1>
    
    <p id="introduction">この一文は、ページコンテンツの短い紹介文です。</p>
    
    <p>これはデモ用の普通の段落であり、特定のIDは持っていません。</p>
</body>
</html>

2. class 属性

class 属性は、HTML要素に一つ以上のクラス名を割り当てます。id とは異なり、class 名は一意である必要はなく、同じドキュメント内の複数の要素に適用できます。

目的： 要素をグループ化し、まとめてスタイルを設定したり操作したりすること。これはCSSと組み合わせて、同じスタイルを複数の要素に適用する際に最もよく使われます。
使用法： <タグ名 class="クラス名1 クラス名2">（複数のクラス名はスペースで区切る）

例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Class属性のデモ</title>
    <style>
        .highlight {
            background-color: yellow; /* 背景を黄色に */
            padding: 5px;
        }
        .important {
            font-weight: bold; /* 太字に */
            color: red; /* 赤色に */
        }
    </style>
</head>
<body>
    <p class="highlight">このテキストは黄色でハイライトされます。</p>
    
    <p class="highlight important">このテキストはハイライトされ、かつ重要です。</p>
    
    <p class="important">このテキストは重要ですが、ハイライトの背景はありません。</p>
    
    <p>これはクラスを何も持たない普通の段落です。</p>
</body>
</html>

3. style 属性

style 属性を使用すると、個別のHTML要素に直接インラインCSSスタイルを適用できます。色、フォントサイズ、背景などの見た目に関する側面を定義するために使用されます。

目的： 特定の要素に固有のスタイルを適用し、外部スタイルシートや親要素から継承されたスタイルを上書きすること。
使用法： <タグ名 style="プロパティ: 値; プロパティ2: 値2;">

例

<h1 style="color: green;">緑色の見出し</h1>
<p style="font-size: 18px; text-align: center;">この段落はカスタムサイズで中央揃えになっています。</p>

警告： クイックテストや非常に限定的な使い捨てのスタイルには便利ですが、通常はスタイル（CSS）とコンテンツ（HTML）を分離し、外部スタイルシートを使用することがベストプラクティスとされています。これにより、コードがよりクリーンで、メンテナンスしやすく、効率的になります。

4. title 属性

title 属性は、要素に関するアドバイザリ情報（補助的な情報）を提供します。ユーザーが要素の上にマウスカーソルを置いたとき、これらの情報は通常「ツールチップ（Tooltip）」として表示されます。

目的： ユーザーに追加の文脈や要素の短い説明を提供すること。
使用法： <タグ名 title="ここに説明文を記述">

例

<p title="このテキストはホバー時に追加情報を提供します。">
    この一文の上にマウスを置いてみてください。
</p>

3. 実践例とデモ

これまで学んだ要素、ネスト、属性の知識を組み合わせて、前章の基本ドキュメント構造をベースにした包括的なサンプルを構築してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>要素と属性の総合デモ</title>
    
    <style>
        .highlight {
            background-color: #f0f8ff; /* 淡い青色の背景 */
            padding: 8px;
            border-left: 3px solid #007bff; /* 青色の左ボーダー */
            margin-bottom: 10px;
        }
        .important-note {
            color: #dc3545; /* 赤色のフォント */
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 id="pageHeading" title="デモページのメイン見出しです。">
        HTML要素と属性の探求
    </h1>

    <p class="highlight">
        HTMLがどのようにコンテンツを構造化するか、詳しく見ていきましょう。Webページ上のあらゆる情報は、見出しからインタラクティブなコントロールに至るまで、一つの <strong>要素</strong> から始まります。
    </p>

    <p style="color: #6c757d; font-family: sans-serif;">
        これらの要素の内部では、多くの場合 <span class="important-note">属性</span> を使用して <em>追加情報</em> を付与します。これらの属性は、要素がどのように振る舞うべきか、あるいはどのように見えるべきかについて、ブラウザに具体的な指示を与えます。
    </p>

    <h2>基本要素タイプの理解</h2>

    <p id="firstSection" class="highlight">
        ほとんどの要素には、コンテンツを包み込む <strong style="color: darkgreen;">開始タグ</strong> と <strong style="color: darkred;">終了タグ</strong> があります。
    </p>

    <hr title="コンテンツのセクションを区切る水平線。">

    <p class="highlight important-note" title="このセクションでは要素のタイプとネストのルールに焦点を当てています。">
        「正しいネスト」が極めて重要であることを覚えておいてください。ある要素の内部で開かれた要素は、必ずその親要素が閉じる前に閉じられる必要があります。例えば、`<b><i>text</i></b>` は正しいですが、`<b><i>text</b></i>` は誤りです。
    </p>

    <br>
    <p>直前の改行要素（br）により、このテキストは新しい行に表示されます。</p>
</body>
</html>

4. まとめ

これで、HTMLの基本ビルディングブロックである「要素」と「属性」について理解できました。

要素： コンテンツの構造と意味を定義します（見出しから段落まで）。
属性： これら要素に追加の情報やプロパティを提供します。例えば、一意の識別子（id）、再利用可能なカテゴリ（class）、直接的なスタイル（style）などです。

要素の解剖構造、正しいネストの方法、そしてコンテンツを持つ要素と空要素の違いを理解することは、有効で効率的なHTMLを記述するために極めて重要です。

5. 附録

5.1 一般的なHTML空要素リスト

タグ (Tag)	名称/説明	主な用途	コード例
`<img>`	画像 (Image)	Webページに画像を埋め込む。srcとalt属性が必須。	`<img src="logo.png" alt="会社ロゴ">`
`<br>`	改行 (Break)	テキスト内で強制改行を行う（新しい段落は作らない）。	`一行目のテキスト<br>二行目のテキスト`
`<hr>`	水平線 (Horizontal Rule)	水平の区切り線を作成し、テーマの切り替わりを示す。	`<p>第一章</p><hr><p>第二章</p>`
`<input>`	入力欄 (Input)	インタラクティブなフォームコントロール（テキストボックス、ボタン等）を作成。	`<input type="text" placeholder="名前を入力">`
`<meta>`	メタデータ (Metadata)	ページに関するメタ情報（文字コード、SEO用説明、ビューポート設定）を提供。	`<meta charset="UTF-8">`
`<link>`	リンク (Link)	ドキュメントと外部リソースの関係を定義（主にCSSのリンク）。	`<link rel="stylesheet" href="style.css">`
`<source>`	メディアソース (Source)	`<video>` や `<audio>` タグに複数のメディアリソース（異なる形式）を指定。	`<source src="movie.mp4" type="video/mp4">`
`<area>`	エリア (Area)	イメージマップ内でクリック可能な領域を定義。	`<area shape="rect" coords="0,0,82,126" href="sun.htm">`
`<base>`	ベースURL (Base)	ページ上のすべての相対URLの基準となるURLを指定。	`<base href="https://example.com/images/">`
`<col>`	列 (Column)	テーブル内の一つの列、または複数の列の属性値を規定。	`<col span="2" style="background-color:red">`

5.2 HTMLの一般的な属性対照表

属性名	適用要素	説明
id	すべての要素	要素に一意の識別子を指定する。
class	すべての要素	要素に一つ以上のクラス名を指定する。CSSやJSのセレクタとして使用。
style	すべての要素	要素に直接CSSスタイルを適用する。
title	すべての要素	要素に追加のヒント情報を提供。通常、ホバー時に表示。
data-*	すべての要素	カスタムデータを格納するために使用。通常JavaScriptからアクセス。
href	`<a>`, `<link>`	リンク先のURLを指定する。
src	`<img>`, `<script>`, `<iframe>`	外部リソース（画像、スクリプト等）のURLを指定する。
alt	`<img>`	画像の代替テキスト。画像が表示されない時に表示される。
type	`<input>`, `<button>`	コントロールのタイプ（text, password, checkbox等）を指定。
value	`<input>`, `<button>`, `<option>`	要素の初期値を指定する。
disabled	フォーム要素	要素を無効化し、インタラクション不可にする。
checked	`<input type="checkbox/radio">`	チェックボックスやラジオボタンが選択状態かどうかを指定。
placeholder	`<input>, <textarea>`	入力欄にヒントテキストを表示する。
target	`<a>, <form>`	リンクやフォーム送信先のウィンドウを指定（`_blank` は新タブ）。
readonly	フォーム要素	入力欄を読み取り専用にする。
required	フォーム要素	入力フィールドを必須項目に指定する。
autoplay	`<audio>, <video>`	メディアを自動再生する。
onclick	すべての要素	要素がクリックされた時にJSイベントを発生させる。
onmouseover	すべての要素	マウスが要素の上に乗った時にJSイベントを発生させる。
onchange	フォーム要素	要素の値が変更された時にJSイベントを発生させる。