「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31

web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を

[kuro_pp]

HTML5にブロック要素もインライン要素もない、という時点で私の知識が古いことが判明しオフィスで震えている

[kojika17]

仕様は、W3CではなくWHATWGを見ましょう

[gachapining]

最近わかったのだが、「HTML5 ではブロック要素とインライン要素がない」という主張では、要素の親子関係の制約の話をしていて、要素がデフォルトで display: block なのか inline なのかという話はしていない

[usaribon]

W3C出典にしてる時点でお察し。　今はWHATWGが正式

[rna]

HTML4.01についてはDTD読むべし。strict DTDではbody直下にimgはNG、transitional DTDならOK。DTDの要素定義は親要素を制約しないのでimg要素の定義だけ見てもわからない。

[megazalrock]

HTML5.3は勧告されない。WHATWGとの合意で策定が中止されている。HTML4ならまだしもHTML5の文章を参照するのはおかしい。HTML Living Standardを参照すべき。

[snipesnaps]

本文、マジで技術書を普通に原文通読すればわかることをそれをしない人のために書いてる記事なのに、ブコメで説教くさいとか仕事できなさそうとか散々で笑た。技術書読めない上に人叩きたいなら他所でやればいいのに

[bee_d2b]

ブコメも読解力ない人が多すぎ。タイトルで風呂敷広げすぎた感あるとはいえ、「件のツイートよりもこの記事、この記事よりも仕様読め」って本人言ってるんだからこの人に文句言ってないで自分で調べましょうね。

[ignio]

HTML Living Standard でも、imgタグがpでくくられていないサンプルがある。そちらを参照すべきと言っている人は何にケチをつけたつもりになっているのだろう。

[sho]

件のTweet、ちゃんと批判されてんのねと思ったらW3C参照してて吹いた。変化が激しくてたいへんな世の中だよなぁ。元Tweetの人の作ってるサイトはアクセシビリティ的にもクソで、三流と言って良いと思います。

[demAge]

仕様全文に比べたら短くていいと思うけど。長いって言ってる人議事録読まずに後から文句言うタイプ？

[manhole]

“HTML5ではインライン要素は存在しない。もちろん、ブロックレベル要素も。”

[Nyoho]

ブコメ👍🏼

[aoasagi]

自戒の意味も込めてなんですけど、この業界、知識をアップデートしなくてもそこそこ生きていけるから最新仕様読まない人多すぎな気がする。せめてMDNくらい見よう

[kobayashi_shinji]

パンツ履かずにズボン履くみたいでキモいのでpとかfigureとかdivとかで囲っておきたい派

[eagleyama]

結論だけでお腹いっぱい

[crimsonstarroad]

こういうの説教くさいとかダラダラ長いっていう人は、簡単な単純な仕事しかできなさそうという偏見。まあ長いけど。

[oplika]

話題のツイートを知らなかったのでそんな騒ぎが起きていたの…？って所でびっくりしている

[vlxst1224]

つまるところ今日のHTMLはブラウザに解釈させるための呪文というだけでなく、クローラーに備わる人工知能に文脈を辿らせドキュメントの趣旨を正しく理解させるためのアジェンダでもある、ということなんだよな

[stp7]

ブコメ、この記事ですらめんどくさいなら仕様書読めよ。ちゃんとWHATWGを確認しろよ。

[tossy_yukky]

HTML5にブロック要素、インライン要素って概念がないの知らなかったしにたい

[Rishatang]

「ドキュメントでなくブラウザの仕様が仕様」って書いている人いるけど、Chromeの実装が仕様から外れてるやつ具体的にどんなのがあるんだろ？先行実装とか仕様に書いていない部分の独自解釈とかなら思い浮かぶけど…

[daruyanagi]

HTML むずい

[hogeaegxa]

web屋って意識の高さが売りで、英語なんか読めて当たり前っていつも言ってるのに、実際こういうのがあると仕様書無視して紛糾する意識低いことになるんだな

[hayashin10]

HTML5はインライン要素もブロック要素もないけど、HTML5で追加されたタグは全てインライン要素になっているんだよな。CSS書くとなんとなくわかる。実際は違うかもだけど実質そうなってるみたいな

[rAdio]

そういう面倒臭いのは、それが本業でもなないのなら、モダンでインテリジェンスなツールやフレームワークに頼ってしまった方が良さげ。

[K-Ono]

ついったでは奥は深くないといいこの文書では奥が深いという。どっちやねーん／ぶっちゃけ仕様よりもchromeの実装の方が「正しい」んちゃうかもはや。

[s15i]

それはそうと、Webフォントとかのアイコンを表示するのにi要素を用いる風習についての解説をどなたか…

[cl-gaku]

blockとinlineはやっぱりあるのかよ。もうなにもわからん

[doubleup]

仕様を確認するんだったら今はW3CじゃなくてWHATWGだったような？と思ったら既にツッコミが入ってた

[jislotz]

15年ぐらい前は、こういう感じのHTMLについての記事をわりとよく見かけた。

[ultimatebreak]

所詮マークアップ言語であり、文章構造の設計または解釈次第なので、確実な正解というものはない。とくに文章以外がメインとなるWebサイトにおいては文章として成り立たないことも多いので、細部を気にし過ぎたら負け

[kathew]

え。ブロック要素とインライン要素ないの…？あと文字が入るところにとりあえずpタグ使いたがる人多すぎ（関係ない愚痴）／マークアップ的に正しければ良いのでそんな制約あるわけないよねとも。言及されてるfigureも

[Kuichi]

文脈でpで囲うのと、pで囲わなければならないという思い込みは結果は同じでも全然違うんだよなあというようなことを元ツイを見て思ったことを思い出した。それはそれとしてセマンティックな原稿は見たことがない。

[ghostbass]

そういうスタイルならどっちにしろ スタイルの都合でblockなもので囲むからなあ。/ それはそうとtable以外の要素に display:table*を使っているコードが気持ち悪い。上下位置合わせるのは確かに便利なんだが。

[strawberryhunter]

このようにデザイナーは勉強が中途半端で思い込みで仕事をするので、イラストと配色だけ期待している。

[toaruR]

Pで囲まなきゃならないんだったら、<p src=~~~ の仕様の方が楽よな