1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlタグのネストルールの紹介

2022-01-09 14:59:27

XHTMLのタグには、div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong ......といったものがたくさんあります。これらのタグを使ってページ構造を構築する場合、無限に入れ子をすることができますが、入れ子には一定のルールがあります。しかし、ネストにも一定のルールが必要で、無差別にネストする個人の習慣に任せるのではなく、では、htmlタグのネストのルールとは何なのでしょうか?


I. HTMLタグにはブロックレベル要素(block)、インライン要素(inline)などがある

1. ブロックレベル要素

一般に、サイトのアーキテクチャ、レイアウトを構築し、コンテンツを運ぶために使用される......。これらのタグが含まれる。

コピーコード
コードは以下の通りです。

  address, blockquote, center, dir, div, dl, dt, dd,fieldset, form, h1~h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul

2. インライン要素

  一般に、サイトコンテンツの細部や部分において、強調、スタイルの区別、上付き文字、下付き文字、アンカーなどのために使用されます。以下のタグがインライン要素になります。

コピーコード
コードは以下の通りです。

  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

II. HTMLタグのネストに関するルール

1. ブロック要素はインライン要素またはいくつかのブロック要素を含むことができますが、インライン要素はブロック要素を含むことができません。

コピーコード
コードは以下の通りです。

  <div><h1></h1><p></p></div> -- on </p> <p> <a href="#"><span></span></a> -- to </p> <p> <span><div></div></span> -- Wrong

2. 2. ブロックレベル要素は <p> 内に配置することはできません。
コピーコード
コードは以下の通りです。

  <p><ol><li></li></ol></p> -- Wrong</p> <p> <p><div></div></p> -- Wrong

3. 3. インライン要素のみを含み、それ以上のブロックレベル要素を含むことができない、いくつかの特別なブロックレベル要素があります。
コピーコード
コードは以下の通りです。

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

4. liはdivタグを含むことができる -- これは別に記載する必要はないのですが、ウェブ上の多くの人が少し混乱しているので、ここで少し説明します。

  liタグもdivタグもコンテンツコンテナであり、地位は同等で、階層構造(h1、h2など^_^)はなく、liタグは親のulやolまで収容できることを知っておくことが重要で、なぜliがdivを収容できないと考える人がいるのでしょうか。liをケチと見ないでください、liをかなりやせ我慢と見ないでください、実はliは大きな心を持っているのです.

5. ブロックレベル要素に並ぶブロックレベル要素、インライン要素に並ぶインライン要素。

コピーコード
コードは以下の通りです。

  <div><h2></h2><p></p></div> -- for </p> <p> <div><a href="#"></a><span></span></div> - - vs</p> <p> <div><h2></h2><span></span></div> -- Wrong