HTML タグのネスト規則の紹介

XHTML タグには、div、ul、li、dl、dt、dd、h1～h6、p、a、addressa、span、strong など、さまざまなものがあります。これらのタグを使用してページ構造を構築すると、タグを無限にネストできます。ただし、ネストには一定のルールも必要です。個人の習慣に従ってランダムにネストすることはできません。では、HTML タグのネストルールとは何でしょうか。

1. HTMLタグにはブロックレベル要素（ブロック）とインライン要素（インライン）がある

1. ブロックレベル要素

これは通常、Web サイトのアーキテクチャ、レイアウトを構築し、コンテンツを送信するために使用されます。次のタグが含まれます。

コードをコピー

コードは次のとおりです。

アドレス、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

2. 埋め込み要素

通常、Web サイトのコンテンツの詳細や一部で「強調、スタイルの区別、上付き文字、下付き文字、アンカー」などに使用されます。次のタグはすべて埋め込み要素です。

コードをコピー

コードは次のとおりです。

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var

2. HTMLタグのネストルール

1. ブロック要素にはインライン要素または一部のブロック要素を含めることができますが、インライン要素にブロック要素を含めることはできません。インライン要素に含めることができるのは、他のインライン要素のみです。

コードをコピー

コードは次のとおりです。

<div><h1></h1><p></p></div> —— 真</p> <p> <a href=”#”><span></span></a> —— 真</p> <p> <span><div></div></span> —— 偽

2. ブロックレベル要素は <p> 内に配置できません。

コードをコピー

コードは次のとおりです。

<p><ol><li></li></ol></p> —— 間違いです</p> <p> <p><div></div></p> —— 間違いです

3. インライン要素のみを含むことができ、ブロックレベル要素を含むことができない特殊なブロックレベル要素がいくつかあります。これらの特殊なタグは次のとおりです。

コードをコピー

コードは次のとおりです。

h1、h2、h3、h4、h5、h6、p、dt

4. li には div タグを含めることができます - これは別々にリストする必要はありませんが、インターネット上では多くの人が混乱しているので、ここで簡単に説明します。

li タグと div タグはどちらもコンテンツを読み込むためのコンテナです。どちらも同等のステータスを持ち、階層はありません (たとえば、h1 と h2 の厳密な階層など)。li タグは親の ul または ol にも対応できることを知っておく必要があります。li は div に対応できないと考える人がいるのはなぜでしょうか。リーはそんなにケチだと思わないでください。リーは痩せていて小さく見えますが、実は心が広いのです...

5. ブロックレベル要素はブロックレベル要素と並べて配置され、インライン要素はインライン要素と並べて配置されます。

コードをコピー

コードは次のとおりです。

<div><h2></h2><p></p></div> —— 正しい</p> <p> <div><a href=”#”></a><span></span></div> —— 正しい</p> <p> <div><h2></h2><span></span></div> —— 誤り

<<: MySQL 空間データストレージと関数

>>: 新しいウィンドウで開くジャンプメニュー、window.open の使い方の紹介