
【HTML】 もう悩まない!タグの入れ子ルールまとめ
HTMLコーディングをはじめた初期の頃って、liタグ内にliを入れるリストの入れ子とか、divタグ内にdivを入れるdivの入れ子とかって悩みますよね。他に見出しの中に入れていいタグ/いけないタグのルールとか。今回は、そういうよくある入れ子のルールについてまとめてみます。
更新日: 2015年11月03日
HTMLコーディングをはじめた初期の頃って、liタグ内にliを入れるリストの入れ子とか、divタグ内にdivを入れるdivの入れ子とかって悩みますよね。他に見出しの中に入れていいタグ/いけないタグのルールとか。今回は、そういうよくある入れ子のルールについてまとめてみます。
更新日: 2015年11月03日
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
【リスト子要素タグ】 li
「li」タグは上記の「ul」「ol」の中でしか使えないタグです。liタグの中にはどんな要素も入れることが出来ます。
例えば、liタグの中に新たにulリストを設置してリストの入れ子を作ったり、pやdivなどのブロックレベル要素を入れたり。NGのように思われるかもしれませんが、NGではありません。
【このタグに入れられるもの】
div、h1~h6、p、ul、dl、ol、li、span、img、strong、em…など
【リストタグ】 dl
【リスト子要素タグ】 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の入れ子ルールを知る。そういう段階を踏むことで、「何がどういう理由で仕様が変更になったのか」の理解を深めることができるからです。理解を深めることで予測が付くようになります。
関連リンク
Web標準普及プロジェクトホーム | Web標準普及プロジェクトとは? | リンク もじら組 | Bugzilla-jp Web標準化Tips ブロックレベル要素とインライン要素 CSSを勉強し始めた人はまずこの概念を覚えなくてはいけません。 また、CSSのみならず、HTMLでの要素の親子関係を覚える上でもこの概念を知っておくと理解しやすいと思います。 Webページ作成において基本的な考え方…
ホームページ制作の情報交換 - 掲示板 HTML&CSS Web制作リファレンス - ホームページの構築・運用 - HTMLタグ | HTML5 | スタイルシート | テンプレート | JavaScript | Webツール | カラーチャート < HOME / 掲示板 / HTML質問板 / 一覧 / spanの入れ子 spanの入れ子 0 名前: なか : 2010/12/2…
HTMLのタグの入れ子について今手打ちでサイトを作っている者です。 以下の場合 どちらが正解なのでしょうか? hoge hoge どちらもインライン要素ですし、マーク...
|60237 view
|68208 view
|128318 view
|1153919 view
|1999832 view
|180979 view
旬のまとめをチェック
ファッション,美容,コスメ,恋愛
事件,ゴシップ,スポーツ,海外ニュース
映画,音楽,本,マンガ,アニメ
旅行,アウトドア,デート,カフェ,ランチ
インテリア,ライフハック,家事,節約
おかず,お弁当,おつまみ,簡単レシピ
エクササイズ,ダイエット,肩こり,健康
キャリア,転職,プレゼン,英語
Webサービス,スマートフォン,アプリ
クリエイティブ,写真,イラスト,建築
トリビア,不思議,名言,逸話
ユーモア,ネタ,癒し,動物,びっくり
過去の人気まとめをチェック