Sponsored Link
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タグもある
ただタグは様々なものがあり、中には開始タグのみ記述して終了タグを記述しなくていいものもあります。
これに関しては以下の記事で解説しています。

![[コーディングの基礎] 開始タグと終了タグの理解](https://webcre8tor.com/wp-content/uploads/2024/09/code-944499_1920-1024x550.jpg)
![[コーディングの基礎] 使用頻度の高いhtmlタグ](https://webcre8tor.com/wp-content/uploads/2024/09/code-944499_1920.jpg)
![[コーディングの基礎] ブラウザ幅とコンテンツ幅](https://webcre8tor.com/wp-content/uploads/2023/11/webdesigna07_01.jpg)