タグの組み方について

質問

以下ページ構成があります。

【ページ構成1】
<h2>目的：ファイルの保存</h2>
<dl>

<!--このページで何をするのかの説明-->
<dt>ファイルの保存手順を解説します。</dt>

<!--このページで何をするのかの全体図-->
<dd><a href="img="001.png"><img="t001.png" alt="全体図画像"></a></dd>
</dl>

<H3>セクション1．ファイルの保存ウィンドウ呼び出し</H3>
<ol>
<li>手順1：ファイルメニューを選択します</li>
<p><a href="img="002.png"><img="t002.png" alt="手順画像"></a></p>
<li>手順2：～～</li>
<p>手順2画像</p>
</li>
<ol>

<H3>セクション2．ファイルの保存場所の選択</H3>
<ol>
～上記タグ構成と同じため省略～
<ol>
【質問】
H2がページテーマで、H3からH2の内容を満たす手順を組んでおります。

h2の部分なんですが、
dlタグで組むのは不自然でしょうか？

H2・・・ページの目的
dt・・・ページ目的にあたりすることを記述
dd・・・ページ目的の概念図(こんなことしますの全体プリントスクリーン画像)

全てのページに、目的概念図があるわけではないので、その時はddは削除しています。
dlは定義済みリストということですが、
私のようなH2の部分でdlを使うのはまずいでしょうか？
<p>タグ二つ(dt、ddをpに変更し、dl削除)を使用するべきでしょうか？

よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

確かにdlを使うのはおかしいですね。dlの用途については、変遷がありHTML4.01では、
「DL要素の応用として、例えば対話のマーク付けがある。 DT要素が話者を示し、DD要素が話の内容を示す、というものである。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-DL )」
でしたが、HTL5では、明確に否定されています。
『The dl element is inappropriate for marking up dialogue.( http://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-dl-element )』
--dl要素は、対話をマークアップするのに不適切です。---

そのかわり、dl要素は定義リストではなくなります。
「The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each name. ( http://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-dl-element )」
　簡単に言うと、「用語と定義」のみならず、何がしかのトピックとその説明になります。この場合他のブロック要素と異なるのは、
<dt>用語・トピック(話題)・メタデータ</dt>
<dd>その定義や説明、話題など</dd>
<dd>上のddと並列な選択肢--たとえば画像とか --</dd>
<dt>次のグループ</dt>
<dd>その説明</dd>
となることです。

　この場合、<dl>内にひとつの<dt><dd>グループしか存在しないようですから、dlを使用すると面倒になります。

<h2>目的：ファイルの保存</h2>
<dl>
　　<dt>ファイルの保存手順を解説します。</dt>
　　<dd><a href="img="001.png"><img="t001.png" alt="全体図画像"></a></dd>
　　<dd>
　　　　<H3>セクション1．ファイルの保存ウィンドウ呼び出し</H3>
　　　　<ol>
　　　　　　<li>手順1：ファイルメニューを選択します</li>
　　　　　　　　<p><a href="img="002.png"><img="t002.png" alt="手順画像"></a></p>
　　　　　　</li>
　　　　　　<li>手順2：～～
　　　　　　　　<p>手順2画像</p>
　　　　　　</li>
　　　　<ol>
　　<dd>
　　　　<H3>セクション2．ファイルの保存場所の選択</H3>
　　　　<ol>
　　　　～上記タグ構成と同じため省略～
　　　　<ol>
　　<dd>
</dl>
になってしまいます。これは、意味的におかしいです。なぜなら、「ファイルの保存ウィンドウ呼び出し」と「ファイルの保存場所の選択」は連続データであって、並列ではないからです。

　もちろん、
<h2>目的：ファイルの保存</h2>
<div class="section">
　　<h3>ファイルの保存手順を解説します。</h3>
　　<div class="figure"><a href="img="001.png"><img="t001.png" alt="全体図画像"></a></div>
　　<ol>
　　　　<li>セクション1．ファイルの保存ウィンドウ呼び出し
　　　　　　<ol>
　　　　　　　　<li>手順1：ファイルメニューを選択します</li>
　　　　　　　　　　<p><a href="img="002.png"><img="t002.png" alt="手順画像"></a></p>
　　　　　　　　</li>
　　　　　　　　<li>手順2：～～
　　　　　　　　　　<p>手順2画像</p>
　　　　　　　　</li>
　　　　　　<ol>
　　　　</li>
　　　　<li>セクション2．ファイルの保存場所の選択
　　　　　　<ol>
　　　　　　　～上記タグ構成と同じため省略～
　　　　　　<ol>
　　　　</li>
　　</ol>
</div>
で良いですが、これではあまりにも煩雑なので、通常は
<div class="section" id="File_Registration">
　　<h2>目的：ファイルの保存</h2>
　　<p>ファイルの保存手順を解説します。</p>
　　<div class="figure"><a href="img="001.png"><img="t001.png" alt="全体図画像"></a></div>
　　<div class="section" id="fieMenue">
　　　　<h3>ファイルの保存ウィンドウ呼び出し</h3>
　　　　<ol>
　　　　　　<li>手順1：ファイルメニューを選択します</li>
　　　　　　　　<p><a href="img="002.png"><img="t002.png" alt="手順画像"></a></p>
　　　　　　</li>
　　　　　　<li>手順2：～～
　　　　　　　　<p>手順2画像</p>
　　　　　　</li>
　　　　</ol>
　　</div>
　　<div class="section">
　　　　<h3>ファイルの保存場所の選択</h3>
　　　　<ol>
　　　　　　～上記タグ構成と同じため省略～
　　　　<ol>
　　</div>
</div>
とします。
　実はHTML5は、そのような仕様になっています。すなわち
<section id="File_Registration">
　　<h2>目的：ファイルの保存</h2>
　　<p>ファイルの保存手順を解説します。</p>
　　<figure><a href="img="001.png"><img="t001.png" alt="全体図画像"></a></figure>
　　<section id="fieMenue">
　　　　<h3>ファイルの保存ウィンドウ呼び出し</h3>
　　　　<ol>
　　　　　　<li>手順1：ファイルメニューを選択します</li>
　　　　　　　　<p><a href="img="002.png"><img="t002.png" alt="手順画像"></a></p>
　　　　　　</li>
　　　　　　<li>手順2：～～
　　　　　　　　<p>手順2画像</p>
　　　　　　</li>
　　　　</ol>
　　</section>
　　<section>
　　　　<h3>ファイルの保存場所の選択</h3>
　　　　<ol>
　　　　　　～上記タグ構成と同じため省略～
　　　　<ol>
　　</section>
</section>
と、なるはずです。
（実は、上記HTML4.01のマークアップのサンプルのclass名は、HTML5の要素(タグ)の名称や用途に基づいているのです。）
sectionの階層が、章→項→節→小節→・・・の階層を示すことになるのです。順番は並列するsectionで決まります。
　先の回答のように、セクション1とかの文字もスタイルシートで書き加えられます。
【divはほとんど使わなくなります。】

　ある意味とても楽になります。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^
　Textという数学用のマークアップ？言語がありますが、それに習っている。Textでは、
部 \part
章 \chapter
節 \section
小節 \subsection
小々節 \subsubsection

お礼

やはり、変なんですね。

分かりやすい参考例ありがとうございました。
Hのタグ構成も修正しました。

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

回答No.3

ORUKA1951

代替文字の例ですが
<li>手順1：ファイルメニューを選択します</li>
　　<p><a href="img="002.png"><img="t002.png" alt="メニューバーのファイルをクリックすると項目が現れるので、それから「保存」を選択します。"></a></p>
</li>
のように画像がなくても意味が通じるように書きます。いくら長くても、画像が読み込まれすれば表示されません。

　一番よくわかるのは、Lynxなどのテキストブラウザで眺めてみることです。

お礼

こちらも参考になりました。
altの修正もしていこうと思います。

回答No.1

Tacosan

その部分とは違うんだけど, h3 のところはおかしくないですか? ol要素の中に p要素は (直接) 入らないはずなんだけど.

あと, img要素の alt属性で「全体図画像」とか「手順画像」っていかがなものだろう.

補足

ご指摘ありがとうございます。

>ご指摘いただいた通り、タグ構成を間違えていました。
正しくは、<li>の中に<p>です。

<H3>セクション1．ファイルの保存ウィンドウ呼び出し</H3>
<ol>
　<li>手順1：ファイルメニューを選択します
　　<p><a href="img="002.png"><img="t002.png" alt="手順画像"></a></p>
　</li>
　<li>手順2：～～
　　<p>手順2画像</p>
　</li>
<ol>

>img要素の alt属性で「全体図画像」とか「手順画像」っていかがなものだろう.
自分でもどうなのかと考えているのですが。
中々いいものが思いつかなくてこれになってます。