以下ページ構成があります。
【ページ構成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ベストアンサー
- 回答日時:
確かにdlを使うのはおかしいですね。
dlの用途については、変遷がありHTML4.01では、「DL要素の応用として、例えば対話のマーク付けがある。 DT要素が話者を示し、DD要素が話の内容を示す、というものである。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
でしたが、HTL5では、明確に否定されています。
『The dl element is inappropriate for marking up dialogue.( http://www.w3.org/TR/2011/WD-html5-20110525/grou … )』
--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/grou … )」
簡単に言うと、「用語と定義」のみならず、何がしかのトピックとその説明になります。この場合他のブロック要素と異なるのは、
<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
No.3
- 回答日時:
代替文字の例ですが
<li>手順1:ファイルメニューを選択します</li>
<p><a href="img="002.png"><img="t002.png" alt="メニューバーのファイルをクリックすると項目が現れるので、それから「保存」を選択します。"></a></p>
</li>
のように画像がなくても意味が通じるように書きます。いくら長くても、画像が読み込まれすれば表示されません。
一番よくわかるのは、Lynxなどのテキストブラウザで眺めてみることです。
No.1
- 回答日時:
その部分とは違うんだけど, 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属性で「全体図画像」とか「手順画像」っていかがなものだろう.
自分でもどうなのかと考えているのですが。
中々いいものが思いつかなくてこれになってます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- その他(開発・運用・管理) フォルダの中にファルダを作成してファイルを格納するバッチコマンド 1 2022/06/30 11:39
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- その他(ソフトウェア) コマンドプロンプトについて教えてください。 状況: 画像編集ソフト上でネットから保存した画像を使うの 3 2022/05/26 11:14
- Android(アンドロイド) Aloha Browser でダウンロードしたファイルをPCに転送するには? 1 2022/05/23 18:54
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLで組織図を作成する方法
-
<table>の高さ固定。情報増加時...
-
html/cssの、navを2段にする...
-
ボックスの幅を内容に合わせたい
-
横並びのボタンの背景を片方だ...
-
アコーディオンメニューがかく...
-
画像にリンクを張ると画像がず...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
-
css li に入れ子で適用する範囲
-
Dreamweaverで、ul要素の下に写...
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
divタグ内のコンテンツが重なっ...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
マウスアウト後も画像が消えた...
-
番号付きリスト(<Ol><Li>・・...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
divタグ内のコンテンツが重なっ...
-
リストを2つに分割して、それぞ...
-
複数行にまたがる括弧を表示し...
おすすめ情報