HTMLでテーブル（表）を作成するtableタグ（<table>タグ・<tr>タグ・<th>タグ・<td>タグ）の基本・意味・使い方を初心者向けにわかりやすく解説します。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

tableタグはデータを行と列の形式で整理し、表示するために使用されるHTML要素。テーブルは、情報を視覚的に整理して比較しやすくすることができ、一般的には数値データや、関連する項目のリストなどを表示するのに適しています。

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　HTMLの基本構文ルール

HTML：テーブル（表）の定義方法

tableタグを使ってテーブルを作成する際には、次のようなタグを組み合わせて使用します。

テーブルを作るには、tableタグだけではなく、その要素を表す <tr>タグ・<th>タグ・<td>タグが必要になります。

全てを暗記する必要はありませんが、それぞれのタグがどのように利用され、どのような意味を持つのか？をまずは頭に入れておきましょう。

• <table>
  • テーブル全体を定義します。テーブルはこのタグで始まり、</table>で終わります。
• <tr>
  • テーブルの行を定義するために使用されるタグです。
    →Table Row (テーブルの行) の略です。「ここから新しい行が始まりますよ」という意味。
• <th>
  • テーブルの見出しセルを定義するために使用されるタグで、通常は行や列のラベルに使用されます。
    →Table Header (テーブルの見出し) の略です。行の中でも「見出し」となるセルに使います。
• <td>
  • テーブルのデータセルを定義するために使用されるタグで、実際のデータを表します。
    →Table Data (テーブルのデータ) の略です。行の中でも「データ」となるセルに使います。
    

最初のうちはちょっと複雑に感じるかもしれません。順を追って理解していきましょう。

HTML：<table>タグの使い方

<table>タグは、テーブル（表）を作成するタグです。

イメージとして「ここにテーブル（表）を作成しますよ！」という宣言をするだけの役割を担っていると考えてOK。

<table>
<!-- ここに行数や見出しなどを定義していく -->
</table>

HTML：<tr>タグの使い方

<tr>タグはテーブルの行数を指定するタグです。<tr>タグを設置した分だけ、行数が増えていくことになります。

上記の例で言えば、<tr>タグは4つ（＝４行あるので）設置していることになります。必要に応じて、何個でも設置することが可能です。

trとは「Table Row」の略です。Rowとは、行という意味を持つため迷ったときは略す前の名称を思い出すと良いでしょう。<tr>タグは、<table>タグの中にネストして利用します。

<table>
  <tr>
<!-- ここに表の値などを定義していく -->
  </tr>
  <tr>
<!-- ここに表の値などを定義していく -->
  </tr>
</table>

HTML：<th>タグの使い方

<th>タグは、テーブルの見出しやタイトルを定義します。

<th>タグは「Table Header」の略であり、<tr>タグの中にネストして利用します。なお、<th>タグは見出し・タイトルを定義するタグであるため、テキストは太字かつ中央寄せで表示されます。

<table>
  <tr>
    <th>国</th>
    <th>通貨</th>
    <th>言語</th>
  </tr>
  <tr>
<!-- ここに表の値を定義していく -->
  </tr>
</table>

HTML：<td>タグの使い方

<td>タグは「Table Data」の略で、テーブルセルの内容を定義します。<tr>タグの中にネストして利用します。

<table>
  <tr>
    <th>国</th>
    <th>通貨</th>
    <th>言語</th>
  </tr>
  <tr>
    <td>日本</td>
    <td>円</td>
    <td>言語</td>
  </tr>
  <tr>
    <td>アメリカ</td>
    <td>＄</td>
    <td>英語</td>
  </tr>
  <tr>
    <td>イギリス</td>
    <td>￡</td>
    <td>英語</td>
  </tr>
</table>

こちらのコードを実行した結果がこちら。

このように、<table>タグ・<tr>タグ・<th>タグ・<td>タグの４つを利用することでHTMLでテーブル（表）を定義することが可能になります。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

現代のWeb環境におけるテーブル（表）の重要性

たまに、現代のWeb環境においてはテーブル（tableタグ）はもはや不要である？という意見を見かけますが、以下のような観点を踏まえると依然として重要なタグの１つであると言えます。

1. データの整理と表示
   • HTMLの表はデータを整理し、読みやすい形式で表示するのに適しています。例えば、統計データ、スケジュール、比較リストなどが挙げられます。
2. アクセシビリティ
   • 正しくマークアップされた表は、スクリーンリーダーを使用する視覚障害者に対して、情報の構造を明確に伝えることができます。
3. 互換性と標準化
   • ほとんどのブラウザでサポートされており、異なるデバイスやブラウザ間で一貫した表示を提供します。

ちょっと寄り道的に解説すると、昔はテーブル要素をページのレイアウトを整えるために利用する手法が流行った時期があるのですが、もうその目的では利用しませんよ・・・！ということを勘違いしてしまうと不要論につながってしまいます。

限定的な使用

• レイアウトツールとしての使用の減少
  • 過去にはWebページのレイアウト作成に広く使われていましたが、現在ではCSSフレックスボックスやグリッドレイアウトなどの技術が推奨されています。これらはレスポンシブデザインに適しており、より柔軟なレイアウトを可能にします。

最適な使用

• 意図した目的での使用
  • テーブルは主にタブラー形式のデータ表示のために使用するべきです。レイアウト目的での使用は、セマンティック（意味論的）なWebデザインの原則に反しています。
    参考　セマンティックHTMLとは？

HTMLの表は現代のWeb環境において、特定の用途、特にデータの整理とアクセス可能な表示において重要ですが、ページレイアウトのツールとしては他のより適した技術に取って代わられています。適切なコンテキストで使用される場合、表は効果的なツールであり続けます。

HTML：テーブルのデザイン

ここからは、HTMLでテーブルのデザイン変更を行う方法を解説していきます。CSSを使用してスタイルを指定する方が現代的で柔軟ですが、知識の１つとして知っておいて損はありません。

代表的な以下の属性について解説します。

tableタグで利用できる主な属性

• border属性
• bordercolor属性
• bgcolor属性
• cellspacing属性
• cellpadding属性

テーブルに罫線をつける方法（border属性）

border属性（参考 属性とは？）は、HTMLのtableタグにおいて、テーブルやセルの境界線（ボーダー）の幅を指定するために使用される属性です。この属性に数値を指定することで、ボーダーの幅をピクセル単位で設定できます。

例えば、次のようにtableタグにborder属性を指定することで、テーブル全体に1ピクセル幅のボーダーを適用できます。

<table border="1">
  ...
</table>

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
  }
</style>
<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

上記を実行した結果がこちら。

枠線の色を変える（bordercolor）

bordercolor属性は、HTMLのテーブルやセルの境界線（ボーダー）の色を指定するためにかつて使用されていた属性です。この属性に色名や16進カラーコードを指定することで、ボーダーの色を設定できました。

例えば、以下のようにtableタグにbordercolor属性を指定することで、ボーダーの色を赤に設定できました。

<table border="1" bordercolor="red">
  ...
</table>

しかし、bordercolor属性も非標準の属性であり、HTML標準仕様には含まれていません。そのため、現代のWeb開発では使用を避け、代わりにCSSを利用してボーダーの色をスタイルすることが推奨されています。

例えば、以下のようにCSSのborderプロパティを使用して、同様のボーダーの色を適用できます。

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid red;
  }
</style>

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

この例では、border-collapse: collapse;を使ってテーブルのボーダーがつながるようにしています。また、thおよびtd要素に対して、border: 1px solid red;を使って1ピクセル幅の赤いボーダーを適用しています。

CSSを使用することで、より柔軟で綺麗なデザインを実現できますし、標準仕様に準拠したコードを書くことができます。

背景色を変更する方法（bgcolor属性）

bgcolor属性は、HTMLの過去のバージョンで使用されていた属性で、テーブルやセルの背景色を指定するために使われていました。この属性に色名や16進カラーコードを指定することで、背景色を設定できました。

例えば、次のようにtableタグやtdタグにbgcolor属性を指定することで、背景色を設定できました。

<table bgcolor="#f2f2f2">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td bgcolor="lightblue">データ1</td>
    <td bgcolor="lightblue">データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

しかし、bgcolor属性はHTML4.01で非推奨となり、HTML5では完全に廃止されました。現代のWeb開発では、代わりにCSSを使用してテーブルやセルの背景色をスタイルすることが一般的です。

例えば、次のようにCSSのbackground-colorプロパティを使用して、同様の背景色を適用できます。

<style>
  table {
    background-color: #f2f2f2;
  }
  td:first-child {
    background-color: lightblue;
  }
</style>

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

セル間のスペースを指定（cellspacing属性）

cellspacing属性は、HTMLのtableタグにおいて、テーブル内のセル間のスペース（セルスペーシング）を指定するために使用される属性です。この属性に数値を指定することで、セル間のスペースをピクセル単位で設定できます。

例えば、次のようにtableタグにcellspacing属性を指定することで、セル間に5ピクセルのスペースを設けることができます。

<table cellspacing="5">
  ...
</table>

しかし、cellspacing属性も他の属性と同様にHTML5で非推奨となりました。代わりにCSSを使用してテーブルのセル間のスペースをスタイルすることが一般的です。

例えば、次のようにCSSのborder-spacingプロパティを使用して、同様のセル間のスペースを設定できます。

<style>
  table {
    border-collapse: separate;
    border-spacing: 20px;
  }
</style>

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

この例では、border-collapse: separate;を使ってテーブルのボーダーが分離されるようにしています。また、border-spacing: 20px;を使ってセル間のスペースを20ピクセルに設定しています

セル内のスペースを指定（cellpadding属性）

cellpadding属性は、HTMLのtableタグにおいて、テーブルのセル内の余白（セルパディング）を指定するために使用される属性です。この属性に数値を指定することで、セル内の余白をピクセル単位で設定できます。

例えば、次のようにtableタグにcellpadding属性を指定することで、セル内の余白を10ピクセルに設定することができます。

<table cellpadding="10">
  ...
</table>

しかし、cellpadding属性についてもHTML5で非推奨となりました。

代わりにCSSを使用してテーブルのセル内の余白をスタイルすることが一般的です。例えば、次のようにCSSのpaddingプロパティを使用して、同様のセル内の余白を設定できます。

<style>
  th, td {
    padding: 10px;
  }
</style>
<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

まず最初にお伝えしたいのは、JSPは決して難しいものではありません。むしろ、「ちょっと動きのあるWebページを、できるだけ簡単に作りたい！」という人のために生まれたものなのです。近年では他の技術に取って代わられた印象が否めないJSPですが、昔からある巨大なレガシーシステムなどでは現役で、システムの更改案件などではよく目にすることがあります。

このページでは「JSPってそもそも何？」という一番大事な部分から、初心者向けに順を追って１からわかりやすく専門用語を避けて解説します。

JSPとは何か？

JSP（Java Server Pages）は、Javaを使ってWebページを動的に生成するための技術で、通常のHTMLファイルにJavaのコードを埋め込むことで、アクセスするたびに内容が変化するページを作成することを可能にします。

そのため、JSPはJavaをベースとしていますが、HTMLの知識があれば、基本的な使い方は十分に理解することができます。

【前提１】静的なページと動的なページ

Webページには、大きく分けて2種類あります。
1つは「静的なページ」、もう1つは「動的なページ」です。

静的コンテンツ/動的コンテンツの違いを１分で解説【初心者向け】

【初心者向け】「動的」「静的」という言葉の意味とその違いを端的に解説します。本で学習したがイマイチ理解できない、、、結局一言でいうと違いは何？という疑問をお持ちの方に具体例を用いながら分かりやすく解説します。

it-biz.online

2026.04.26

静的なページとは、内容があらかじめ決まっていて、アクセスするたびに同じ内容が表示されるページです。たとえば、自己紹介だけが書かれた会社のホームページや、お知らせ一覧だけが載っているページなどが該当します。

一方、動的なページは、アクセスした時点の情報や、閲覧しているユーザーの状態に応じて内容が変わります。たとえば、ショッピングサイトで商品が表示されたり、ログイン中のユーザー名が画面に表示されたりするページがそうです。

静的なページはHTMLだけで作成できますが、動的なページを作るには、プログラムによってページの内容を生成する仕組みが必要です。JSPは、そのような仕組みの一つです。

もちろんJSP以外にも同じようなことを実現することが可能で、現代ではほとんどJSP以外が主役です。なのですが、レガシーシステムでは今でも現役で動いていることが多いので「まあ知っておいて損はないかな」というのがJSPの位置づけです。

JSPとはどのような技術か

JSPは、JavaのコードをHTMLに埋め込むことで、Webサーバー上で動的にHTMLを生成する技術です。拡張子が .jsp であるファイルを使ってページを作成します。

JSPファイルは、Webサーバー（通常はTomcat）に配置され、ユーザーがアクセスすると、サーバー側でJavaのコードが実行されます。その結果として生成されたHTMLが、ブラウザに送信され、画面に表示されます。

つまり、JSPは「動的にHTMLを生成する仕組み」であり、「HTMLの中にJavaの処理を一部書き足せる形式のファイル」と言えます。

JSPの動作のしくみ

JSPファイルは、ユーザーがアクセスしたときに、サーバー側で一度「Javaのクラス（Servlet）」に変換されます。変換されたクラスはコンパイルされ、Javaプログラムとして実行されます。このとき、JSPファイルに書かれたHTMLの部分はそのままHTMLとして出力され、Javaのコード部分は処理されて結果が埋め込まれます。最終的に生成されたHTMLがブラウザに送信され、ユーザーに表示されます。

このしくみによって、JSPは1枚のファイルで「HTMLの見た目」と「動的な処理」を両立させることができます。

JSPの動き方の流れ

1. ユーザーが .jsp ファイルをリクエストする（例：hello.jsp）
2. Tomcat がその .jsp を読んで、中の Java を実行
3. 結果として HTML を作り出し、ブラウザに返す
4. ブラウザには、あたかも普通のHTMLのように見える

この一連の流れによって、「動きのあるページ」がリクエスト元に返却されることになります。

JSPを動かすための準備

JSPファイルは、通常のHTMLファイルと違い、単独では動作しません。JSPはサーバー側でJavaのコードを実行する仕組みのため、その処理を受け持つ「Webサーバー」や「Javaの開発環境」が必要です。

この章では、JSPを動かすために必要なソフトウェアや環境を、1つずつ順を追って準備していきます。

JSPの動作に必要なもの

JSPを動作させるには、次の3つが必要です。ここでは、それってそもそも何？みたいな説明＋実際にあなたのPCにインストールする手順をメモ程度に記載しておきますので、この辺の知識がすでにあるよ！という方は読み飛ばしてください。

JDKのインストール

まず、Javaの開発環境であるJDKをインストールします。JDKがインストールされていないと、JSPも動作しません。

Javaの開発環境構築の３ステップ解説（JDK/JRE/JVMの仕組みを１から解説）

【超・初心者向け】Javaの開発環境を初心者向けに簡単に設定する方法をわかりやすく解説します。JDKのインストール、IDEの選択、開発のスタートまで、スムーズにJavaプログラミングを始める方法をご説明します。

it-biz.online

2026.04.16

手順

1. Oracleの公式サイトまたはOpenJDKのサイトから、JDKをダウンロード。
2. お使いのOSに合ったインストーラを選び、画面の指示に従ってインストール。
3. インストール後、コマンドプロンプト（またはターミナル）を開き、↓のコマンドを入力。

java -version

バージョンが表示されれば、正常にインストールされています。

Tomcatのインストール

JSPファイルを処理するために、Tomcatをインストールします。TomcatはJavaで動作するWebサーバーで、JSPの実行に適した軽量なサーバーです。

手順

1. Apache Tomcat の公式サイトにアクセス。
2. zip ファイル（Windows の場合）または tar.gz ファイル（Mac/Linux の場合）をダウンロード。
3. ダウンロードしたファイルを任意の場所に展開（解凍）。
   →C:\tomcat や ~/tomcat などが一般的ですが、どこでもOK。
4. binフォルダにある startup.bat（Windows）または startup.sh（Mac/Linux）を実行。
5. ブラウザを開き、次のURLにアクセスします：

無効なURLです

localhost

Tomcatのトップページが表示されれば、インストールは成功です。

JSP用のフォルダを作る

Tomcatでは、webapps フォルダの中にあるプロジェクトが自動的に読み込まれます。自分でJSPファイルを作って表示するには、ここに新しいフォルダを作成します。

手順

1. Tomcatフォルダ内の webapps に移動。
2. 新しくフォルダを作成し、たとえば jsp-demo という名前をつける。
3. jsp-demo フォルダの中に、最初のJSPファイルを作成します。ファイル名は hello.jsp など。

エディタの準備

JSPファイルは、普通のテキストファイルとして作成できますが、プログラミングに適したエディタを使うと効率が上がります。以下のいずれかのエディタを使用するのが一般的です。

• Visual Studio Code（無料で軽量、拡張機能が豊富）
• IntelliJ IDEA（Javaに特化した統合開発環境）
• Eclipse（Java開発で定番のIDE）

初心者の方には、Visual Studio Codeが扱いやすくおすすめです。必要に応じて「Java Extension Pack」などを追加すると、補完機能や構文チェックも利用できます。

最初のJSPファイルを作ってみよう

前の章で、JSPを動かすための準備が整いました。この章では、実際にJSPファイルを1つ作成し、それをブラウザで表示するところまで進めます。

ここでは、「JSPとはどういうものか」を実際に体験しながら、基本的な書き方や仕組みを理解していきます。

JSPファイルとはどんなファイルか

JSPファイルは、基本的にはHTMLっぽく見えるコードで、この中の必要な部分にJavaのコードを差し込むことで、表示内容を動的に変えることができるようにしています。たとえば、「現在の日時を表示する」などの処理が可能になります。

JSPファイルの拡張子は .jsp です。ファイルの中には、通常のHTMLタグと、Javaのコードが組み合わさって記述されます。

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello JSP</title>
</head>
<body>
  <h1>こんにちは、JSPの世界へようこそ！</h1>
  <p>現在の時刻は：<%= java.time.LocalDateTime.now() %></p>
</body>
</html>

上記のJSPファイルの中では、JavaのコードとHTMLが組み合わさっています。それぞれの部分について説明します。

• <%@ page contentType="text/html; charset=UTF-8" %>
  → この行は「ページ全体の設定」です。文字コードをUTF-8にすることで、文字化けを防ぎます。
• <%= java.time.LocalDateTime.now() %>
  → この部分がJSPの特徴です。「現在の時刻を表示する」Javaのコードが入っています。
  <%= と %> で囲まれた中はJavaの「式」として実行され、結果がそのままHTMLに差し込まれます。

上記のファイルをブラウザで表示するためにエディタで編集して保存しましょう。

1. Tomcatの webapps フォルダの中にある、前章で作成した jsp-demo フォルダに移動。
2. hello.jsp という名前の新しいファイルを作成。
3. ファイルをエディタで開き、↑の内容を記述し保存！

ブラウザで表示してみる

ファイルを保存したら、Tomcatが起動していることを確認し、ブラウザで次のURLにアクセスしてみましょう。

無効なURLです

localhost

画面に「こんにちは、JSPの世界へようこそ！」という見出しと、現在の時刻が表示されていれば成功です。

ブラウザでページを更新するたびに、時刻が変化するはずです。これは、JSPがアクセスされるたびにJavaのコードを実行して、ページの中身を動的に作っているということを意味します。

JSPの基本構文

前の章では、JSPファイルを作成し、Javaのコードを埋め込むことで「現在の時刻を表示する」ページを作成しました。ここからは、JSPファイルで使われる代表的な構文について解説します。どのようにJavaのコードをHTMLに差し込むのか、そしてJSP特有の書き方にはどんな種類があるのかを、順を追って学習していきましょう。

JSPの構成要素

JSPでは、以下の4種類の記述形式が用意されています。これらを使い分けることで、Javaの処理とHTMLの表示を同時に扱うことができます。

ディレクティブ

ディレクティブは、JSPファイル全体に関する設定を行うものです。最もよく使われるのは page ディレクティブです。

<%@ page contentType="text/html; charset=UTF-8" %>

この記述によって、出力するHTMLの文字コードがUTF-8になります。日本語を正しく表示するために必須です。

スクリプトレット

スクリプトレットは、JSPファイル内にJavaの処理を書くための領域です。

<%
  int year = java.time.LocalDate.now().getYear();
  String message = "今年は " + year + " 年です。";
%>
<p><%= message %></p>

この例では、Javaで現在の年を取得し、それを文字列として作成しています。そして <%= ... %> を使って、結果をHTMLに出力しています。

スクリプトレットの中ではJavaの文法がそのまま使えます。ただし、後述するようにスクリプトレットは新しい開発ではなるべく使わない方向にあります。

式（Expression）

式は、値をそのままHTMLとして出力したいときに使います。

<p>こんにちは、<%= "JSPユーザー" %>さん！</p>

上の例では、"JSPユーザー" という文字列がHTMLに挿入され、ブラウザには次のように表示されます。

こんにちは、JSPユーザーさん！

この書き方は非常にシンプルで、値を表示するだけであれば便利ですが、複雑な処理は向きません。

宣言

宣言は、JSPファイルの中でメソッドや変数を定義したい場合に使います。

<%! 
  private String getGreeting(String name) {
    return "こんにちは、" + name + "さん！";
  }
%>
<p><%= getGreeting("太郎") %></p>

このように、JSPファイルの中で小さな関数を定義して、それを式の中で呼び出すこともできます。ただし、JSPファイルに処理を詰め込みすぎると保守が難しくなるため、このような記述はできるだけ避け、外部のJavaクラスに処理を分けることが望まれます。

コメントの書き方

JSPには、HTMLのコメントと、JSP用のコメントの2種類があります。

<!-- これはHTMLのコメントです（ブラウザの「ページのソース」に表示されます） -->

<%-- これはJSPのコメントです（ブラウザには一切表示されません） --%>

HTMLのコメントはWebページに送信されるため、内容を見られる可能性があります。
一方、JSPのコメントはサーバー側で処理が止まるため、セキュリティ的に重要なコメントや開発者向けのメモはJSPのコメントで書くのが安全です。

スクリプトレットはなるべく使わない

JSPの構文として紹介しましたが、スクリプトレット（<% ... %>）の使用は、今では非推奨とされています。理由は以下の通り。

• HTMLとJavaのロジックが混ざることで、読みづらくなる
• 保守性が下がり、エラーが起きやすくなる
• JSTL（JSP標準タグライブラリ）やEL（式言語）の方がシンプルで安全に書ける

そのため、今後はJSTLやELを使って、できるだけ「Javaコードを書かずに表示を制御する方法」を覚えていくことが大切です。

次の章では、JSTLとEL（式言語）を使った“スクリプトレットを使わない”JSPの書き方を学びます。より読みやすく、安全なJSPの記述方法を習得していきましょう。

ELとJSTLでスクリプトレットのないJSPへ

ここまでの解説では、JSPの基本構文としてスクリプトレット（<% ... %>）などを紹介しました。
しかし近年のJSP開発では、スクリプトレットを使わない記述スタイルが主流となっています。

この章では、EL（Expression Language）とJSTL（JSP Standard Tag Library）という2つの仕組みを使って、JSPファイルの中にJavaコードを書かずに動的な表示を行う方法を学んでいきます。

EL（式言語）とは

EL（Expression Language）は、JSPの中でJavaの値を簡潔に記述するための言語です。
スクリプトレットのように <%= で囲む必要がなく、シンプルに ${変数名} と書くだけで値を出力できます。

<p>こんにちは、${userName} さん。</p>

このコードでは、Javaのサーバー側で userName という名前のデータ（属性）が用意されていれば、自動的にその値が表示されます。

JSTL（JSP標準タグライブラリ）とは

JSTLとは、JSP上で使える共通の処理をあらかじめタグ化したライブラリです。
たとえば、以下のような処理が可能です。

• 条件分岐（if）
• 繰り返し処理（forEach）
• 値のフォーマット（日付や数値）
• URLの生成

JSTLを使うことで、複雑なJavaの処理をわかりやすいタグで書くことができるようになります。

JSTLを使う準備

JSTLを使うには、JSTLライブラリの .jar ファイルを JSPプロジェクトの中に追加する必要があります。

手順

1. JSTLの最新版（Jakarta標準）をダウンロード
   → https://jakarta.ee/specifications/tags/
2. ダウンロードした jakarta.servlet.jsp.jstl-api-x.x.x.jar などの .jar ファイルを、Tomcatの lib フォルダ、またはプロジェクトの WEB-INF/lib フォルダにコピーします。
3. JSPファイルの先頭に、以下のようにタグライブラリを読み込む宣言を記述します。

<%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>

この設定により、<c:if> や <c:forEach> などのJSTLタグが使えるようになります。

JSTLで条件分岐をする

スクリプトレットで if 文を書かなくても、JSTLの <c:if> タグを使うことで簡単に条件分岐ができます。

<%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
<c:if test="${loginUser != null}">
  <p>ようこそ、${loginUser.name} さん</p>
</c:if>

このように、loginUser という属性が null でなければ、挨拶文が表示されます。

JSTLで繰り返し表示をする

リストや配列の内容を繰り返し表示するには、<c:forEach> を使います。

サーバー側で、次のようにリストをセットしておきます（Servletなどで）：

List<String> names = List.of("太郎", "花子", "次郎");
request.setAttribute("nameList", names);

JSPファイルでは、次のように記述します：

<%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
<ul>
  <c:forEach var="name" items="${nameList}">
    <li>${name}</li>
  </c:forEach>
</ul>

このコードにより、以下のようなHTMLが生成されます：

<ul>
  <li>太郎</li>
  <li>花子</li>
  <li>次郎</li>
</ul>

JSPをすっきり保つために

ELとJSTLを使うことで、JSPファイル内にJavaのコードを書く必要がなくなり、HTMLに近い構造を保ちながら動的な処理を行うことができます。
これは、JSPを読みやすく・保守しやすくする上でも非常に重要です。

また、デザイナーと共同で作業するようなプロジェクトでも、HTMLに近い見た目を保つことで、分業がしやすくなります。

フォームからデータを受け取る

JSPを使ってWebアプリケーションを作成する際、ユーザーの入力に応じて処理を行うことは非常に重要です。この章では、HTMLのフォームを使って入力されたデータを、JSPで受け取って表示する方法を学びます。

フォーム送信の流れ

フォームを使った処理は、次のような流れで行われます。

1. 入力フォームのあるページ（JSP）を表示する
2. ユーザーが名前などの情報を入力し、送信ボタンを押す
3. 入力内容がサーバーに送られる
4. 受け取ったJSPファイルがその情報を読み取り、画面に表示する

JSPではこの一連の流れを、HTMLとJavaの仕組みで簡単に実現できます。

フォームを作るJSP（entry.jsp）

まずは、名前を入力するための簡単なフォームを作成します。

entry.jsp

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>名前の入力</title>
</head>
<body>
  <h2>お名前を入力してください</h2>
  <form action="result.jsp" method="post">
    <label>名前：<input type="text" name="username" /></label>
    <input type="submit" value="送信" />
  </form>
</body>
</html>

このページでは、名前を入力して「送信」ボタンを押すと、result.jsp にPOSTリクエストでデータが送信されます。

データを受け取るJSP（result.jsp）

次に、送信されたデータを受け取って表示するためのJSPファイルを作成します。

result.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>入力結果</title>
</head>
<body>
  <h2>ようこそ！</h2>
  <p>あなたの名前は <strong><%= request.getParameter("username") %></strong> さんですね。</p>
</body>
</html>

ここでは、request.getParameter("username") というコードで、フォームから送られたデータを取得しています。

• request はJSPに自動で用意されているオブジェクト。
• getParameter("username") は、フォームのname="username" に対応した値を取得するメソッド。

ELを使って書き換える

JSTLやELを使えば、result.jsp をもっとすっきり書くこともできます。以下のようにリクエスト属性に値をセットしてから表示することで、式言語を活用できます。

Servlet側（例）

String name = request.getParameter("username");
request.setAttribute("username", name);
request.getRequestDispatcher("/result.jsp").forward(request, response);

result.jsp：

<%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
<p>こんにちは、${username} さん！</p>

ただし、Servletを使う方法はこのガイドの後半で詳しく扱いますので、今はまず request.getParameter() による受け取りに慣れることをおすすめします。

セッションとCookieでデータを保持する

JSPでは、ユーザーが入力した情報を「別のページでも使いたい」という場面がよくあります。
たとえば、ログイン状態を維持したり、前の画面で入力された名前を次の画面でも表示したりする場合です。

そのようなときに役立つのが セッション（Session） と クッキー（Cookie） です。
この章では、それぞれの役割と使い方を学びます。

セッションの基本操作

データの保存：

<%
  String name = request.getParameter("username");
  session.setAttribute("userName", name);
%>

このコードは、userName という名前でセッションに値を保存します。

データの取得：

<%
  String name = (String) session.getAttribute("userName");
%>
<p>ようこそ、<%= name %> さん</p>

このようにすれば、前のページで保存した値を、別のページで取り出して使うことができます。

セッションの有効期間と注意点

セッションは、ユーザーがブラウザを閉じるか、一定時間操作をしないと自動的に無効になります。Tomcatの初期設定では、30分間操作がないとセッションが切れます。

また、多くの情報をセッションに保存しすぎると、サーバーのメモリを圧迫する可能性があるため、用途を絞って使うことが大切です。

Cookieとは

Cookie（クッキー）は、情報をユーザーのブラウザに保存する仕組みです。
サーバー側から「この情報を保存しておいてください」と指示すると、ブラウザがその内容を保持し、次回以降のアクセス時にその情報を自動的に送信してきます。

Cookieの基本操作

Cookieの作成と送信：

<%
  String name = request.getParameter("username");
  Cookie cookie = new Cookie("userName", name);
  cookie.setMaxAge(60 * 60); // 1時間（秒単位）
  response.addCookie(cookie);
%>

Cookieの取得：

<%
  String name = "";
  Cookie[] cookies = request.getCookies();
  if (cookies != null) {
    for (Cookie c : cookies) {
      if ("userName".equals(c.getName())) {
        name = c.getValue();
      }
    }
  }
%>
<p>こんにちは、<%= name %> さん</p>

このように、Cookieを使えば、ブラウザに保存された情報を次回のアクセス時にも利用できます。

セッションとCookieの使い分け

一時的な状態保持（ログイン情報など）にはセッション、
ユーザーに関連する設定（言語選択やテーマなど）にはCookieがよく使われます。

JSPで簡単なアンケートアプリを作ろう

JSPを使ってWebアプリケーションを作るには、「複数ページにまたがる処理」を整理することが大切です。
この章では、3画面構成のアンケートアプリを作り、情報の受け渡し、表示の切り替え、セッションの活用を総合的に体験します。

アプリの構成と目的

このアプリでは、以下のような流れでユーザーにアンケートに答えてもらい、最終画面でまとめて表示します。

1. 入力画面：名前と好きな色を入力（form）
2. 確認画面：入力された内容を表示（セッションで一時保持）
3. 完了画面：ありがとうメッセージと入力内容の最終確認

プロジェクト構造

jsp-demo/
├─ input.jsp     （入力画面）
├─ confirm.jsp   （確認画面）
└─ thanks.jsp    （完了画面）

入力画面：input.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>アンケート入力</title></head>
<body>
  <h2>アンケートにご協力ください</h2>
  <form action="confirm.jsp" method="post">
    <p>お名前：<input type="text" name="userName" /></p>
    <p>好きな色：
      <select name="favoriteColor">
        <option value="赤">赤</option>
        <option value="青">青</option>
        <option value="緑">緑</option>
      </select>
    </p>
    <input type="submit" value="確認画面へ" />
  </form>
</body>
</html>

確認画面：confirm.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%
  String userName = request.getParameter("userName");
  String favoriteColor = request.getParameter("favoriteColor");

  session.setAttribute("userName", userName);
  session.setAttribute("favoriteColor", favoriteColor);
%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>確認画面</title></head>
<body>
  <h2>以下の内容でよろしいですか？</h2>
  <p>お名前：<%= userName %></p>
  <p>好きな色：<%= favoriteColor %></p>
  <form action="thanks.jsp" method="post">
    <input type="submit" value="送信する" />
  </form>
</body>
</html>

完了画面：thanks.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%
  String name = (String) session.getAttribute("userName");
  String color = (String) session.getAttribute("favoriteColor");

  // 必要があればセッションのデータを破棄
  session.invalidate();
%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>送信完了</title></head>
<body>
  <h2>ご協力ありがとうございました！</h2>
  <p><strong><%= name %></strong> さんの好きな色は <strong><%= color %></strong> ですね。</p>
</body>
</html>

document.write()は、JavaScript初心者が初めて動かすメソッドになることが多いのですが、そもそもdocument.write()って何？と疑問に思う方も大勢いらっしゃるはずです。

このページでは、document.write()の意味と使い方、基本的な構文ルールや実際の利用シーンなどを網羅的に解説します。

JavaScript初心者の方にとって、JavaScriptをマスターするために避けては通れない必須知識ですので是非最後までご覧ください。

document.writeとは？

document.write()は、文字列や変数の値を表示させるメソッドです。

引数「( )の中」に直接表示させたい内容を指定するだけでOKです。

document.write(表示させたい内容)

See the Pen document.write1 by ビズドットオンライン (@BizOnline) on CodePen.

文字列だけではなく、例えば変数の内容を表示させることもできます。

See the Pen document.write1 by ビズドットオンライン (@BizOnline) on CodePen.

JavaScriptでは、例えば変数の中身を知りたいときや、処理の結果を知りたいときにこのdocumentwrite()メソッドを高頻度で利用します。

※JavaScriptの「変数宣言」について詳しく知りたい方はこちらのページをご覧ください。

【JavaScript】let・const・var の違いとは？初心者向けに使い分けを3分で整理

JavaScript初心者向けガイド：変数の宣言方法をvar, let, constの違いを中心に解説。関数スコープ、ブロックスコープ、巻き上げ、再代入の可否などの基本概念を明確に理解し、実用的なサンプルコード付きでわかりやすくご説明します。

it-biz.online

2026.04.26

文字列は``or""で囲む

文字列は、``（シングルクォーテーション）もしくは""（ダブルクォーテーション）で囲む必要があります。

document.write("Hello World!");　//正常に出力される

document.write(`Hello World!`);       //こちらも正常に出力される

document.write(Hello World);          //出力エラー

最後のHello World!は文字列とみなされないため、エラーが発生します。

ちなみに、シングルクォーテーションとダブルクォーテーションを混ぜて利用するのはNGです。

document.write(`Hello World!");　//これはエラーになります

document.writeーHTMLタグと組み合わせ

【初心者向け】HTMLの書き方の基本/基礎を３分で解説

【HTML入門編】HTMLの書き方を初心者向けにわかりやすくまとめました。HTMLって何？イメージがわきづらい方もこのページをご覧になれば「何となく」のイメージをつかめるはずです。

it-biz.online

2023.07.10

document.write()では、引数の中身にHTMLタグを設置することができます。

document.write("<開始タグ>文字列</終了タグ>")

See the Pen document.write3 by ビズドットオンライン (@BizOnline) on CodePen.

ここで注意すべきは、あくまでも表示される内容はHTMLのコードであるということです。

つまり、JavaScript自体はHTMLのタグを認識しません。いわば通常のHTMLのタグも通常通りの文字列として一旦主力され、ブラウザで表示する際にHTMLタグが読み込まれるとも言えます。

したがって、変数の値にHTMLタグを表示する際には、以下のようにそれぞれ別に””でくくる必要があります。

See the Pen document.write7 by ビズドットオンライン (@BizOnline) on CodePen.

そうしないと、以下のように文字列の一部として認識されてしまいます。

See the Pen document.write4 by ビズドットオンライン (@BizOnline) on CodePen.

初心者の方ほど、この点を誤ってしまうため注意が必要です。

document(オブジェクト).write(メソッド)

ここまでの解説で、「document.write()」を利用すれば指定した文字列を表示できることが分かりました。

この章では「document.write()」について少しだけ深堀して補足します。

document　⇒　オブジェクト

「document.write()」の「document」はJavaScriptの中の１つのオブジェクトです。

オブジェクトは、目に見える対象物のことを表し、具体的にこのページで解説したdocumentは「今見ているページ」のことを指し示しています。

write　⇒　メソッド

対して、write()は「documentオブジェクトのメソッド」のこと。

メソッドとは、オブジェクトに備えらている「動作」のことです。具体的に説明すると「write()」は、（）の中に指定した文字列を書き込む処理のことを表しています。

すなわち「document.write()」は、今見ているページに「（）の中の内容を書き込む」処理を表している処理であると理解できます。初心者の方であれば、オブジェクトとメソッドについてはまだ理解できていない、という方もいらっしゃるかもしれませんが、ここではなんとなくの意味をつかめればOKです。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

articleタグとは、ブログ記事・ニュース記事・投稿カードのように、それだけを取り出しても意味が通じる独立した内容を囲むタグです。

この記事では、まずページ構造のイメージを見てから、articleタグの使いどころ、sectionやdivとの違い、実務での書き方を整理します。

HTML：articleタグを書くと画面ではこう見える

articleタグは、ページ全体の中にある「単独で読める内容」を囲むときに使います。まずは、記事カードのソースコードと、ブラウザで見える表示結果を並べて確認してみましょう。

この画像で見ると、左側の <article> で囲んだ範囲が、右側では1つの記事カードとして見えていることが分かります。ただし articleタグは見た目をカードにするためのタグではありません。ページの中にある一つの内容を、意味のある単位として囲むためのタグです。

articleは「記事っぽい見た目」ではなく、「単体で読んでも意味があるか」で判断すると分かりやすいです。

articleタグは単独で成立する内容に使う

article タグは、文書やページの中で独立して配布・再利用できる内容を表すために使います。初心者向けに言い換えると、「この部分だけを切り出しても、一つの読み物として意味が分かるか」が判断の軸になります。

• ブログ記事の本文
• ニュースサイトの各ニュース
• 検索結果や記事一覧に並ぶ投稿カード
• ユーザーのレビューやコメント
• 商品紹介の中でも、単独で成り立つレビュー記事

逆に、ページ内の単なる装飾用の箱や、意味のないレイアウト調整には articleタグを使いません。その場合は divタグ のほうが自然です。

articleタグの基本的な書き方

基本形は、独立した内容全体を <article> で囲みます。中には見出しや本文、日付、画像などを入れられます。

<article>
  <h2>HTMLの基本を学ぶ</h2>
  <p>HTMLはWebページの構造を作るための言語です。</p>
  <a href="/web-design/html-basic/">続きを読む</a>
</article>

この例は、記事一覧に表示される1つの記事カードのように考えると分かりやすいです。タイトル、概要、リンクがまとまっており、このブロックだけを見ても「HTMLの基本を学ぶ記事への案内」だと分かります。

articleタグの中には、さらに header、section、footer などを入れて、記事の内部構造を分けることもあります。articleは大きな独立単位、その中の話題分けに section を使う、と考えると整理しやすいです。

section・div・mainとの違い

articleタグで迷う一番の原因は、section、div、mainとの違いです。それぞれ役割が違うため、「どれでも同じ箱」と考えると混乱します。

たとえばブログ記事ページなら、ページの主要部分を mainタグ で囲み、その中に記事本文として articleタグを置き、記事内の章を sectionタグ で分ける、という構造が考えられます。

実務でよく使うarticleタグの場面

実務でarticleタグを見かけやすいのは、ブログやニュース、メディアサイトです。特に記事一覧ページでは、同じ形のカードが複数並びます。各カードはそれぞれ別の記事を表すので、articleタグと相性がよいです。

<main>
  <article>
    <h2>HTMLとは？</h2>
    <p>HTMLの役割を初心者向けに解説します。</p>
  </article>

  <article>
    <h2>CSSとは？</h2>
    <p>CSSで見た目を整える基本を解説します。</p>
  </article>
</main>

このコードでは、2つのarticleがそれぞれ独立した記事カードになっています。カードの見た目はCSSで整えますが、HTML上では「それぞれが独立した記事の案内である」と分かる構造になっています。

articleタグを使わないほうがよい場面

articleタグは便利ですが、何でも囲めばよいわけではありません。単独で意味が通じない部分には向きません。

• デザイン調整だけの箱
• ボタンや画像を横並びにするだけのコンテナ
• ページ全体の主要部分を表したいだけの場所
• 記事内の章や小見出し単位の区切り

たとえば、カードを横並びにするためだけの外枠には divタグを使うほうが自然です。一方、その外枠の中に並ぶ1つ1つの記事カードは articleタグで表せる場合があります。この違いが見えてくると、セマンティックHTMLの理解がかなり進みます。

articleタグでよくあるミス

• レイアウト用の箱をすべて article にしてしまう
• 単独で読めない小さな部品にも article を使う
• article の中に見出しがなく、何のまとまりか分かりにくい
• section との違いを考えず、話題の区切りまで article にしてしまう
• CSSの見た目だけでタグを選んでしまう

タグ選びで迷ったら、「このまとまりだけを検索結果やRSS、記事一覧に出しても意味が通じるか」と考えてみてください。通じるならarticle候補、通じないならsectionやdivのほうが自然なことが多いです。

まとめ

articleタグは、HTMLの中で「独立した内容」を表すためのタグです。見た目を作るための箱ではなく、内容の意味をブラウザや読み手に伝えるためのタグとして考えると分かりやすくなります。

• articleタグは単独で読める内容に使う
• ブログ記事、ニュース、投稿カード、レビューなどと相性がよい
• sectionは話題の区切り、divは意味を持たない箱
• 迷ったら「この部分だけ取り出して意味が通じるか」で判断する

セマンティックHTML全体を学びたい場合は、まず セマンティックHTMLの基本 を押さえたうえで、sectionタグ、articleタグ、mainタグの役割を順番に整理すると理解しやすいです。

結論からいうと、inputタグとは、ユーザーに文字入力・選択・チェックなどをしてもらうためのフォーム部品を作るタグです。この記事では、まず「ソースコードを書くと画面でどう見えるか」を確認してから、inputタグの基本、よく使う属性、実務での使いどころまで整理します。

まず見てください：inputタグを書くと画面ではこう見える

最初に、ソースコードとブラウザでの表示結果を並べて見てみましょう。左側がHTMLに書くコード、右側がそのコードをブラウザで表示したときのイメージです。

この画像で見てほしいのは、<input type="email"> が画面上ではメールアドレス用の入力欄として表示され、<input type="checkbox"> がチェックボックスとして表示される点です。HTMLのコードは少し記号が多く見えますが、右側の画面と対応させると「どのコードがどの部品になっているか」が追いやすくなります。

inputタグは「入力欄を作るタグ」ですが、実務では「どんなデータとして送るか」までセットで考えると理解しやすいです。

結論：inputタグはフォーム部品を作るための基本タグ

input タグは、フォームの中でユーザーから情報を受け取るために使います。テキスト入力、メールアドレス入力、パスワード入力、チェックボックス、ラジオボタン、送信ボタンなど、かなり多くの部品を inputタグだけで作れます。

• type で入力欄の種類を決める
• name で送信時のデータ名を決める
• value で初期値や送信される値を指定する
• placeholder で入力例やヒントを表示できる

最初はすべてを暗記しようとしなくて大丈夫です。まずは typeは見た目と入力ルール、nameは送信データ名 と分けて覚えると、フォームのコードが読みやすくなります。

なぜinputタグだけではフォームとして足りないのか

inputタグだけを書けば、たしかに入力欄は表示できます。たとえば次のコードでも、ブラウザには文字を入力できる箱が出ます。

<input type="email" name="email">

ただし、このままだと画面を見た人には「何を入力する欄なのか」が伝わりにくくなります。メールアドレスなのか、ユーザー名なのか、問い合わせ内容なのか、入力欄だけでは判断しづらいからです。

そのため実際のフォームでは、labelタグで項目名を付け、必要に応じて入力例を placeholder で補います。inputタグは主役ですが、単独で完結するというより、labelやformと組み合わせて初めて使いやすいフォームになると考えるのが自然です。

inputタグの基本的な書き方

基本形はとてもシンプルです。type で入力欄の種類を指定し、name で送信データの名前を指定します。

<label for="user-name">氏名</label>
<input type="text" id="user-name" name="user_name">

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="sample@example.com">

この例では、id と label の for を同じ値にしています。これにより、項目名と入力欄がHTML上でも関連付けられます。画面を使う人にも、読み上げ機能を使う人にも、入力欄の意味が伝わりやすくなります。

type属性で入力欄の種類が変わる

inputタグで特に重要なのが type 属性です。同じ inputタグでも、typeの値を変えるだけで、文字入力欄、パスワード欄、チェックボックス、日付入力などに変わります。

たとえばメールアドレス欄には type="email" を使うと、ブラウザがメールアドレスらしい形式かどうかを簡単に確認してくれることがあります。スマートフォンでは入力しやすいキーボードが出る場合もあり、見た目以上に使いやすさへ影響します。

name属性とvalue属性は送信データを考えるための属性

フォームを学び始めたときにつまずきやすいのが、name と value の違いです。画面に入力欄を表示するだけなら見落としがちですが、フォームを送信する場面ではとても重要です。

<input type="checkbox" id="news" name="newsletter" value="yes">
<label for="news">お知らせメールを受け取る</label>

この例では、チェックされた状態でフォームが送信されると、newsletter=yes のように「name=value」の形でデータが送られます。つまり name は項目名、value はその項目の値です。

テキスト入力では、ユーザーが入力した文字が value として扱われます。一方、チェックボックスやラジオボタンでは、選ばれたときに送る値をあらかじめ value で指定しておくことが多いです。

実務でよく見るinputタグの例

実務でよく見るのは、問い合わせフォームや会員登録フォームです。ここでは、名前、メールアドレス、同意チェックを持つ小さなフォームを例にします。

<form action="/contact" method="post">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name" required>

  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" placeholder="sample@example.com" required>

  <label for="agree">
    <input type="checkbox" id="agree" name="agree" value="yes" required>
    個人情報の取り扱いに同意する
  </label>

  <button type="submit">送信する</button>
</form>

このコードでは、入力欄を作る inputタグだけでなく、フォーム全体を囲む formタグ、項目名を示す labelタグ、送信ボタンを作る buttonタグが一緒に使われています。実際のフォームでは、inputタグを単独で見るより、フォーム全体の中でどの役割を持っているかを見るほうが理解しやすいです。

inputタグでよくあるミス

• name を付け忘れて、送信データとして扱いにくくなる
• 項目名を placeholder だけに頼ってしまう
• メールアドレス欄なのに type="text" のままにする
• チェックボックスやラジオボタンの value を考えずに書く
• required だけで本格的な入力チェックが完了したと思い込む

特に大事なのは、placeholderをlabelの代わりにしないことです。placeholderは入力例を示すためには便利ですが、入力中に消えたり薄くなったりします。フォームの項目名は、labelタグで画面上に残すほうが親切です。

まとめ

inputタグは、HTMLフォームの中心になるタグです。最初は「入力欄を表示するタグ」と覚えて問題ありませんが、少し慣れてきたら type、name、value の役割まで分けて考えると、フォーム全体の理解が一気に進みます。

• inputタグはユーザー入力を受け取るフォーム部品を作る
• type属性で入力欄の種類が変わる
• name属性は送信時のデータ名になる
• labelタグと組み合わせると、使いやすく意味の伝わるフォームになる

次に学ぶなら、inputタグと一緒に使う labelタグ や、フォーム全体を作る formタグ を読むと、HTMLフォームの全体像がつかみやすくなります。

ただ、buttonタグは見た目だけで理解すると少し危険です。フォームの中では、type 属性によって押した後の動きが変わるため、何も考えずに書くと思わぬ送信が起きることがあります。結論からいうと、buttonタグはボタンを作るタグで、type属性によって送信・リセット・通常ボタンの役割を分けます。

buttonタグを書くと画面ではこう見える

buttonタグを理解するときは、最初に「コード」と「画面で見えるボタン」を対応させるのが近道です。左側がHTMLに書くコード、右側がブラウザで表示したときのボタンです。

この画像で見てほしいのは、画面上ではどれも「押せるボタン」に見える一方で、左側の type の値によって役割が変わる点です。submit はフォーム送信、reset は入力内容のリセット、button はそれ自体では送信しない通常ボタンとして扱います。

フォーム内のbuttonは、迷ったらまず type を書く。これだけで事故がかなり減ります。

結論：buttonタグはクリックできるボタンを作るタグ

button タグは、クリックできるボタンをHTML上に作るためのタグです。フォーム送信ボタンとして使うこともできますし、JavaScriptと組み合わせて画面を切り替えたり、メニューを開いたりするためにも使えます。

• <button type="submit">: フォームを送信する
• <button type="reset">: フォームの入力内容を初期状態に戻す
• <button type="button">: 送信せず、JavaScriptなどで動きを付ける

特にフォーム内で「送信しないボタン」を置くときは、type="button" を付ける意識が大切です。これを忘れると、クリックしたときにフォーム送信として扱われる場合があります。

buttonタグの基本的な書き方

基本形は、開始タグと終了タグの間にボタンに表示したい文字を入れます。

<button type="submit">送信する</button>

このように書くと、画面には「送信する」と書かれたボタンが表示されます。input type="submit" でも送信ボタンは作れますが、buttonタグは中にテキストだけでなく、アイコンや強調用の要素を入れやすい点が特徴です。

<button type="button">
  <span>メニューを開く</span>
</button>

初心者の段階では、まず「フォーム送信なら submit、送信しない画面操作なら button」と分けて覚えると実務で困りにくくなります。

type属性の3種類を整理する

buttonタグで一番大切なのは type 属性です。特にフォームの中では、typeを省略すると意図しない送信につながることがあるため、明示しておくのが安全です。

reset は便利そうに見えますが、入力済みの内容が一気に消えるため、実務のフォームではあまり気軽に置かないほうがよい場合もあります。ユーザーが間違って押すと、入力した内容を失ってしまうからです。

formタグと一緒に使うbuttonタグの例

問い合わせフォームの最後に送信ボタンを置く例を見てみましょう。フォーム全体は formタグ で囲み、入力欄には inputタグ を使います。

<form action="/contact" method="post">
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">送信する</button>
</form>

この場合、buttonタグには type="submit" を指定しています。クリックすると、formタグの action に指定された送信先へフォームデータを送る流れになります。

一方、入力欄の横に「パスワードを表示する」ボタンを置くような場合は、フォーム送信ではなく画面操作です。この場合は type="button" を使います。

<button type="button">パスワードを表示する</button>

input type submitとの違い

HTMLでは、送信ボタンを <input type="submit"> で作ることもできます。どちらも送信ボタンとして使えますが、書き方と柔軟性に違いがあります。

現在のWeb制作では、見た目やアクセシビリティを整えやすいこともあり、buttonタグを使う場面が多いです。ただし、どちらを使っても大事なのは「何のためのボタンか」をコード上で分かるようにすることです。

buttonタグでよくあるミス

• フォーム内で type を省略して、意図せず送信ボタンになる
• 画面操作用ボタンなのに type="submit" のままにする
• reset ボタンを置いて、ユーザーの入力内容を消しやすくしてしまう
• リンクの移動なのに buttonタグだけで作り、キーボード操作や意味が分かりにくくなる
• ボタン文言が「送信」だけで、何を送るのか分かりにくい

ボタンは小さな部品ですが、ユーザーにとっては次の行動を決める重要な目印です。「クリックできる見た目」だけでなく、送信なのか、取り消しなのか、画面操作なのかまで分かるように作ることが大切です。

まとめ

buttonタグは、HTMLでクリックできるボタンを作るためのタグです。特にフォームの中では、type属性によって押した後の動きが変わります。

• type="submit" はフォーム送信用
• type="reset" は入力内容を戻すためのもの
• type="button" はJavaScriptなどで動きを付ける通常ボタン
• フォーム内ではtypeを明示すると、意図しない送信を避けやすい

フォーム全体の理解を深めたい場合は、formタグ、inputタグ、labelタグ をセットで確認すると、画面部品の役割がかなり見えやすくなります。

結論からいうと、HTMLコメントアウトとは、コード内には残るけれどブラウザ画面には表示されないメモを書くための仕組みです。便利な一方で、ソースコードを見れば読めてしまうため、パスワードや秘密情報を書くのは絶対に避けます。

まず見てください：HTMLコメントは画面には表示されない

HTMLコメントアウトは、コード上には存在しますが、ブラウザの通常表示には出ません。まずは、左側のソースコードと右側の表示結果を見比べて、「コードにはあるのに画面には見えない」という関係を押さえましょう。

この画像で見てほしいのは、左側にある <!-- このメモは画面には出ません --> が、右側のブラウザ表示には出ていない点です。ただし、コメントは「消える」のではなく「表示されない」だけです。HTMLファイルの中には残るため、作業メモには向いていますが、秘密を隠す場所ではありません。

HTMLコメントは「自分やチームへのメモ」です。利用者に見せない説明書きとして使います。

HTMLコメントアウトは <!-- と --> で囲む

HTMLでコメントを書くときは、コメントにしたい文字を <!-- と --> で囲みます。

<!-- ここにコメントを書きます -->

この部分はブラウザ画面には表示されません。HTMLの構造を整理したり、一時的にコードを無効にしたり、他の人に意図を伝えたりするときに使います。

HTMLコメントアウトの基本的な使い方

HTMLコメントは、1行だけでも複数行でも使えます。まずは、ページ構造の目印として使う例を見てみましょう。

<!-- ヘッダーここから -->
<header>
  <h1>サイトタイトル</h1>
</header>
<!-- ヘッダーここまで -->

このように書くと、コードを読む人が「ここからここまでがヘッダー部分だ」と把握しやすくなります。特にHTMLが長くなったときや、複数人で編集するときには、コメントが道しるべになります。

複数行をまとめてコメントにすることもできます。

<!--
<section>
  <h2>一時的に非表示にしたい内容</h2>
  <p>あとで使う可能性がある説明文です。</p>
</section>
-->

ただし、長いコードをコメントアウトしたまま放置すると、あとから読みにくくなります。一時的な退避として使ったら、必要がなくなった時点で削除する運用にしたほうが安全です。

HTMLコメントアウトを使う場面

コメントアウトは、初心者の学習中にも実務にもよく出てきます。便利なのは、コードの意味や作業状況をHTML内に残せるところです。

たとえばLPや会社サイトのHTMLでは、セクションが長くなりがちです。コメントで「サービス紹介ここから」「料金表ここまで」と残しておくと、あとから修正する人が目的の場所を見つけやすくなります。

HTMLコメントアウトで秘密情報を隠してはいけない

HTMLコメントで一番大切な注意点は、秘密情報を絶対に書かないことです。コメントはブラウザの画面には出ませんが、HTMLソースには残ります。

<!-- NG例：公開ページに秘密情報を残さない -->
<!-- 管理者パスワード: example123 -->

このような情報は、ユーザー画面に見えていなくても、ページのソースを確認すれば見えてしまう可能性があります。パスワード、APIキー、個人情報、社内メモ、未公開情報などは、HTMLコメントに残してはいけません。

CSSやJavaScriptのコメントとの違い

HTML、CSS、JavaScriptでは、コメントの書き方が違います。HTMLでは <!-- --> を使いますが、CSSやJavaScriptでは別の記号を使います。

HTMLファイルの中にCSSやJavaScriptを書く場合でも、どの場所に書いているかでコメント記号が変わります。HTMLの本文部分ではHTMLコメント、CSSの中ではCSSコメント、JavaScriptの中ではJavaScriptコメントを使います。

HTMLコメントアウトでよくあるミス

• コメントの閉じ忘れで、以降のHTMLが表示されなくなる
• 秘密情報や社内向けメモを公開HTMLに残してしまう
• 不要になった古いコードをコメントのまま放置する
• CSSやJavaScriptのコメント記号と混同する
• コメント内で複雑なハイフンの並びを書いて、意図しない解釈になりやすくする

特に閉じ忘れは初心者がつまずきやすいポイントです。<!-- を書いたら、必ず対応する --> があるか確認しましょう。エディタの色分けが急に広い範囲へ変わった場合は、コメントの閉じ忘れを疑うと見つけやすいです。

まとめ

HTMLコメントアウトは、コードの中にメモを残したり、一時的にHTMLを画面へ表示しないようにしたりするための仕組みです。書き方は <!-- コメント --> です。

• HTMLコメントはブラウザ画面には表示されない
• コード上には残るため、秘密情報を書いてはいけない
• 構造の目印、作業メモ、一時的な無効化に使える
• CSSやJavaScriptとはコメント記号が違う

HTMLの基本的な書き方を続けて整理したい場合は、HTMLの書き方の基本 や HTMLタグ一覧 も合わせて確認すると、コード全体の読み方がつかみやすくなります。

結論からいうと、alt属性とは、画像が見えない・読み上げられる・読み込めないときに、画像の意味を文字で補うための属性です。SEOのためだけにキーワードを詰める場所ではなく、画像が伝えている内容をテキストで伝えるために使います。

まず見てください：alt属性は画像の意味を文字で補う

alt属性の役割は、画像の代わりになる説明文を用意することです。まずは、imgタグにalt属性を書いたコードと、ブラウザ側で画像の意味がどう補われるかを並べて見てみましょう。

この画像で大切なのは、alt属性が「画像ファイルの名前」ではなく「画像が伝えている意味」を補う点です。左側の alt="ログイン画面の入力例" は、右側の画像が見えない・読み上げられる場面でも、何の画像なのかを伝えるための文章です。装飾だけの画像なら、例のように alt="" と空にすることもあります。

alt属性は「この画像が見えなかったら、何と説明すれば伝わるか」で考えると書きやすいです。

結論：alt属性は画像の代替テキストを書く場所

alt 属性は、imgタグ に書く代替テキストです。代替テキストとは、画像そのものが使えないときに、画像の役割や内容を文字で伝えるための説明です。

<img src="contact-form.png" alt="問い合わせフォームの入力例">

この例では、画像が「問い合わせフォームの入力例」を示していることをalt属性で伝えています。画像ファイル名の説明ではなく、ページを読んでいる人にとって必要な意味を言葉にしている点が重要です。

alt属性が必要な理由

alt属性が必要な理由は、大きく3つあります。どれも「画像が見える人だけに情報が偏らないようにする」ためのものです。

• 画像が読み込めないときに内容を補える
• スクリーンリーダーなどで画像の意味を伝えやすくなる
• 検索エンジンにも画像の内容を理解してもらいやすくなる

ただし、SEOだけを目的に不自然なキーワードを詰め込むのは逆効果です。alt属性は、あくまで画像の代わりになる説明です。ページの内容と関係ない言葉や、同じキーワードの連続は避けます。

alt属性の基本的な書き方

基本形は、imgタグの中に alt="説明文" を書きます。説明文は長すぎず、画像の意味が伝わる自然な日本語にします。

<img src="login-screen.png" alt="ログイン画面でメールアドレスとパスワードを入力する例">

このように書くと、画像が表示されない状況でも「ログイン画面の入力例を示す画像だ」と分かります。単に alt="画像" や alt="login-screen" とするより、読者にとって意味が伝わりやすくなります。

画像の種類ごとにaltの書き方を変える

alt属性は、すべての画像に同じテンションで説明を書けばよいわけではありません。画像がページ内でどんな役割を持っているかによって、書き方を変えます。

装飾画像に長い説明を入れると、読み上げ時に余計な情報が増えてしまいます。逆に、内容を伝える画像のaltが空だと、画像を見られない人に必要な情報が届きません。画像の役割を見て、説明するか空にするかを判断します。

実務で使うalt属性の例

ブログや企業サイトでは、alt属性を書く場面が多くあります。たとえば記事内の説明画像、商品写真、サービス紹介の図、操作手順のスクリーンショットなどです。

<img src="html-form-example.png" alt="HTMLフォームで氏名とメールアドレスを入力する例">

<img src="service-flow.png" alt="問い合わせから契約までの流れを示す図">

<img src="decoration-line.png" alt="">

1つ目と2つ目は、画像そのものが情報を持っているため説明を書いています。3つ目は装飾線のような画像を想定しているため、空のaltにしています。すべての画像へ機械的に文章を入れるのではなく、画像の役割に合わせるのがポイントです。

title属性やファイル名との違い

alt属性は、title属性や画像ファイル名とは役割が違います。混同しやすいので、ここで整理しておきます。

たとえば img001.png というファイル名では、画像の意味はほとんど伝わりません。title属性も補足には使えますが、alt属性の代わりとして考えないほうが安全です。

alt属性でよくあるミス

• alt="画像" のように意味が伝わらない説明にする
• 画像と関係ないSEOキーワードを詰め込む
• 装飾画像にも長い説明を入れてしまう
• 内容を伝える画像なのに alt="" にしてしまう
• title属性を書いたからalt属性はいらないと思い込む

alt属性は、短ければよい、長ければよいというものではありません。大事なのは、画像を見られない人にもページの意味が伝わることです。迷ったら「この画像が表示されなかったら、どんな一文があれば困らないか」と考えてみてください。

まとめ

alt属性は、imgタグで表示する画像の意味をテキストで補うための属性です。画像が見えない状況、読み上げ環境、検索エンジンの理解などに関わるため、HTMLを書くうえでとても重要です。

• alt属性は画像の代替テキストを書く場所
• 画像のファイル名ではなく、画像が伝える意味を書く
• 装飾だけの画像では alt="" を使うことがある
• SEOキーワードの詰め込みではなく、自然な説明を意識する

画像表示そのものの基本を復習したい場合は、imgタグの解説 や HTML属性の基本 も合わせて読むと、alt属性の位置づけがより分かりやすくなります。

そこで最初に、labelタグの定義から入るのではなく、実際のフォームの見え方を比べてみましょう。labelタグは地味なタグですが、フォームの伝わりやすさをかなり大きく変えます。

まず見てください：labelなしとlabelありではフォームの伝わり方が変わる

下の画像は、左が label を使わずに入力欄だけを置いた例、右が label を使って項目名を明示した例です。どちらもフォームとしては表示されますが、ユーザーが受け取る情報量には差があります。

この画像で見てほしいのは、単に「右のほうがきれい」という話ではないことです。左側のフォームは入力欄自体は表示されていますが、項目名が画面に残りにくく、何を入力する欄なのかが伝わりにくくなっています。一方で右側のフォームは、メールアドレスやパスワードといった項目の意味が画面上にはっきり残るので、初めて見た人でも迷いにくくなります。

• 左: 入力欄はあるが、項目名を placeholder に頼っていて意味が弱い
• 右: label があるので、何の欄かが見た瞬間に分かる
• チェックボックスも、説明文が近くにあることで操作しやすく見える

つまり labelタグは、フォームの見た目を飾るためのタグではなく、フォームに意味を与えて、迷わず使える画面に近づけるためのタグです。

labelタグは「フォームに説明書きを付けるタグ」と考えると、最初は理解しやすいです。

結論：labelタグはフォーム部品に「この欄の意味」を与えるタグ

結論からいうと、labelタグとは、入力欄やチェックボックスなどのフォーム部品に対して「これは何を入力・選択する場所か」を伝えるためのタグです。表示用の文字を置くだけでなく、フォームの理解しやすさ、クリックしやすさ、アクセシビリティにも関わります。

• 入力欄やチェックボックスに項目名を与えられる
• label の文字をクリックしたときにも対象を操作しやすくできる
• スクリーンリーダーなどにも項目の意味を伝えやすくなる

特に会員登録フォーム、問い合わせフォーム、アンケート画面のように、項目が複数並ぶ場面では labelタグの有無がそのまま使いやすさの差になります。

なぜ入力欄だけでは足りないのか

ここで一度、なぜ labelタグが必要になるのかを前提から整理します。ブラウザは input タグを書けば入力欄を表示してくれますが、その入力欄が「氏名」なのか「メールアドレス」なのか「自由記述」なのかまでは、箱だけ見ても分かりません。

<input type="text" name="email">

このコードでも入力欄は表示されます。ですが、問い合わせフォームや会員登録画面でこれだけが置かれていたら、ほとんどの人は「これは何を入れる欄だろう」と迷います。つまりフォームでは、入力欄を作ることよりも先に、その欄の役割を相手に伝えることが大切です。

さらに初心者の方がやりがちなのが、項目名を placeholder だけで済ませてしまう書き方です。ただ、placeholder は入力が始まると薄くなったり消えたりするので、項目名そのものを支える役割には向きません。だからこそ、項目名をきちんと残す labelタグが必要になります。

表示結果とコードを対応させて見ると、labelの役割が分かりやすい

次に、先ほどの「labelあり」のフォームが、どんなコードでできているのかを見てみましょう。ここでは、メールアドレス欄、パスワード欄、チェックボックスという初心者にも身近な例に絞ります。

<label for="user-email">メールアドレス</label>
<input type="email" id="user-email" name="user-email" placeholder="sample@example.com">

<label for="user-password">パスワード</label>
<input type="password" id="user-password" name="user-password">

<label for="agree">利用規約に同意する</label>
<input type="checkbox" id="agree" name="agree">

このコードで大切なのは、見える文字と、フォーム部品そのものが分かれている点です。メールアドレスやパスワードという文字は label で表し、実際に入力を受け取る箱は input で表しています。つまり HTML の中で、「説明する役割」と「入力してもらう役割」がきちんと分かれているわけです。

このように、コードを表示結果に対応させて見ると、labelタグは「文字を追加している」のではなく、フォームの意味を見える形で残しているのだと分かります。

labelタグとは何か

label タグは、フォーム部品に対するキャプション、つまり説明文や項目名を表すタグです。対象になるのは、テキストボックス、チェックボックス、ラジオボタン、プルダウン、テキストエリアなどのフォーム要素です。

たとえば「お名前」「メールアドレス」「利用規約に同意する」といった文言は、見た目の文字として置くだけでも人間は何となく理解できます。ですが HTML として正しく関連付けておかないと、ブラウザや支援技術から見ると、単に近くに置かれた文字でしかありません。labelタグは、その説明文をフォーム部品と正式に結び付ける役割を持っています。

MDN でも、label と input を関連付けることで、スクリーンリーダーがラベルを読み上げやすくなり、さらにラベルをクリックして入力欄をアクティブにできる点が利点として説明されています。つまり labelタグは、見た目の補助ではなく、フォームを正しく使ってもらうための土台です。

for と id は、label と input を結び付けるために使う

ここまでで「label が項目名を表す」ことは見えてきたと思います。次に知っておきたいのが、label と input が HTML の中でどう結び付くかです。初心者の方が最初に覚えるなら、for 属性と id 属性を対応させる書き方がいちばん分かりやすいです。

図の左が label for="email"、中央が input id="email" です。この2つの値が一致すると、「この label はこの input を説明している」という関係が HTML 上で成立します。その結果として、ラベル文字をクリックしたときに入力欄へ移動しやすくなったり、読み上げ時に意味が伝わりやすくなったりします。

• for: どの入力欄を説明するのかを label 側で指定する
• id: 入力欄の識別子を input 側で持つ
• 両方の値が一致すると、label と input が関連付く

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

この書き方なら、コードを後から読み返したときも関係が追いやすいです。input を label の中に入れる書き方もありますが、初心者のうちはまず for と id を使う基本形から覚えるほうが混乱しにくいです。

実務では、会員登録フォームやチェックボックスで特に効く

labelタグは勉強用サンプルよりも、実際の画面でこそ価値がはっきり出ます。ここでは初心者の方がイメージしやすいように、よくある実務場面に結び付けて見てみます。

会員登録フォームや問い合わせフォーム

会員登録フォームでは、氏名、メールアドレス、パスワードのように似た入力欄が縦に並びます。ここで label がないと、どの欄に何を入れるのかが一目で分からず、入力ミスが起きやすくなります。問い合わせフォームでも、「件名」「本文」「返信先メールアドレス」といった項目は、項目名が残っているからこそ迷わず書き進められます。

とくに入力項目が3つ、4つと増えてくると、label は「あると丁寧」ではなく「ないと不親切」な要素になっていきます。

チェックボックスやラジオボタン

チェックボックスやラジオボタンでは、labelタグのありがたみがさらに分かりやすいです。小さな四角や丸だけを正確に押すのは意外と大変ですが、label で関連付けておくと、説明文が近くにあることで何の選択肢か分かりやすくなり、操作のストレスも減ります。

<label for="agree">利用規約に同意する</label>
<input type="checkbox" id="agree" name="agree">

利用規約への同意、メール配信の希望、性別の選択肢など、実務のフォームでよく出てくる部品ほど label の効果が見えやすいです。つまり実務では、labelタグは「正しいHTMLを書くためのお作法」ではなく、入力ミスや操作ストレスを減らすための実用品として使われています。

placeholderとの違いを分けて考えると混乱しにくい

初心者の方がよく混乱するのが、「placeholder があるなら label はいらないのでは？」という点です。ここは役割をきちんと分けると理解しやすくなります。

placeholder は便利ですが、入力が始まると消えたり薄く見えたりするため、項目名そのものを担う役割には向きません。MDN でも、placeholder を label の代わりとして使ってはいけないと説明されています。だから覚え方としては、label は必須の説明、placeholder は任意の補足で十分です。

たとえば「メールアドレス」という label の下に、placeholder として sample@example.com を入れるのは自然です。逆に label を消して placeholder だけにすると、入力中に「この欄は何だっけ？」となりやすくなります。

よくあるミスと注意点

• for の値と id の値が一致していない
• 入力欄の近くに文字を書いただけで、labelタグを使っていない
• 複数の入力欄で同じ id を使ってしまう
• placeholder を label の代わりにしてしまう
• label の中に余計なリンクやボタンを入れて、どこが何を説明しているのか曖昧になる

特に見落としやすいのが、入力欄の近くに文字を書いただけで満足してしまうケースです。人間の目では近くにある文字を見て何となく理解できますが、HTML としては「説明文がたまたま近くにある」だけで、正式な関連付けがありません。初心者のうちは、見た目で判断するより、label と input をセットで書く癖を付けておくのがおすすめです。

フォーム全体の役割を先に整理したい方は、formタグとは？ や、HTMLの基本構造を見直したい方向けの HTMLの書き方の基本 も一緒に読むと、labelタグの位置づけがさらに分かりやすくなります。

まとめ

labelタグは派手ではありませんが、フォームを「表示できるだけのもの」から「前提知識がない人でも迷わず使えるもの」に近づける重要なタグです。まずは for と id を使った基本形から練習して、入力欄のそばに文字を置くだけで終わらせず、入力欄と説明をきちんと結び付ける意識で書いてみてください。

なぜなら、sectionタグは label のように画面上の見え方が大きく変わるタグではない からです。

そこで今回は、定義から入るのではなく、まず「1ページの中で section をどこに使うのか」を実例で見てから意味を整理します。sectionタグは、見た目を装飾するためのタグではなく、ページの中にある話題の区切りを表すためのタグです。

まず見てください：section は 1 ページの中の話題ごとに使う

下の画像は、サービス紹介ページをイメージした例です。ページ全体の主内容があり、その中に「特徴」「料金プラン」「よくある質問」といった話題のまとまりが並んでいます。このような 同じページの中で話題が切り替わる単位 を section と考えると、かなり分かりやすくなります。

この画像で見てほしいのは、section が「見た目の箱」ではなく「話題の単位」を表している点です。ページ全体は main のイメージで、その中に「特徴」「料金プラン」「FAQ」など、1つのテーマとして読めるまとまりが入っています。section は、このまとまりごとに「ここからここまでが同じ話題です」と示すために使います。

• ページ全体の主内容は main で考える
• その中にある話題ごとの区切りが section
• 各 section には見出しがあると、何のまとまりかが一目で伝わる

section は「ただ囲むタグ」ではなく、「このページの中で話題がここで切り替わります」と示すタグです。

結論：sectionタグは 1 ページ内の話題のまとまりを表すタグ

結論からいうと、sectionタグとは、文書やページの中にある「意味のある話題のまとまり」を表すためのタグです。特徴、料金、よくある質問、概要、手順、注意点のように、1つのテーマとして読める単位を分けたいときに向いています。

つまり、sectionタグは「見た目を整えるための箱」ではなく、ページの内容を章や節のように分けるためのタグです。

前提：section は見た目を変えるタグではないので、初心者は迷いやすい

sectionタグが分かりにくい理由は、使ってもブラウザ上の見た目が劇的に変わるわけではないからです。<div> で囲んでも、<section> で囲んでも、CSS を当てなければ表示結果はかなり似ています。

だから初心者のうちは、「見た目が同じなら div でよいのでは？」と感じやすいです。ただし HTML では、見た目だけでなく その部分が何を表しているか も大切です。MDN でも、section は一般的なセクションを表す要素で、スタイル用ラッパーに過ぎないなら div を使うべきだと説明されています。

つまり section を理解するコツは、「見た目で違いを探すこと」ではなく、「この部分は同じ話題として読めるまとまりか」を考えることです。

基本の書き方は、見出し付きのまとまりを section で囲む形

もっとも基本的で分かりやすい書き方は、見出しと本文を1つのまとまりとして section で囲む方法です。サービス紹介ページや記事本文の一部をイメージすると自然に理解できます。

<main>
  <section>
    <h2>特徴</h2>
    <p>このサービスの特徴を紹介します。</p>
  </section>

  <section>
    <h2>料金プラン</h2>
    <p>月額料金や無料プランを説明します。</p>
  </section>

  <section>
    <h2>よくある質問</h2>
    <p>導入前によくある質問をまとめます。</p>
  </section>
</main>

この例では、ページ全体の主内容が main で、その中に3つの話題のまとまりがあります。各まとまりは、それぞれ独立した話題として読めるので section を使うのが自然です。見出しが入っているので、「このまとまりは何について書いているか」もすぐ分かります。

MDN でも、section には少数の例外を除いて見出しを置くよう案内されています。初心者のうちは、section を使うなら見出しもセットで考えると覚えておくと失敗しにくいです。

div・article・main との違いをページの役割で整理すると分かりやすい

sectionタグが難しく感じる最大の理由は、似たタグが近くにあるからです。ここは「見た目」ではなく「役割」で分けると整理しやすくなります。

たとえばブログ記事ページなら、記事本文全体が main の中にあり、その中に「概要」「手順」「注意点」といった section が入るイメージです。逆に、ブログ記事1本そのものを表したいなら article が向いています。横並びのレイアウトや装飾のために囲むだけなら div のほうが自然です。

迷ったときは、次のように考えるとかなり整理しやすいです。1ページの中の話題なら section、単体で完結する記事なら article、見た目のためだけなら div です。

section を使うと自然な場面

sectionタグは抽象的に見えますが、実際にはかなり身近な場面で使いやすいタグです。特に次のようなページでは、section の考え方がそのまま活きます。

• サービス紹介ページの「特徴」「料金」「導入事例」「よくある質問」
• 会社紹介ページの「事業内容」「実績」「採用情報」「お問い合わせ案内」
• ブログ記事の「概要」「手順」「注意点」「まとめ」
• ドキュメントページの「前提」「設定方法」「確認方法」

共通しているのは、どれも「1ページの中に複数の話題がある」ことです。section は、こうしたページを意味のある単位に分けて考えるときにとても役立ちます。

逆に、単なるカードの横並びや余白調整のために囲むだけなら、section より div のほうが自然です。意味ではなくレイアウトが目的だからです。

よくあるミスと迷いどころ

• 見た目の囲みとしてだけ section を使っている
• 何の話題か説明できないブロックまで section にしている
• 独立した記事なのに section だけで済ませている
• 見出しのない section を大量に並べて、まとまりの意味が見えにくくなっている

一番大切なのは、「この部分は何のまとまりですか？」と聞かれたときに答えられることです。答えられるなら section の可能性がありますし、答えられないなら div のほうが自然なことが多いです。

また、MDN では section よりも具体的な意味を持つ要素があるなら、そちらを優先すると説明されています。たとえばページの主内容なら main、独立した記事なら article、ナビゲーションなら nav です。section は便利ですが、何でも section にすればよいわけではありません。

まとめ

sectionタグは派手なタグではありませんが、セマンティックHTMLを理解するうえでとても大事です。まずは「1ページの中で話題が変わる場所を区切るタグ」と覚え、サービス紹介ページや記事本文の構成を section の視点で見てみると、使いどころがかなり掴みやすくなります。

関連する考え方も一緒に整理したい方は、セマンティックHTMLとは？、divタグの使い方、mainタグの意味と使い方 も続けて読むと、役割の違いがさらに見えやすくなります。