HTMLでのマークアップについて、セマンティクス的な観点でのマークアップの「適切さ」を評価するにはどう考えれば良いのでしょうか。
code-1
直感的には、code-1 のマークアップは冗長であり不適切(不自然)に思います。p
要素タグで括る必要がないと思います。
// (code-1)
<ul>
<li><p>テキスト</p></li>
</ul>
code-2
しかし code-2 のマークアップでは p
要素があるべきです。更に別の例を考えます。
// (code-2)
<div class="box">
<div class="item">
<p>テキスト</p>
</div>
</div>
code-3
code-3 の例では、「テキストテキスト」の部分について、兄弟要素との統一性からなのか、匿名ボックスを作りたくないという気持ちからなのか、「テキストテキスト」は p
要素タグで括ってある方が自然に思えます。
// (code-3)
<ul>
<li>
<p class="img"><img src="#" alt="" /></p>
<p class="title">タイトルテキスト</p>
テキストテキスト
</li>
</ul>
code-4
code-4 は比較的よく見る、ネストされたリストのマークアップ例です。この場合は、「第1レベルのテキスト」は特にマークアップされずに匿名ボックスとなっていたとしてもあまり違和感がありません。スタイル付けの都合でマークアップするにしても span
要素タグなどインラインで済ませてしまうことが多い印象で、p
要素タグでマークアップするようなことは少ないと思います。
// (code-4)
<ul>
<li>第1レベルのテキスト
<ul>
<li>第2レベルのテキスト</li>
</ul>
</li>
</ul>
「code-1 と code-3」の違い、「code-3 と code-4」の違いについて、セマンティクスというか意味論的に適切な、自然なマークアップとはどのようなものであるのか、「code-1 が不自然であると考えられる理由」がどういう根拠なのかについて、何か説明できる評価基準はあるでしょうか。
これらに関して議論をするのにちょうどよい「概念」は HTML 仕様のどこかで書かれていたりするでしょうか。例えば以前は「(物理要素に対する)論理要素」といった言葉があったと思います。そういった用語に関係する領域の話に思えますが、的確に「code-1 や code-3 はここがおかしい」と説明できる基準が何か無いのかについて考えております。
(セマンティクスを意識した際の)適切なマークアップとは何か、という疑問への答えに繋がる内容であるとも思っております。この疑問に関係する情報やアドバイスがあれば、ご教示いただけると幸いです。
p
要素であるべきなのか、その上位のli
の子であれば意味付けは不要なのか、を判断する基準がよく分からないということです。著者自身が要素の使い方を判断できないケースがあります。