初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML マークアップ 入れ子のルール

HTMLのルール

最近HTMLを記述するのにも少し慣れてきましたが基礎に戻ってタグの入れ子ルールについて記述します。

入れ子のルールを理解するには、HTMLに【インライン要素】と【ブロックレベル要素】という2つの要素があることを知る必要があります。

簡単にいうとインライン要素は【横書きの文字】に相当します。横書きの文字は左上からはじまって右に1文字づつ順々に並びますよね。この左から右への流れで表示されるのがインライン要素の特徴です。spanやimgやstrongなどです。シンプルに左から右へ横に並ぶ性質があります。

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

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

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

【構造タグ】 div :ブロックレベル要素

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

【要素に入れられるタグ】
div、h1~h6、p、ul、dl、ol、li、span、img、strong、em…など

【見出しタグ】 h1~h6:ブロックレベル要素

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

【要素に入れられるタグ】
span、img、strong、em…


【段落タグ】 p:ブロックレベル要素

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

【要素に入れられるタグ】
span、img、strong、em…

【リストタグ】 ulol:ブロックレベル要素

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

【要素に入れられるタグ】
li

【リスト子要素タグ】 li

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

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

【要素に入れられるタグ】
div、h1~h6、p、ul、dl、ol、li、span、img、strong、em…など


【リストタグ】 dl

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

【要素に入れられるタグ】
dt、dd

【リスト子要素タグ】dt

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

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

【リストタグ】 dd

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

【要素に入れられるタグ】
div、h1~h6、p、ul、dl、ol、li、span、img、strong、em…など

【構造タグ】 span:インライン要素

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

【要素に入れられるタグ】
・spanの入れ子 (spanの中にspan)

【強調タグ】 strong, em:インライン要素

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

【要素に入れられるタグ】
spanの入れ子 (spanの中にspan)

【アンカータグ】a:インライン要素

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

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

topへ戻る