html5.2仕様書のp要素に関してにどうにも理解に苦しむ一文がある

html5.2仕様書のp要素に関してにどうにも理解に苦しむ一文がある

webのあれこれ
2018/01/24 0
vanillaice (Akira)
vanillaice (Akira)
Information

えー。なにこれ。わかんね (´・ω・`)

2017年の12月に HTML5.2の正式勧告 が行われ、と同時に5.3のドラフト(草案)も公開されました。
大きな追加や変更点については <dialog> ダイアログ要素が追加されたり、これまで単一設置しか許可されていなかった <main> メイン要素の複数設置が可能になったり、といったところです。
このあたりは草案通りで特に問題ないかな、という感じ。

ところが私、どうしても意味がわからない箇所があるんですね。
それは <p> 段落を意味するpタグ(p要素)についてです。

仕様書に気になる一文

In general, elements that cannot be children of p elements include any elements that are inline blocks, inline tables, as well as floated and positioned block-level elements.

W3C Recommendation

..........!!!!! ((((´=д=`)))))

〝一般的に、インラインブロック, インラインテーブル、また同様に フロートされたりポジション指定された要素 などは p要素の子要素として内包できない要素です。

え。何言ってんの何言ってんのこれ(((((笑)

p要素 というのはみなさんよくご存知の通り、段落 の定義を持つ要素です。
最も知られてはいますが最も使いこなせない要素と言っても過言でない。
ほとんどの方がp要素を正しく使うことができません。
日本は特に「改行 = Enterキー押下」だと思っている方が多いですし(実際にはEnterキー押下は改行ではなく改段落です)、p要素というのはとても制約の多い要素でもあります。

pの子要素にしては「いけない」要素だけれども、多くの方がやってしまうミスとしては

  • 見出しのh要素
  • 段落のp要素
  • 無定義のdiv要素

上記はpタグで挟んではいけない要素です。でも結構よく見かける(笑)

htmlの定義はCSSによって侵害を受けることになるのか?

これホントにびっくりしたんですけど、p要素は元々制限の多いものとはいえ。
旧来の言い方でいくと「p要素内に ブロックレベル要素を挟んではいけない」ですかね。
言い換えると「p要素の子要素にできるのは インライン要素のみ
これ同じ意味です。

html5ではブロックレベル要素・インライン要素という考え方自体が無くなりました。
それはhtmlの分野ではなくCSSが担うべきものである、という理念からですね。
なのでブロックやインラインの別というのは既にhtmlの手を離れてCSSのコンテンツモデル(ボックスモデル)に差し戻されたわけです。
つまり 記されている インラインブロック, インラインテーブル, フロート, ポジションなどは元々がhtmlではなくCSSである ということです。

本来は横に並ばない要素を横に並べる例としては以下のようなもの

<ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ul>

レンダリング結果

  • あいうえお
  • かきくけこ
  • さしすせそ

この「あいうえお」〜などは横には並びませんので、こういうことをします。

<ul>
  <li style="display: inline-block;">あいうえお</li>
  <li style="display: inline-block;">かきくけこ</li>
  <li style="display: inline-block;">さしすせそ</li>
</ul>

レンダリング結果

  • あいうえお
  • かきくけこ
  • さしすせそ

下のソースコード内には display: inline-block; とあります。
これのことだよ?これってCSSだよ?えー!? ( ̄∀ ̄;)

じゃあp要素の中で何かを横に「並べたくない場合」はどうするか。
p要素内は横並びに出来る要素(旧インライン要素)しか入れ子できないわけで、改行を用いずに要素を下に落とすには。

<p>
  <div>横に並べたくない・改行もしない</div>
  <div>横に並べたくない・改行もしない</div>
  <div>横に並べたくない・改行もしない</div>
</p>

これは ダメ なんです。divはブロックレベルですから構文エラー。
なのでこう ↓

<p>
  <span style="display: block;">横に並べたくない・改行もしない</span>
  <span style="display: block;">横に並べたくない・改行もしない</span>
  <span style="display: block;">横に並べたくない・改行もしない</span>
</p>

これはOK のはず なんだが、html5.2の仕様を見るとこれがinvalidのような表現になっている… (:D)┼─┤

んなわけあるかーーーい アホ
って感じ((((笑)

これはたぶん何かの間違い(表現の間違い)

これ間違いだと思います。表現的な (´・ω・`)
ちょっと調べましたら、全く同じことを思っている方が日本にもいらして既に記事にされてました。

HTML5.2のp要素の変更に言及するのは危険 | ぴんくいろにっき

2017年の末に勧告が出たHTML 5.2、そのp要素にはインラインブロックを禁止するような一文がありますが、HTMLでそんなことはまずできないのでは……仕様がおかしいぞ。

この一文については驚きつつも「たぶん表現の仕方なんやろうなぁ…。」と思ったりもして。
実際海外ではもうかなりの論争になってます。
論争というか、「書き方がおかしいだろ。」という意味でのアレでソレであって「変更しないでくれ」ではないですね。
これが実際に行われる仕様変更だとしたらマジであり得ないです(笑)

CSSデザイニングがhtml定義に影響を与えるようになる なんてことが有ってはならないですし、そうなればweb上からデザインが消えてしまいます。

私が最も驚いたこと

この一文があったことよりもさらに驚いたこと。
web屋であろう方がフツーにサラっとこの内容を紹介していることです(笑)
「pタグの仕様が変更されたのでみなさん気をつけましょうね。」ぐらいな感じで!!! ((((´=д=`)))))
これってそんなに簡単に済ませて良い内容ではないですよ。
それこそhtmlの根幹を揺るがすようなことだと思うので。

たぶんあれやなぁ…。こういう方はもう既にしゃちょーさんレベルで、実務は下っ端にさせていて。
自分でhtmlコーディングをすることがもはや無い 方々なんだろう。たぶん。
web屋というよりもwebの情報屋…。
うーーーーーーん ( ̄∀ ̄;)
こういうところにwebデザインとか頼まない方が良いよねやっぱり。

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

webのあれこれ