0

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 はここがおかしい」と説明できる基準が何か無いのかについて考えております。

(セマンティクスを意識した際の)適切なマークアップとは何か、という疑問への答えに繋がる内容であるとも思っております。この疑問に関係する情報やアドバイスがあれば、ご教示いただけると幸いです。

5
  • 1
    質問の例示ではp要素を作るべきか否かに終始しているので、そこに絞れば、その内容が段落を意味するならp要素とするのが良いだろうと思いますけど、そういうことではないですか? Commented 2022年3月23日 15:37
  • p要素は例ですが、仮にp要素の議論に絞って考えるとして、code-1 の例ではなぜ p が不要と考えるのが自然なのか、その根拠を説明したいのですが、うまい説明が見当たらないので悩んでいるのです。
    – quickstar
    Commented 2022年3月23日 16:14
  • リスト項目を段落とするという発想自体、常識的ではない気がしますが。 Commented 2022年3月24日 5:10
  • @ItagakiFumihiko その感覚的な判断基準を厳密に評価したいのです。初学者に対してどう説明すべきか、と言い換えられるかもしれません。
    – quickstar
    Commented 2022年3月25日 6:30
  • @supa 例えば、ある部分(テキストテキストなど)が p 要素であるべきなのか、その上位の li の子であれば意味付けは不要なのか、を判断する基準がよく分からないということです。著者自身が要素の使い方を判断できないケースがあります。
    – quickstar
    Commented 2022年3月25日 6:31

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。