マークアップを全てspanとdivにするのはGoogle先生にどんぶりに盛ったパスタを素手で食べさせるようなものだ

マークアップが全部spanとdivじゃない理由は？に対して、分かりやすいコジツケで「SEO」と言いがち（叩かないで…
実利の面で「マシンリーダブル＆アクセシブル」だけだと弱くて、直接的に「儲かりまっせ」みたいな事を言いたく…
もう「そう決まってるから」でもいいかな…

— さとうあまみ👾CTO@necco (@PentaPROgram) August 27, 2023

この記事作成のきっかけとなった投稿です。
マークアップに関して実利を感じることが難しいのは私も感じていて、それでも正しくあろうとする自分との闘い、みたいな日々です。

少しでもマークアップを頑張りたいと思えるように、理屈ではなく感覚的に伝わればいいなと思います。

spanとdivの役割

spanやdivは、特定の部分をグループ化したり、スタイルを適用するための汎用的な要素です。

ぼく
「ふむふむ・・・」
「でも、何で全部spanとdivで作られていないんだろう？」

おじさん
「それはね！」

ぼく
「！？」

おじさん
「それはね、すべての情報を同じ方法で見せると、内容の違いがわかりにくくなるからだ。それに、ウェブページを読むツールやアクセシビリティを考慮すると、適切なマークアップが必要なんだよ。」

ぼく
「もう少しわかりやすく説明してよ、おじさん！」

お皿と料理に例えて理解する

おじさん
「例え話で考えてみよう。料理を盛るお皿がHTMLの要素、それに乗る料理がコンテンツだと思ってね。」

ぼく
「はい。」

「マシンリーダブル」＝お皿を見て料理を想像できる

おじさん
「料理が盛られていないお皿が目の前にあるとしよう。中身が入っていなくてもお皿の形や大きさから、どんな料理が乗るかなんとなく想像できるでしょ？」

ぼく
「確かに、大きな平らなお皿なら、焼き魚か何かだろうし、深いお皿なら、スープかなって想像しますね。」

おじさん
「スキレットなら熱々の料理が入りそうだし、ガラスのお皿なら冷たい料理だろうな」

ぼく
「用途に合わせたお皿を使用することで、どんな料理が盛り付けられるかが予想できる・・・確かに」

おじさん
「spanとdivだけでマークアップするということは、料理を全部どんぶりに盛り付けるようなもんだな」

ぼく
「ひえっ」

おじさん
「だが、どんぶりに盛られたからといって料理の味には影響ない。世の中、美味しけりゃ盛り付けは気にしないという人は多い」

ぼく
「Google先生もどんぶりでもおいしいって言ってくれますか？」

Google先生
「うん」

ぼく
「！？」

Google先生
「みんながおいしいっていってる料理はおいしいと思うよ」

おじさん
「Google先生は周りの意見に流されるからなー」

ぼく
「・・・」

「アクセシブル」＝料理を適切な方法で食べられる

おじさん
「ちなみに、盛られる料理を想像できるということは、それに合わせて食べ方も変えられるということだ」

ぼく
「熱い料理なら、フーフーして食べますよね」

おじさん
「そうだね。箸、フォーク、スプーンやナイフといった食器も事前に用意できる」

ぼく
「じゃあウェブサイトも・・・！」

おじさん
「そう！適切なマークアップを行うことで、ユーザーの閲覧状況や特徴に合わせて最適な表現や操作ができるようになる！」

ぼく
「すごい！」

おじさん
「spanとdivだけでマークアップするということは、どんな料理も素手で食べさせるということだな」

ぼく
「ひえっ」

まとめ

ぼく
「なるほど、だからすべてをspanやdivで作らないんですね。」

おじさん
「Google先生はどんぶりに盛られてても、素手で食べるのを強制されても、人気があって美味けりゃOKって言ってるのよ、今は」

おじさん
「でも、そのうち盛り付けも評価の対象にするぞ！とか言い出すかも」
「こんなもん食えるか！ってウェブページが一瞬で検索ランキング外に」

ぼく
「ひえっ」

マークアップちゃんとしましょう！