メリット、デメリットのタグ構成

質問

ある物に対してメリット、デメリットを記述する場合のタグを構成がわからないのです。
<p>タグを連続で記述すると別段落という認識になってしまうのではと思っています。

<マークアップ文章>

本のペーパレス化について

メリット
・保存場所がいらない。
・かさばらない

デメリット
・すでに購入した本は、取り込みの手間が発生
・普通に購入するより値段が高い

以上です。
ご教授よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

HTMLは、その文章を読み解き、要素に分解して、それをそのままマークアップしていけばよいのです。
　文書全体の構成がわかりませんが、示された文章からだけだと
・保存場所がいらない。
・かさばらない
　の部分は、箇条書きですね。箇条書きとは端的に要約したものです。この場合順不同リストが適しているようです。
<ul>
　<li>保存場所がいらない。</li>
　<li>かさばらない</li>
</ul>
が良いでしょう。

では、この上の階層ではどうでしょう。単純にこれだけでしたら、定義リストを使用すべきでしょう。定義リストの用途は変遷がありますが、おおむね「フレーズ」と「その説明」と言う理解で良いでしょう。HTML4.01では仕様書に会話のマークアップが示されていましたが、HTML5では会話への用途は否定されています。
<dl>
　<dt class="merit">メリット</dt>
　<dd>
　　<ul>
　　　<li>保存場所がいらない。</li>
　　　<li>かさばらない。</li><!-- 上と同じだけど? -->
　　</ul>
　</dd>
　<dt class="demerit">デメリット</dt>
　<dd>
　　<ul>
　　　<li>すでに購入した本は、取り込みの手間が発生</li>
　　　<li>普通に購入するより値段が高い</li>
　　　<li>何年も経って使えるのか？</li>
　　</ul>
　</dd>
</dl>
　のようにしたり、
<div class="section merit">
　<h2>メリット</h2>
　<p>なんたらかんたら</p>
　<ul>
　　<li>保存場所がいらない。</li>
　　<li>かさばらない。</li><!-- 上と同じだけど? -->
　</ul>
</div>
<div class="section demerit">
　<h2>デメリット</h2>
　<ul>
　　<li>すでに購入した本は、取り込みの手間が発生</li>
　　<li>普通に購入するより値段が高い</li>
　　<li>何年も経って使えるのか？</li>
　</ul>
</div>
としたりします。要は、文書全体(特に直近の親)の構成などによりマークアップしていくことになるでしょう。

お礼

サンプルまで頂きありがとうございます。
dlタグで実施することにしました。

情報ありがとうございました。。

回答No.1

DrFell

●どう見ても見出しと箇条書きです。段落はないようです。

<h1>本のペーパレス化について</h1>
<h2>メリット</h2>
<ul><li>保存場所がいらない。</li>
<li>かさばらない</li>
</ul>
<h2>デメリット</h2>
<ul><li>すでに購入した本は、取り込みの手間が発生</li>
<li>普通に購入するより値段が高い</li>
</ul>

h1……そのページで一番格の高い見出し（ページ見出し・大見出しと仮にすると）
h2……h1の次に格の高い見出し（中見出し）
ul……番号のない箇条書き
li……箇条書きの中の行
今回は関係ありませんが、ulをolに変えると番号のある箇条書きとなります。

●場合によってはメリット・デメリットも箇条書きになるかも知れません。その場合は
<h1>本のペーパレス化について</h1>
<ul>
<li>メリット
<ul><li>保存場所がいらない。</li>
<li>かさばらない</li>
</ul>
</li>
<li>デメリット
<ul>
<li>すでに購入した本は、取り込みの手間が発生</li>
<li>普通に購入するより値段が高い</li>
</ul>
</li>
</ul>
箇条書きの中に更に箇条書きとなっています。

参考
http://www.kanzaki.com/docs/html/htminfo13.html
http://www.kanzaki.com/docs/html/htminfo11.html

お礼

情報ありがとうございます。

試してみて、DLタグで実施することにしました。
情報ありがとうございました。