Zenn
🗿

連番の見出し＋文章を組み合わせたときにどうマークアップするか

2021/01/31に公開
HTML
idea

悩んでいる（解決したい）こと

連番+太文字+文章のデザインをどうマークアップするか
（ピンクの枠で囲んでいる部分）

説明用画像：用語とその説明を組み合わせたリストの例を示しています。

本記事における結論

  • dlを用いてマークアップする
    • 今回の例では、太文字部分には用語、文章部分はその説明が来ているため
  • 「見出し」は文章の要約である
    • 続く文章をまとめているような文であればhxで良い

結論到達までの道のり

現状

これまでの自分は、下記のようなマークアップをしていた。
順序付きリスト内で改行をするやり方である。

<ol>
 <li>
  EVE QUICK<br>
  時々使う頭痛薬のひとつ。バファリンより効かない気がする。
 </li>
 <li>
  バファリン<br>
  めったに使わない頭痛薬のひとつ。効き目が強い。気がする。
 </li>
 <li>
  ロキソニン<br>
  ほぼ使わない頭痛薬のひとつ。効き目がどうだったか思い出せない。
 </li>
</ol>

こういうマークアップをした理由は、以下の通りだ。

  • 連番だから
  • 見た目上は改行されているが、コロンなどで繋げば、別に改行する必要は無いと感じたから

一言で表すと、「連番だから」。

考えたこと

上記マークアップがしっくりこない。
おおよそ次の2つが原因かもしれない。

  • マークアップが見た目に依存しすぎている。
    • 連番になってはいるが、順序が入れ替わることで問題が生じる内容か？
  • 文章構造を把握できていない。
    • 順序付きリストではなく、見出しと文章の組み合わせではないか？

マークアップ案

しっくりこない原因を解決すべく、別のマークアップを考える。

hタグとpタグの組み合わせ

見出しと文章の組み合わせを表現する。

<h2>1. EVE QUICK</h2>
<p>時々使う頭痛薬のひとつ。バファリンより効かない気がする。</p>
<h2>2. バファリン</h2>
<p>めったに使わない頭痛薬のひとつ。効き目が強い。気がする。</p>

dlタグ

見出しと文章ではなく、用語とその説明という捉え方をする。

<dl>
 <dt>1. EVE QUICK</dt>
 <dd>時々使う頭痛薬のひとつ。バファリンより効かない気がする。</dd>
 <dt>2. バファリン</dt>
 <dd>めったに使わない頭痛薬のひとつ。効き目が強い。気がする。</dd>
</dl>

「見出し」が意味するものと、dlの妥当性

別案を考えているとふと、「見出し」とは何を意味しているのか？と気になった。

見出しとは？

見出し （みだし、英語: headline）とは、新聞を始めとする様々な記事、文章において内容の要点を非常に短い言葉にまとめ、本文より大きな字で章（チャプター）や節（セクション）の最初に置かれる言葉。

参考：ウィキペディア（見出し）

これを見ると、見出しに続く文章の要点が見出しとして書かれるとある。その結果として単語で終わったり、文章としての体をなしていなかったりするが、あくまで要約「文」が見出しに当たるということだ。

上記を踏まえて、「現状」に書いたマークアップを再度見てみる。

liの各一行目に書かれているのは、頭痛薬の製品名になっている。改行タグを挟んだ次の文章を要約したものではないのは明らかだ。この時点で、h2タグとpタグでマークアップをするのは適当ではないと判断できる。

ここで、dlタグを調べてみる。

dlタグはどういう場面で使うのか

MDNの該当ページを見てみよう。
MDNにはこう書かれている。

HTML の dl 要素は、説明リストを表します。

これだけでは分からなかったため、こちらのサイトからも引用する。
参考：HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説 | webliker

つまり「dtの内容をddで説明しているような形になっていれば問題ない」ので、単語の解説をするような辞典的な書き方でなくてもOKになりました。

『dtの内容を説明している文章をddに書く』ということなので、今回の要件にピッタリなのではないか。

ウェブサイトに使われている実際のマークアップを見てみる

例1：ol > liの中で改行している

つまりぼくと同じ書き方。

ライオン株式会社
考え方と方針／マネジメント｜環境とともに｜サステナビリティ | ライオン株式会社

例2：見出し+pタグを使用している

先ほど「適当ではない」と述べたが、使用例はある。

DNP 大日本印刷
印刷・加工用紙調達ガイドライン | DNP 大日本印刷
三菱ケミカル株式会社
調達・購買｜企業情報｜三菱ケミカル株式会社

例3：説明リスト（dl dt dd）を使用している

今回自分が行き着いた結論と同じマークアップをしている。

ミツエーリンクス
プライバシーポリシー | ミツエーリンクス

その他事例

pタグやdivタグが使用されている。段落なのは間違いない。あとは見た目をリスト風に整えるだけだ。

積水化学
環境会計｜ CSR｜積水化学

改めて結論

今回例に挙げたマークアップは、文章構造として以下のようになっている。

【リスト1】
・用語（頭痛薬の製品名）
　→説明文（製品に対する説明）
以下繰り返し...

これを表現するのに、dlタグを用いた説明リストが良いと判断した。
なので、結論としてマークアップはこうなる。

<dl>
 <dt>1. EVE QUICK</dt>
 <dd>時々使う頭痛薬のひとつ。バファリンより効かない気がする。</dd>
 <dt>2. バファリン</dt>
 <dd>めったに使わない頭痛薬のひとつ。効き目が強い。気がする。</dd>
</dl>

おしまい

Discussion