[コーディングの基礎] 開始タグと終了タグの理解

[コーディングの基礎] 開始タグと終了タグの理解

2025年02月26日 /最終更新:2025年09月22日
読了目安:約3分

まずhtmlタグの開始タグと終了タグの概念を理解してください。

[コーディングの基礎] 開始タグと終了タグの理解

htmlタグがどういったものかを解説する上で、まず開始タグと終了タグの概念の理解が必要不可欠です。
今回は文章の段落の役割を持つhtmlタグであるpタグを例に解説を行います。

htmlタグは開始タグと終了タグのセット

htmlタグは開始タグ終了タグセットになっています。

See the Pen 開始タグ・終了タグの理解 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

上記コード例の記述の呼称と対象
呼称 対象 備考
開始タグ <p> 呼び方はピータグで「p(段落)をここから開始」という意味を持つ
終了タグ </p> 要素名の前に/が入り「p(段落)をここで終了する」、という意味を持つ
要素 <p>~</p> 開始タグから終了タグまでの全ての記述
要素名 p pは段落の役割を持つ

例えば上記の記述を行った場合「今回は開始タグと閉じタグの理解のお話です。」という文字列がブラウザに表示されます。
文字列の前にある開始タグである<p>は「p(段落)をここから開始」という意味を持ち、
文字列の後にある終了タグである</p>は「p(段落)をここで終了」という意味を持ちます。

このように、表示する文字列を囲う(挟み込む)のがhtmlタグのマークアップであると考えておきましょう。
そのため、原則開始タグと終了タグの両方を記述してください。
開始タグと終了タグの違いは「/(スラッシュ)」の記述の有無のみです。

終了タグが不要なhtmlタグもある

ただタグは様々なものがあり、中には開始タグのみ記述して終了タグを記述しなくていいものもあります。
これに関しては以下の記事で解説しています。

[コーディングの基礎] htmlタグについて