【不人気のdl】レシピサイトのHTMLマークアップ～材料欄はdl？手順はli？

料理レシピサイトを作るに当たってHTMLタグをどうつけるか迷った部分が2つあります。

1つ目は材料。まずdlか、ulか。

加えて材料欄には”A”などの表記でグループ化するパターンがあります。

これをどうするか。

2つ目は作り方の手順。こちらはolかhか。

ちなみにあのCOOKPAD（クックパッド）はdivだらけです。ですのでタグを吟味することはサイト評価上あまり重要ではないと思います。ただ上司と「divを限りなく減らすにはどうすればいいか」的な掘り下げをしたこともあるほど一時期こだわっていたので、今回もこだわってみました。

材料欄は何タグ？dlかulか

まず材料欄はdlかulかという問題。

まず大手サイトがどうしているのか調べてみました（2022年現在）。

とりあえずわかることは大手サイトでもそれぞれ違うということです。つまり「みんなこうしているよ」という主流はなさそう。作り手次第なようです。

まずクックパッドはdivだらけなのでマークアップについては参考にしないことにします。

キッコーマンのdlの使い方はdtが食材、ddが分量です。これは当然ですが、他に材料のチェックができるようにinputタグもついていました。また”A”はh4でした（材料という見出しがh3）。

クラシルはulです。li div divというパターン。”A”は別途タグ付けをせず材料名と同タグ内に書かれていました。

で、個人的な結論はdl。理由は「こういう時にdlを使わないとしたらいつ使うのか？」と思うからです。レシピの材料欄って”食材名ー分量”という一対の組み合わせが基本なので。

一応下準備として大手サイトをいくつか調べましたが、自分の中ではdlでほぼ決めていました。ただ思い返すとdlはulやtableに比べてあまり使われていません。なのでもしdlで書いているサイトが一つもなかったら再考しようかなと思っていました。そしてキッコーマンが使っているのを発見して確定した感じです。

なお私はdlに対しての思い入れが少し強めです。初めてHTMLタグを学んだとき教科書と授業の影響で、liやtableなどよりもまずdlから詳しく覚えました。だから”一対の組みあわせ時はdl”というのが常に頭にあります。

グループ”A”はどうするか

もう一つの課題、以下のAをどう書くかです。

上でも書きましたが、キッコーマンは”A”をh4で、クラシルは材料名と同じタグ内に書いていました。それ以外のサイトも含めて、これ！っていうのを発見することはできませんでした。

で、どうしたかというと…

疑似要素beforeでつけました。

適切なマークアップという点ではこれ一番やっちゃいけないやつですね、たぶん。作り方で「材料Ａをまとめて投入する」みたいな使い方をする以上、Aは意味のある文字です。装飾ではない。

この記事はそのコーディングしてからかれこれ数か月経っているタイミングで今書いています。ですのでなぜこうしたのかは忘れてしまいました。たぶんレイアウトや運用上の理由からだったのだと思います。

tableはどうなのか

なお材料欄はtableというパターンも考えました。これは適切なマークアップというより運用上の理由からです。WordPressのブロックでつくる場合、便利かもしれないという可能性を感じたからです。でもやはり材料欄にtableというのはdlに比べるとしっくりこなかったので具体的な検討をせずにやめました。

作り方は何タグ？liかhか

作り方は作業手順なのでliならばolです。ただh見出しを使うパターンももちろんあります。

これも他のサイトを参考に見てみるとol,liが適切に思えてきます。特にレシピの1工程が2~3行くらいの場合。画像がある場合も1手順につき1画像が多いので特に違和感はありません。

ただ手順中に詳細な解説を挟む場合はhのほうがよさそうです。実際ブログ形式でレシピを載せている場合は自然にhにすることが多いようです。

今回作ったサイトでは作り方手順を二種類に分けることにしました。

「作り方概要」「作り方詳細」という形です。前者は参考程度にさっと見て作れる中級者を、後者は初心者を対象にしています。このダブル形式がどのくらいユーザーにとって良いのかは不明ですが、思いついたので試してみようと思いました。

で概要の方はol、詳細の方はh3（作り方詳細という見出しはh2なので）にしました。

もし受注でつくる場合は、作り方のボリュームや形式についてしっかりと確認しておくことが大切かと思いました。