【HTML】もう悩まない！タグの入れ子ルールまとめ

この記事は私がまとめました

T.Ohkiさん

HTMLの基本ルールをおさえよう！

入れ子のルールを理解するには、HTMLの「インライン要素」「ブロックレベル要素」という2つの要素を知る必要があります。詳細についてはしっかりと勉強して頂きたいので省略しますが、簡単にいうとインライン要素は「横書きの文字」に相当します。横書きの文字は左上からはじまって右に1文字づつ順々に並びますよね。この流れを継承するのがインライン要素の特徴です。spanとか,imgとか。ただただ左から右へ横に並ぶ性質があります。

ブロックレベル要素はその名前からも想像がつくように「ブロック(塊)」に相当します。divとかpとか。この塊は上から下へと縦に並ぶ性質があります。代表的なものにhやpやdivがあります。<br>で改行してないのに改行が自動で入りますよね。あれは、縦に並ぶための性質なのです。

基本的に塊であるブロックレベル要素は、配置できる領域に制限がありますが、インライン要素はほぼどこにでも使うことができます。この2つを知っておくだけで、タグの入れ子ルールが難しくなくなります。

以下、よく使うタグのみになりますが入れ子のルールをザッとまとめておきます。
※HTML5ではルールの変更がありましたが、ここでは除外します

お気に入り詳細を見る

【構造タグ】 div

構造タグ「div」はブロックレベル要素です。divタグの中には何でも入れることが出来ちゃいます。divの中にdivなどブロックレベル要素を入れ子にしても問題ありません。

【このタグに入れられるもの】
div、h1～h6、p、ul、dl、ol、li、span、img、strong、em…など

お気に入り詳細を見る

【見出しタグ】 h1～h6

見出しタグ「h」はブロックレベル要素です。hタグの中に入れていいのはインライン要素のみになります。ブロックレベル要素は入れられません。

【このタグに入れられるもの】
span、img、strong、em…など

※見出しタグの中にspanなどは良く使う構成ですね

お気に入り詳細を見る

【段落タグ】 p

段落タグ「p」はブロックレベル要素です。pタグの中に入れていいのはインライン要素のみになります。初心者で間違えやすいのは、pの中にdivを入れてしまったり、pを入れ子にしてしまったり、hを入れてしまったり。divやpやhなどのブロックレベル要素をpの中に入れてはいけません。

【このタグに入れられるもの】
a、img、span、strong、em…など

お気に入り詳細を見る

【リストタグ】 ul、ol

リストタグ「ul」や「ol」はブロックレベル要素です。ul,olタグの中に入れることができるのは「li」タグのみです。それ以外のタグは入れることが出来ません。

【このタグに入れられるもの】
li

お気に入り詳細を見る

【リスト子要素タグ】 li

「li」タグは上記の「ul」「ol」の中でしか使えないタグです。liタグの中にはどんな要素も入れることが出来ます。

例えば、liタグの中に新たにulリストを設置してリストの入れ子を作ったり、pやdivなどのブロックレベル要素を入れたり。NGのように思われるかもしれませんが、NGではありません。

【このタグに入れられるもの】
div、h1～h6、p、ul、dl、ol、li、span、img、strong、em…など

お気に入り詳細を見る

【リストタグ】 dl

正確には"定義リスト"タグという名称の「dl」タグ。dlタグの中に入れることができるのは「dt」「dd」の2つのみです。それ以外のタグは入れることが出来ません。

【このタグに入れられるもの】
dt、dd

お気に入り詳細を見る

【リスト子要素タグ】 dt

定義リスト「dl」の定義部分を司る「dt」タグ。dtの中にはインライン要素のみが入れられます。間違いやすいのは、dtの中に見出し要素のhタグを入れるケースですが、これはブロックレベル要素なので入れられません。

【このタグに入れられるもの】
a、img、span、strong、em…などのインライン要素

お気に入り詳細を見る

【リスト子要素タグ】 dd

定義リスト「dl」の説明部分を司る「dd」タグ。ddの中にはどんな要素も入れられます。hでもdivでもリストタグなどのブロックレベル要素だってOK。dtはインライン要素のみ、ddは何でも入れられる。この2点の違いを把握しておきましょう。

【このタグに入れられるもの】
div、h1～h6、p、ul、dl、ol、li、span、img、strong、em…など

お気に入り詳細を見る

【構造タグ】 span

構造タグ「span」はインライン要素です。spanタグの中にはインライン要素しか入れてはいけません。spanの中にspan(spanの入れ子)は良く使う構成ですね。

【よく使う構成 (文書構造的にOKなもの)】
・spanの入れ子 (spanの中にspan)

お気に入り詳細を見る

【強調タグ】 strong, em

強調タグ「strong」「em」はいずれもインライン要素です。こちらも中に入れることができるのはインライン要素のみです。strongタグの中のspanは良く使う構成ですね。

【このタグに入れられるもの】
spanなどのインライン要素

お気に入り詳細を見る

【アンカータグ】 a

リンクなどを貼る時に使う「a」タグ。aタグはインライン要素です。結構間違いやすいようですが、aタグの中にはブロックレベル要素は入れられません。aタグの中のspanは良く使う構成ですね。

【このタグに入れられるもの】
spanなどのインライン要素

お気に入り詳細を見る

さいごに

HTML5からは入れ子の仕様に変更があり、上記のルールが適用されないものがあります。が、上記は従来の入れ子ルールとして基本的には覚えておいて損はありません。上記を知った上でHTML5の入れ子ルールを知る。そういう段階を踏むことで、「何がどういう理由で仕様が変更になったのか」の理解を深めることができるからです。理解を深めることで予測が付くようになります。

お気に入り詳細を見る