pタグの入れ子について

何をいまさらと言われそうですが、htmlのpタグは入れ子構造に出来ないということを知りました。


私は必要に迫られてコーディングをし始めたのでhtmlを体系的に学んだことがありません。pタグ、spanタグ、divタグの違いをあまり意識することなく同じような感覚で使用していたため、pタグの中にpタグを入れて、「アレ？おかしいな」と思ったのです。

なぜpタグを入れ子にすることができないかを理解するには、まず「ブロックレベル要素」と「インライン要素」を理解する必要があります。

●ブロックレベル要素（Block-Level Elements）
ブロックレベル要素は、一つのブロック（かたまり）として認識されます。親要素の幅いっぱいに広がった矩形で表現されます。
<div>　<h1>～<h6>　<hr>　<ol>　<p>　<table>　<ul>　<ol>　<dl>　<li>　<dt>　<dd>　など

●インライン要素（Inline Elements）
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文中の一部分に意味・書式などを設定します。
<a>　<b>　<br>、<font>　<img>　<small>　<span>　<strong>　<u> など

そして配置のルールがあります。

●ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。

●インライン要素の中には、テキストの他、他のインライン要素を配置することができますがブロックレベル要素を配置することはできません。


ここまでで<p>と<span>の違いはわかりました。しかし<p>と<div>の違いはわかりません。
上記の大枠ルールを守ったうえで各タグ別のルールがあるのです。

●タグの中に入られるタグのルール
<div>　何でも
<p>　インライン要素のみ
<li>　何でも
<ul>,<ol>　<li>のみ
<li>　何でも（<li>自身は<ul>,<ol>の中でしか使えない）
<dl>　<dt>,<dd>のみ
<dt>　インライン要素のみ
<dd>　何でも

ここで一気に複雑になります。とりあえず暗記するしかないですね。ただしタグの名前の由来を調べると答えが見えてきます。一例として先ほどの<p>と<div>を挙げます。

<p>　paragraph＝段落
<div>　 division＝分割

pタグには「段落」という文法的な意味があります。「文章」における１ブロックなので「文章≒インライン要素」以外は入れられないと考えられます。それに対してdivタグは文法的には意味がありません。cssを利用して見ためを整えるだけが存在意義だと言っても過言ではないでしょう。文法的に意味がないからルールに縛られずに何でも入れられるのでしょう。

htmlは本来、文章を構造的に表現するための言語です。ブラウザやcssの機能が豊富になり装飾がメインとなってしまったため、しばらく文法的な意味合いが軽視されていた感がありますが、html5の登場から再び本来の文法的意味合いを重視した視点に立ち返ろうとしているように感じます。今後はdivタグのような”意味”の無いタグの使用頻度は下がっていくのかもしれません。