[猫図解]開始タグと終了タグを学ぼう

Published on: 2022年10月29日
Category: html-css
Tags: html,コード,タグ
Author: SAKUWEB by Liruu Design

先の記事で説明した「タグ」ですが、タグには開始タグと終了タグがあることを学びましたね。

今回は、もっとわかりやすく図解を用いて説明するとともに、閉じタグがなくても動くタグも説明したいと思います。

[猫図解]開始タグと終了タグってなんだろ？

図解するとこんな感じ。

低糖質でいて食物繊維豊富なアイス「SUNAO」を模しました・・・。

SUNAOW（タグ）の中に、ネコ（値）を入れます。

蓋を開けば、ネコが出てきます。

蓋を閉じれば、ネコがSUNAOWの中に納まります。

蓋を閉めないと、ネコが脱走しちゃいますもんね。

あっちょっともうすでに・・・・手が・・・・。

タグは、開始タグと閉じタグがセットになっています。

閉じタグは、バックスラッシュ「/」を含むタグのことです。

タグをopen開いて（開始タグ）、 close閉じます（閉じタグ）。

タグは、ちゃんと閉じない壊れちゃうんですね。

とはいえ、これがなくてもちゃんと動くタグもあるんです。

[猫図解]閉じタグなくても動くタグ

今度は、めちゃうま！のファミマ「とろける生チーズケーキ」模しました。

・・・・すみません。

透明なケースに、ネコチーズケーキが入ってます。

とろんっとソースが美味い！

容器が透明なので中身は見えていますが、蓋はちゃんと閉じてるので大丈夫！

つまり、閉じタグがなくてもOKなタグがあるということです。

そして新発売。

HTMLにもバージョンがあり、現在の最新はHTML Living Standardです。

それまでは、閉じないと壊れてたんですね。

一律なんでわかりやすかったんですが・・・、

今回のバージョンでは全タグが省略できる訳ではなく・・・・

なんでじゃっっっ・・・・。

それぞれのタグの一例を以下に示します。

「閉じタグ」ないと壊れちゃうタグ

html、body、header、section、div、main、aside、ul、dl、footer

etc….

<html>
 <body>
  <main>
    <div></div>
   </main>
  </body>
</html>

「閉じタグ」なくても動くタグ

br、img、hr、meta、input、embed、area、base、col、keygen、link、param、source

etc….

<br>
<img src="test.jpg>
<hr>

「閉じタグ」を省略できるタグ

li、dt、dd、p、tr、td、th、rt、rp、optgroup、option、thread、tfoot

etc….

<ul>
<li>リンゴ
<li>ミカン
</ul>

ulタグは閉じなきゃだけど、liタグは閉じなくてもOKということです。

複雑・・・・。

まぁ、閉じタグがあっても動くので、コーディングしていくうちに覚えれば良いかなレベルです。

まとめ

タグ記述には、開始タグと閉じタグが必要
html5から、閉じタグを省略できるようになった
閉じタグが必須なタグと、省略できるタグ、閉じなくても良いタグがある

それよりももっと複雑なことが、記述ルール、入れ子のルールです。

次回は、もっと複雑コンテンツモデルという概念を学びます。

【Adobe Firefly：初心者ガイド】スタイル「効果：流行」解説！画像サンプル付き！

TRY to MAKE

2024年7月3日

【常時SSL化】301リダイレクトがエラー!?対処法とコピペ用コードも紹介

TRY to MAKE

2024年6月5日

【Adobe Firefly：初心者ガイド】スタイルの「参照」の使い方解説！

TRY to MAKE