以下ページ構成があります。
【ページ構成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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ulタグやliタグの中でbrタグ...
-
リストマーカーをボックス内に...
-
divタグ内のコンテンツが重なっ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
htmlの<ol>タグで、数字などを...
-
<li>の横並びで、<span>のとこ...
-
navの横並びにsnsアイコンを付...
-
CSSで、リスト<li>の、アンカー...
-
<table>の高さ固定。情報増加時...
-
nth-childが効かない…。原因は...
-
CSS リスト 外枠から文字と画...
-
レスポンシブWebデザインでリン...
-
css でのプルダウン子階層の色...
-
ulやliの記述方法について
-
IEでスクロールできない
-
html <li>の中の文字一部に色を...
-
css ol liにdisplay:inlineを設...
-
ページを開いているときのリン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
HTMLで組織図を作成する方法
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
htmlの<ol>タグで、数字などを...
-
HTML5のfooterに見出しを付けて...
-
css 横並びのナビゲーションバ...
-
疑似クラス :activeが効きません
-
list-style-type部分だけ大きく...
おすすめ情報