HTMLは「タグ」と呼ばれる記号を使って、文章の意味や構造をブラウザに伝える言語です。タグとは、< と > で囲まれたキーワードのことで、たとえば <p> や <h1> のような記述を指します。このタグには「開始タグ」と「終了タグ」という2つのペアがあり、多くのHTML要素はこの2つで1組になって画面上のまとまりを表現します。ここで言う「要素」とは、タグとその中身（テキストや他のタグ）をひとまとめにした単位のことです。
HTMLにおける開始タグと終了タグの基本構造
開始タグは、要素がどこから始まるかを示す印です。書き方はシンプルで、<p> や <div> のように、< のあとにタグ名（要素名とも呼びます）を書き、最後に > を付けます。タグ名は基本的に英単語で、p は段落（paragraph）、h1 は一番大きな見出し（heading level 1）といった意味があります。開始タグの中には、「属性」と呼ばれる追加情報を書くこともできます。属性とは、class や id のように要素に役割や名前を持たせるための情報で、<p class="text"> のように、開始タグの中にスペースを空けて書き足します。
終了タグは、要素がどこまで続くかを示す印です。開始タグとの違いは、タグ名の前にスラッシュ / が付くことだけです。たとえば、段落要素なら <p> が開始タグ、</p> が終了タグです。書き方のルールは、</タグ名> という形になります。この終了タグがあることで、ブラウザは「ここでこの要素が終わった」と理解できます。タグ名は開始タグと完全に同じである必要があり、大文字と小文字の区別は通常しませんが、統一して小文字で書くのが一般的です。
開始タグと終了タグで囲まれた部分を「要素の内容」と呼びます。たとえば、<p>こんにちは</p> というコードでは、<p> が開始タグ、</p> が終了タグ、「こんにちは」が要素の内容です。この3つをまとめて「p要素」と呼びます。実際のHTMLでは、要素の内容には文字だけでなく、別のタグ（別の要素）を含めることもできます。このように、要素の中に要素が入る構造を「入れ子」や「ネスト」と呼びますが、これは後の見出しで詳しく扱う概念です。
もう少し長めの例として、次のようなHTMLの一部を考えてみます。
<h1>私のブログ</h1>
<p>これは最初の段落です。</p>
<p>これは2つ目の段落です。</p>ここでは <h1> と </h1> に挟まれた「私のブログ」が見出し要素、2つの <p> と </p> に挟まれた文章がそれぞれ段落要素です。このように、開始タグと終了タグは、どこからどこまでが見出しなのか、どこからどこまでが段落なのかを明確に示しています。ブラウザはこの情報をもとに、太字にしたり大きな文字にしたり、行間を空けたりして表示を変えます。
HTML文書全体も、同じ考え方で構造化されています。一般的なHTMLファイルは、<!DOCTYPE html> という宣言のあとに、<html> 要素、<head> 要素、<body> 要素といった大枠の要素で構成されます。例えば次のようになります。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>見出し</h1>
<p>本文です。</p>
</body>
</html>ここでも、<html> と </html>、<head> と </head>、<body> と </body> がそれぞれペアになっており、文書全体、頭の部分、画面に表示される部分の範囲を示しています。開始タグと終了タグのペアを見ていくと、HTML文書が入れ子構造でできていることが分かります。
開始タグと終了タグには、書く位置や順番に関する暗黙の前提があります。開始タグを書いたら、その内側に内容や他の要素を書き、そのあとに対応する終了タグを書きます。この順番が崩れると、ブラウザはどこまでが1つの要素なのか判断しづらくなり、意図しない表示になったり、開発ツールでエラー表示になったりします。そのため、開始タグを書いたら「必ず対応する終了タグも用意する」という意識を持つことが、HTMLを書くうえでの基本的な習慣になります。
開始タグと終了タグが果たす役割とHTML文書への影響
開始タグと終了タグは、HTML文書の中で「ここからここまでが1つの意味のかたまりです」という境界線を示す役割を持っています。HTMLはブラウザに対して文書構造を伝えるためのマークアップ言語であり、マークアップとは「目印を付けること」を意味します。開始タグと終了タグは、まさにその目印そのものであり、ただ見た目を変えるだけではなく、文書の意味や階層をブラウザに伝える大切な部品です。
開始タグは、要素の始まりを示します。たとえば <p> と書くことで、「これから段落が始まります」とブラウザに伝えます。この開始タグには、必要に応じて属性を追加することができます。属性とは、要素に追加情報を与える仕組みで、class、id、style などが代表的です。例えば <p class="lead"> のように書くと、この段落は「lead」というグループに属している、という情報をブラウザやスタイル指定に伝えることができます。属性はあくまで「補足情報」ですが、見た目の変更やJavaScriptとの連携において重要な役割を果たします。
終了タグは、要素の終わりを示します。書き方は開始タグとほぼ同じですが、タグ名の前に / を付けて </p> のように書きます。終了タグがあることで、ブラウザは「ここで段落が終わった」と理解し、その範囲を1つの要素として処理します。終了タグが抜けていると、ブラウザはどこまでがその要素なのか判断に迷い、続くテキストや要素までも同じ要素の一部だと解釈してしまうことがあります。
開始タグと終了タグの役割は、単に「見た目を変える」ことにとどまりません。たとえば検索エンジンやスクリーンリーダー（視覚障害のある方が使う音声読み上げソフト）は、HTMLのタグ構造を手がかりにして文書の重要部分や意味を理解します。<h1>〜<h6> の見出しタグで囲まれたテキストは、文書の見出しとして扱われ、章立てやページの概要を理解するための材料になります。このとき、開始タグと終了タグが正しく書かれていないと、どこまでが見出しなのかが曖昧になり、検索エンジンやスクリーンリーダーに正しく情報が伝わりません。
HTML文書に与える影響という観点では、開始タグと終了タグは「レイアウト」と「意味付け」の両方に関わります。例えば次の2つのコードを比べると、その違いが分かりやすくなります。
<p>こんにちは<b>世界</b>！</p><p>こんにちは<b>世界！</p></b>1つ目の例では、<b> と </b> で「世界」だけが太字になるように囲まれています。2つ目の例ではタグの閉じ方が入れ替わっているため、ブラウザはタグ構造を自動的に修正しようとしますが、多くの場合、意図した表示にならなかったり、開発ツールでエラー表示になったりします。このように、開始タグと終了タグの位置関係は、見た目だけでなくHTMLの解釈そのものに大きな影響を与えます。
また、開始タグと終了タグは要素の「入れ子構造（ネスト）」を表現するためにも重要です。HTMLでは、ある要素の中に別の要素を入れることができますが、そのときは必ず外側の要素の開始タグのあとに内側の開始タグを書き、内側の終了タグを外側の終了タグより先に書くという順番を守る必要があります。例えば次のようなコードです。
<p><strong>大事なお知らせ</strong>をご確認ください。</p>この例では、<p>〜</p> の中に <strong>〜</strong> が入っています。ここで順番を間違え、<p><strong>大事なお知らせ</p></strong> のように書いてしまうと、HTMLの構造が崩れ、ブラウザは内部的に修正を試みますが、予期しないレイアウトや挙動の原因になります。
さらに、開始タグと終了タグは、スタイルシート（CSS）との連携にも深く関わっています。CSSでは、「どの要素にどんな見た目を適用するか」を指定しますが、その対象はタグ名やクラス名、idなどで指定されます。例えば、p 要素すべてに文字色を変えるスタイルを指定した場合、<p> と </p> で正しく囲われた範囲だけがそのスタイルの適用範囲になります。終了タグを忘れてしまうと、意図しない範囲までスタイルが広がって見た目がおかしくなったり、逆にスタイルが一部のテキストにだけ適用されなかったりします。
開始タグと終了タグの整合性は、HTML文書の「保守性」にも影響します。保守性とは、後から修正や追加をしやすい状態かどうかを指します。タグがきちんとペアになっている文書は、インデント（行の字下げ）をそろえたときに構造が一目で分かるため、他の人がコードを読んだときにも理解しやすくなります。逆に、終了タグの抜けや順番の乱れが多い文書は、少し変更しただけでレイアウト全体が崩れたり、エラーの原因を探すのに時間がかかったりします。
コードエディタやブラウザの開発者ツールには、開始タグと終了タグの対応を補助してくれる機能が備わっていることが多いです。カーソルを開始タグに合わせると対応する終了タグがハイライトされたり、自動で終了タグを入力してくれたりする機能は、開始タグと終了タグの関係がHTMLにとってどれほど重要かを示しています。それだけ、このペアがHTML全体の正しさと読みやすさを支えていると言えます。
よく使われる開始タグと終了タグの具体例
HTMLでは、開始タグと終了タグが1組になって、画面上のさまざまなパーツを表現します。ここでは、学習の初期段階でよく使われるタグを中心に、具体的な書き方と簡単な役割を整理してご紹介します。タグの意味が分かると、コードを読むときにも「これは何をしているのか」が自然とイメージしやすくなります。
まず、文書全体を囲む大枠として必ず登場するのが、<html> 要素です。
<html>
...
</html><html> が開始タグ、</html> が終了タグです。このペアで、HTML文書全体の範囲を示します。この中に、後述する <head> や <body> といった要素を入れていきます。
次に、ページの「頭脳」にあたる部分を表すのが <head> 要素です。
<head>
<title>サンプルページ</title>
</head><head> 内には、ページタイトルを指定する <title> 要素や、スタイルの指定、文字コードの指定など、画面には直接表示されない設定情報が入ります。<title> と </title> で囲まれた内容は、ブラウザのタブやウィンドウのタイトルとして表示されます。
ユーザーが実際に画面上で見る内容を囲むのが <body> 要素です。
<body>
<h1>見出し</h1>
<p>本文の段落です。</p>
</body><body> と </body> の間に書かれた要素が、ページの本文として表示されます。ここから先は、<body> の中でよく使われるタグの具体例を見ていきます。
見出しタグ（<h1>〜<h6>）
見出しは、文章のタイトルや章の見出しを表す要素です。
<h1>サイトのタイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3><h1> が最も重要で大きな見出し、<h6> が最も小さな見出しという位置付けです。それぞれ開始タグと終了タグで囲むことで、「ここが見出し部分です」とブラウザに伝えます。
段落タグ（<p>）
文章のまとまりを表す基本的なタグが <p> 要素です。
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p><p> と </p> で囲まれた部分が1つの段落として扱われ、段落ごとに上下に余白がつきます。
強調タグ（<strong> と <em>）
文字を強調したいときに使うのが <strong> と <em> です。
<p>これは<strong>とても重要な</strong>情報です。</p>
<p>ここは<em>少し強調</em>したい部分です。</p><strong> は「より強い重要性」を表す意味的な強調、<em> は「文脈の中での強調」を表します。どちらも開始タグと終了タグで囲んだ部分だけに効果が適用されます。
リンクタグ（<a>）
別のページや同じページ内の別の位置に移動するためのリンクを作るのが <a> 要素です。<a> はアンカー（錨）を意味します。
<a href="https://example.com">サンプルサイトへ移動</a>href は属性で、「どこへ飛ぶか」を表すURLを指定します。<a> と </a> に挟まれた部分がリンクとしてクリックできる文字になります。
区切り用のブロック要素（<div>）とインライン要素（<span>）
レイアウトやグループ分けによく使われるのが <div> と <span> です。
<div class="container">
<h2>セクションタイトル</h2>
<p>このセクションの説明文です。</p>
</div><div> は「ブロック要素」と呼ばれ、段落やセクションなど、縦方向に積み重なるかたまりを作るのに使います。一方で <span> は「インライン要素」と呼ばれ、文章の一部分だけをグループ化したいときに使います。
<p><span class="keyword">重要なキーワード</span>を覚えておきましょう。</p>どちらも開始タグと終了タグで囲む点は同じですが、画面上での振る舞い（改行されるかどうかなど）が異なります。
リストタグ（<ul>、<ol>、<li>）
箇条書きを作るときには、<ul>（順不同リスト）や <ol>（番号付きリスト）と、それぞれの項目を表す <li>（リストアイテム）を使います。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul><ol>
<li>会員登録をする</li>
<li>メールを確認する</li>
<li>ログインする</li>
</ol><ul> または <ol> の開始タグと終了タグの間に、複数の <li> 要素を並べます。それぞれの <li> も、開始タグと終了タグで1つの項目の範囲を示します。
テーブルタグ（<table>、<tr>、<th>、<td>）
表を作るときには、いくつかのタグを組み合わせて使います。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>山田</td>
<td>20</td>
</tr>
</table><table>：表全体<tr>：行（テーブルロー）<th>：見出しセル（ヘッダ）<td>：通常のセル
これらもすべて開始タグと終了タグのペアで構成されており、どこからどこまでが1行なのか、1つのセルなのかを明確にしています。
このように、HTMLでは多くの要素が「開始タグ＋内容＋終了タグ」という同じパターンで書かれます。具体例を意識しながらタグを見ることで、構造の共通点が理解しやすくなります。
タグのネスト構造と正しい入れ子の作り方
HTMLでは、多くの要素が単独で並ぶのではなく、ある要素の中に別の要素が入る「入れ子（ネスト）構造」で記述されます。ネストとは、要素Aの中に要素Bが入り、さらにその中に要素Cが入る、といった階層構造のことです。文章で言えば、「章の中に節があり、その中に段落がある」といったイメージに近いです。ブラウザは、このネストされた構造をもとに文書の意味や関係性を解釈し、表示を行います。
正しいネストの基本ルールは、「外側の要素を先に開き、内側の要素をその中に書き、最後は内側から順に閉じる」というものです。具体的には次のような形になります。
<p>これは <strong>とても重要な</strong> 文です。</p>この例では、まず <p> の開始タグがあり、その中に <strong> が入っています。そして、先に内側の </strong> を閉じ、そのあとで外側の </p> を閉じています。開始タグと終了タグの順番が「外側→内側→内側→外側」と階層を保っている状態が、正しいネストです。
ネストが崩れた例も見てみます。
<p>これは <strong>とても重要な</p> 文です。</strong>このように、外側の <p> より先に </p> を閉じてしまい、あとから </strong> を閉じる書き方は間違いです。タグ同士が「交差」している状態になり、ブラウザは内部的に修正を試みますが、意図したとおりに表示されなかったり、開発ツールでエラーとして表示されたりします。この「交差しない」ことがネスト構造で最も大事なポイントです。
ネスト構造を意識するときには、「親要素」と「子要素」という考え方が役に立ちます。親要素とは、他の要素を内側に含んでいる要素のこと、子要素とは、その内側に入っている要素のことです。先ほどの例では、<p> が親要素で <strong> が子要素にあたります。この親子関係が多段階に重なっていくことで、ページ全体の階層が形作られます。
<div class="article">
<h2>記事のタイトル</h2>
<p><strong>重要なポイント</strong>を説明する段落です。</p>
</div>このコードでは、<div class="article"> が一番外側の親要素で、その中に <h2> と <p> が子要素として入っています。さらに <p> の中には <strong> が子要素として入っています。このように、要素が階層的に配置されている状態を視覚的に分かりやすくするために、インデント（字下げ）を使って段を揃えることが一般的です。
ネスト構造では、「入れてよい要素」と「入れてはいけない要素」の組み合わせも存在します。例えば、<p> 要素の中には、基本的にブロック要素（段落全体を区切るタイプの要素）を直接入れない方がよいとされています。<div> や <h1> などはブロック要素に分類され、これらを <p> の中に入れると、ブラウザが自動的にタグを補正し、意図しない構造になることがあります。一方、<strong> や <em>、<span> などはインライン要素と呼ばれ、段落の中の一部分としてネストさせることができます。
<!-- 推奨されない例 -->
<p>
段落の中に
<div>別のブロック</div>
を入れてしまった
</p>このようなコードはブラウザ側で構造を修正されてしまう可能性が高く、結果としてHTMLの構造と見た目が一致しない原因になります。正しいネストを意識するためには、「ブロック要素は大きなかたまりを作り、その中にインライン要素やテキストを入れていく」というイメージを持つと整理しやすくなります。
リストやテーブルのように、特定の親子関係が決まっている要素もあります。例えば、<ul> や <ol> の直下には基本的に <li> だけを子要素として置きます。
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>ここで <ul> の中に直接 <p> や <div> を書くのではなく、必ず <li> を経由してその中に他の要素をネストします。同様に、<table> の中では <tr> の中に <th> や <td> を入れるというルールがあります。このような「決まった組み合わせ」を守ることも、正しいネストを行うための重要なポイントです。
ネスト構造を綺麗に保つためには、インデントと改行の使い方がとても有効です。外側の要素よりも1段深い階層にある要素は、半角スペース2〜4つ、もしくはタブ1つ分だけ右にずらして書きます。
<div>
<p>
これは
<strong>入れ子</strong>
の例です。
</p>
</div>このように書くことで、どの要素がどの要素の中に入っているかがひと目で分かります。特に要素の数が増えてくると、インデントを揃えていないコードは構造を見抜くのが難しくなるため、早い段階からインデントの習慣を身につけておくと、後の学習や開発がスムーズになります。
また、多くのコードエディタには、自動インデントやタグ補完の機能があります。開始タグを入力すると、自動的に対応する終了タグを挿入してくれたり、インデントを自動で整えてくれたりします。これらの機能を活用することで、ネストのミスを減らし、構造の分かりやすいHTMLを書きやすくなります。インデントをそろえた入れ子構造は、タグの対応関係を視覚的に示すひとつの方法です。
開始タグ・終了タグに関する典型的なミスと防止方法
HTMLを学び始めたとき、多くの学習者が共通してつまずくポイントが「開始タグと終了タグの対応関係」です。HTMLはタグで文書の構造を示す言語であるため、この対応が乱れるとブラウザが正しく解釈できず、表示が崩れたり意図しない構造になったりします。ここでは、特に起こりやすい典型的なミスと、その防止方法について丁寧に解説します。
終了タグの書き忘れ
最も多いミスのひとつが、終了タグを書き忘れてしまうケースです。
<p>これは終了タグがない段落です。このように終了タグがないと、ブラウザは次の要素が始まるまで自動的に段落が続いていると解釈します。しかし、この“自動補完”はあくまでブラウザ側の推測であるため、意図した表示にならなかったり、スタイルが正しく適用されなかったりする原因になります。
防止方法：
- 開始タグを書いたら、すぐに終了タグも入力する癖をつける
- コードエディタの自動補完機能（開始タグ入力時に終了タグを自動生成する機能）を活用する
- インデント（字下げ）を意識して書き、タグの階層が視覚的に分かるようにする
タグの入れ子（ネスト）の順番間違い
開始タグと終了タグの順序を間違えると、HTML構造が崩れてしまいます。
<p><strong>大事な部分</p></strong>この例では <strong> が <p> の中にあるにもかかわらず、</p> を先に閉じてしまっています。これはタグが交差している状態であり、正しいHTMLとは言えません。ブラウザは内部的に修正しようとしますが、レイアウトが崩れたり予期しない動作になる可能性が高くなります。
防止方法：
- 「外側のタグから先に開き、内側から先に閉じる」というルールを意識する
- ネスト構造はインデントを揃えて書く
- 内側の要素を追加したときは、必ず終了タグの位置が正しいか確認する
開始タグと終了タグのタイプミス（スペルミス）
タグ名のスペルを間違えることもよくあるミスです。
<strnog>重要</strong>このように、開始タグと終了タグの名称が一致していない場合、ブラウザはタグとして認識できません。
防止方法：
- タグ名は可能な限り自動補完に頼る
- 小文字で統一して書く（HTMLでは大文字小文字を区別しないが、統一して書くとミスが減る）
- 複雑なタグ名を書いたときは、終了タグが正しく一致しているか確認する
属性の記述が原因でタグが崩れる例
属性の引用符（クォーテーション）を閉じ忘れた場合もミスに繋がります。
<p class="lead>段落の内容です。</p>"lead" の引用符を閉じ忘れていることで、ブラウザはタグの境界を誤認し、解析エラーになります。
防止方法：
- 属性を書くときは
" "をセットで入力する（「”を書いたら必ず閉じる」癖をつける） - エディタのカラーリング（構文強調表示）を確認しながら書く
不正なタグの入れ子による構造崩壊
次のような例もよく見られます。
<ul>
<p>テキスト</p>
</ul><ul> の中には <li> しか直接入れられません。許可されていない要素を入れると、ブラウザが自動的にタグを補正し、思わぬ表示になることがあります。
防止方法：
- 「この親タグはどの子タグを持てるのか」を意識する
- 不安なときは、同じ種類のタグ（リストやテーブルなど）の構造がどうなっているか見本を確認する
タグを書き換えた際に起きやすい不整合
既存のコードを修正するときに、開始タグだけを書き換えて終了タグを書き換え忘れることもよくあります。
<p>→<div> に変更したのに </p> のままこのタイプのミスは、編集の途中で気づきにくいため、原因追跡が難しくなることがあります。
防止方法：
- 要素を変更するときは、必ず開始タグと終了タグをセットで確認する
- エディタの「タグのペアをハイライトする」機能を利用する
エディタやツールの活用でミスを減らす
現代のHTMLコーディングでは、ツールを活用することで開始タグと終了タグのミスを大幅に減らせます。
- 開始タグ入力時に終了タグを自動生成する補完機能
- 対応するタグをクリックするとハイライトする機能
- 自動整形（フォーマット）機能
- 構文エラーをリアルタイムで表示するチェック機能
これらを使うことで、間違いを未然に防ぎ、学習段階でも効率的に正しいHTMLを書く習慣が身につきます。
終了タグが不要なタグの特徴と見分け方
ここまでの説明では、開始タグと終了タグがペアになって1つの要素を構成する例を中心に扱ってきましたが、HTMLのすべてのタグに終了タグが必要なわけではありません。中には「終了タグを書かない」ことが正しいタグも存在します。このようなタグは一般的に「空要素」や「ボイド要素」と呼ばれます。空要素とは、そのタグ自体が1つの役割を完結していて、中にテキストや別の要素を入れないタイプの要素のことです。
代表的な空要素には、次のようなものがあります。
<br>：改行を挿入する<img>：画像を表示する<input>：フォームの入力欄を作る<meta>：文字コードなど文書情報を指定する<link>：スタイルシートなど外部ファイルを関連付ける<hr>：区切り線（水平線）を表示する
これらのタグは、<p>〜</p> のように中身を囲む役割ではなく、「ここに線を引く」「ここで改行する」「ここに画像を表示する」といった“その場の指示”を行うイメージに近いです。そのため、内容を挟むための終了タグは存在せず、開始タグだけで意味が完結しています。
終了タグが不要なタグの特徴として、「中にテキストや他の要素を含めることを前提としていない」という点が挙げられます。例えば <br> は「ここで行を折り返す」という位置情報だけを持ち、その中にテキストが入ることはありません。同様に <img> も、画像のパスを src 属性で指定することで「ここにこの画像を表示する」という命令を出すだけであり、タグの内側に何かを書くことはありません。
<p>1行目のテキスト<br>2行目のテキスト</p>このように、<br> 自体には終了タグがなくても、「ここで改行」という役割が完結しています。もし <br></br> のように終了タグを書いてしまうと、厳密には正しいHTMLとは言えず、検証ツール（バリデータ）などでエラーとして指摘される可能性があります。
一方で、以前のXHTMLというルールに近い書き方では、空要素を <br /> のようにスラッシュ付きで書くスタイルもよく見られます。現在のHTMLでは、<br> とだけ書けば十分に正しく、<br /> と書いても多くのブラウザで問題なく動作しますが、学習の初期段階では「HTMLの空要素は基本的に <br> のように終了タグなしで書く」と覚えておくと整理しやすくなります。
終了タグが不要なタグかどうかを見分けるときのヒントとしては、次のような視点があります。
- そのタグの中にテキストや他のタグを入れるケースを想像できるかどうか
- 教科書的なサンプルコードで、いつも単独で使われているかどうか
- 要素の役割が「ここに何かを表示する場所を作る」のか、「そのタイミングで何かを挿入する指示」なのか
たとえば <p> は、段落全体という「範囲」を作る要素なので、中にテキストが入り、終了タグが必要です。一方 <hr> は「ここに区切り線を入れる」という1回限りの指示であり、中身は必要ありません。この違いが、終了タグの有無と対応しています。
もう少しコード例を見てみます。
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="logo.png" alt="ロゴ画像">
<hr>
<p>本文です。</p>
</body>ここでは <meta>、<link>、<img>、<hr> がすべて空要素です。いずれも中にテキストや別のタグは入っておらず、属性を通じて必要な情報を指定するだけで意味が完結しています。
空要素とそうでない要素を混同してしまうと、次のような誤りが起きやすくなります。
<img src="photo.jpg"></img>
<meta charset="UTF-8"></meta>このように終了タグを書いてしまうと、タグのペア構造を壊してしまう原因になります。ブラウザが自動的に無視してくれることもありますが、HTMLとしては望ましくない書き方です。このようなミスを避けるためには、「終了タグを書いてよいのは、中身を持つ要素だけ」という意識を持つことが役に立ちます。
学習の際には、自分で簡単な一覧を作っておくのも有効です。よく使う空要素（<br>、<img>、<input>、<meta>、<link>、<hr> など）をメモしておき、「これらは終了タグを書かない特別なグループ」と覚えておくと、タグを書くときに迷いにくくなります。慣れてくると、タグの役割から自然に「これは空要素だな」と判断できるようになっていきます。
開始タグと終了タグを使いこなすための練習方法
開始タグと終了タグは、HTMLの中でも特に登場回数が多く、慣れてしまえば無意識で書けるようになる部分です。ただし、最初のうちは「閉じ忘れ」や「入れ子の順番ミス」がどうしても起こりやすいため、意識的に練習することで手に馴染ませていくことが大切です。ここでは、初心者の方でも取り組みやすい具体的な練習方法をいくつかご紹介します。
手書きでシンプルなHTMLを書いてみる
まずおすすめしたいのは、あえてシンプルな構成のHTMLファイルを自分の手で書いてみることです。エディタのテンプレートや自動生成機能に頼らず、次のような最小構成を書き写すだけでも、タグの流れが体に染み込んできます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>練習ページ</title>
</head>
<body>
<h1>見出し</h1>
<p>最初の段落です。</p>
<p>2つ目の段落です。</p>
</body>
</html>最初はこの程度の短いコードから始め、慣れてきたら <ul> や <div> などを追加して、少しずつ要素の種類を増やしていきます。ポイントは、開始タグを書いたら必ずそのタイミングで対応する終了タグもセットで書く癖をつけることです。
「ペアで書く」タイピング練習
開始タグと終了タグをバラバラに書くとミスが増えやすいため、「最初からペアで書く」練習をしておくと効果的です。
例えば次のような流れを意識します。
<p>と打ったら、すぐに</p>まで入力する- カーソルを2つのタグの間に戻ってから、テキストを書き始める
これを繰り返しているうちに、脳内で「タグ＝ペア」と結びつけて考えられるようになります。同じように <div>〜</div>、<li>〜</li>、<strong>〜</strong> など、よく使うタグのペアを集中的に練習しておくと、実際のコーディングでも迷いにくくなります。
ネスト構造だけに集中した練習
開始タグと終了タグを正しく使いこなすには、ネスト構造（入れ子）の感覚に慣れることが重要です。テキスト内容は最小限にして、あえてタグ構造だけを組み立てる練習も効果的です。
<div class="wrapper">
<header>
<h1>タイトル</h1>
</header>
<main>
<section>
<h2>セクション見出し</h2>
<p><strong>本文</strong>のテキスト</p>
</section>
</main>
<footer>
<p>フッター</p>
</footer>
</div>このような例を自分で1から書き起こしてみて、インデントを丁寧にそろえながら、必ず「内側から先に閉じる」ことを意識します。慣れてきたら、あえて <section> を増やしたり、<ul><li> の構造を追加したりして、階層が増えた状態でも正しくタグを閉じられるか試してみると良い練習になります。
ブラウザ表示と開発者ツールで確認する
自分で書いたHTMLは、必ずブラウザで表示して確認する習慣をつけるとよいです。見た目がおかしいと感じたときは、ブラウザの開発者ツール（多くのブラウザでF12キーや右クリックの「検証」から開けるツール）を使うと、ブラウザがどのようにタグを解釈しているかを視覚的に確認できます。
開発者ツールでは、要素をツリー状に表示してくれるため、開始タグと終了タグの対応関係や、ネストの階層が一目で分かります。自分が書いたコードと、ブラウザが解釈した構造を見比べることで、「どこでタグの閉じ方を間違えたのか」「どの終了タグを忘れていたのか」が把握しやすくなります。
あえてミスを含んだコードを直してみる
練習用として、あえて「間違ったタグのコード」を用意し、それを自分で修正するという方法も有効です。例えば次のようなコードを見て、どこが問題か考える練習です。
<div>
<p>テキスト<strong>重要な部分</p></strong>
<p>もう一つの段落
</div>このコードには、終了タグの順番ミスや閉じ忘れがあります。こうした例を自分で見つけて修正していくことで、エラーのパターンに自然と慣れていきます。自分で間違いを作るのが難しければ、以前自分が書いて崩れてしまったコードを「練習素材」として残しておくのも良い方法です。
よく使うタグの「自分用チートシート」を作る
開始タグと終了タグを使いこなすには、まずタグの種類と形に慣れる必要があります。最初のうちは、よく使うタグだけをまとめた自分用のメモ（チートシート）を作っておくと便利です。
例として、次のように分類してメモを作ることができます。
- 基本構造：
<html>〜</html>,<head>〜</head>,<body>〜</body> - 文章：
<h1>〜</h1>,<h2>〜</h2>,<p>〜</p>,<strong>〜</strong>,<em>〜</em> - グループ化：
<div>〜</div>,<span>〜</span> - リスト：
<ul>〜</ul>,<ol>〜</ol>,<li>〜</li> - 表：
<table>〜</table>,<tr>〜</tr>,<th>〜</th>,<td>〜</td> - 空要素：
<br>,<img>,<hr>,<meta>,<link>
このように整理しておくと、「このタグは終了タグが必要だったか」「中に何を入れられるか」をすぐに思い出すことができ、コーディング中の迷いが減ります。
少しずつ量を増やして「書く習慣」をつける
最後に、開始タグと終了タグを本当に使いこなせるようになるには、短時間でもよいので「継続して書き続ける」ことが重要です。毎日5〜10分でも構いませんので、簡単なページを1つ作る、既存のコードを書き写す、小さなレイアウトをまねしてみる、といった小さな練習を積み重ねていくと、タグの書き方が自然と身についていきます。
まとめ
この記事では、HTMLにおける開始タグと終了タグを中心に、文書構造の基本からよくあるミス、そして練習方法までを一通り学んできました。あらためて整理すると、タグとはブラウザに「ここからここまでが何の意味を持つ部分か」を伝えるための目印であり、そのうち多くの要素は開始タグと終了タグのペアによって1つのかたまりを形成するものでした。開始タグは <p> のようにタグ名を書き、終了タグは </p> のようにスラッシュ / を付けて書く形式でした。タグとその中身を合わせて「要素」と呼び、HTMLはこれらの要素が入れ子になりながら積み重なることで1つのWebページを表現している、という全体像をイメージしていただけたかと思います。
開始タグと終了タグが果たす役割としては、単に文字を太くしたり大きくしたりする「見た目」の指示だけではなく、「ここが見出し」「ここが段落」「ここはリンク先」というように、文書の意味や構造を伝えるという点が重要でした。検索エンジンやスクリーンリーダーなどは、この構造情報を頼りにコンテンツを理解しますので、タグの対応が乱れていると、人間から見ても機械から見ても分かりづらいページになってしまいます。また、CSSでスタイルを当てる際も、どのタグに対して指定をかけるかという形で考えるため、開始タグ・終了タグの正確さは、見た目の制御にも直結するポイントでした。
具体例としては、<h1>〜<h6> の見出しタグ、<p> の段落タグ、<strong> や <em> のような強調タグ、<a> のリンクタグ、<div>・<span> のグループ化に使うタグ、<ul>・<ol>・<li> のリスト、<table>・<tr>・<th>・<td> の表などを取り上げました。どれも「開始タグ＋内容＋終了タグ」という共通したパターンを持っており、それぞれが「どの範囲にどんな意味を与えているのか」をはっきりさせるために使われていました。タグごとの役割やよく使う場面を具体的にイメージできるようになると、自分でHTMLを書くときにも自然と使い分けができるようになります。
ネスト構造については、「親要素の中に子要素が入る」「外側から開いて内側から閉じる」「タグ同士を交差させない」といったルールが重要でした。<p><strong>テキスト</strong></p> のように、開始タグと終了タグの順序が階層を保ったまま並んでいる状態が正しく、<p><strong>テキスト</p></strong> のように交差してしまうと誤りになる、という違いを確認しました。また、<ul> の直下には <li> を置く、<table> の中では <tr> の中に <td> や <th> を入れる、といった「決まった親子関係」のあるタグもありました。
よくあるミスとしては、終了タグの書き忘れ、ネスト順の間違い、タグ名や属性のスペルミス、入れてはいけないタグの組み合わせ、開始タグだけを書き換えて終了タグを修正し忘れる、といったパターンがありました。これらを防ぐために、開始タグを書いたらすぐに終了タグもセットで入力すること、インデントを整えて階層を目で追いやすくすること、コードエディタの自動補完やエラーチェック機能を活用することが効果的でした。
一方で、<br> や <img>、<input>、<meta>、<link>、<hr> のように終了タグを持たない「空要素」も学びました。これらは要素の中にテキストや別の要素を含めるのではなく、その場で「改行を入れる」「画像を表示する」「線を引く」といった指示を完結させるタイプのタグでした。空要素に誤って終了タグを書いてしまうと構造が崩れる原因となるため、「中身を挟む必要がある要素だけが終了タグを持つ」という区別を意識することが大切でした。
最後に、開始タグと終了タグを使いこなすための練習方法として、シンプルなHTMLを手書きしてみること、タグを最初からペアで書くタイピング練習、ネスト構造だけに集中した練習、ブラウザ表示と開発者ツールによる確認、あえてミスを含んだコードを修正するトレーニング、自分用のタグ一覧（チートシート）を作ることなどを挙げました。どれも特別な準備を必要とせず、今日から少しずつ取り入れられる内容です。
開始タグと終了タグの扱いに慣れることは、HTMLだけでなく、その先のCSSやJavaScriptの学習にも大きな土台となります。最初はゆっくりで構いませんので、ペアで書く意識とネスト構造を大切にしながら、繰り返し手を動かして感覚を身につけていってください。