前提・実現したいこと
HTML5でW3Cに準じたソースを書きたいです
発生している問題
タグ構造の「section>h[番号]+p」と「dl>dt+dd」を使うかで迷っている
該当のソースコード
html
1 2<!-- 3A=Bに対する見出しにもなるし、Bによって説明される言葉にもなるもの 4B=Aに対応する本文にもなるし、Aの説明文でもあるもの 5--> 6 7<section> 8 <h2>A</h2> 9 <p>B</p> 10</section> 11 12 13<dl> 14 <dt>A</dt> 15 <dd>B</dd> 16</dl>
試したこと
タグの用途をネットで検索。
↓リファレンス http://www.htmq.com/html5/indexa.shtml
<section>=意味を表す見出しを付けることができるひとかたまり <h1>〜<h6>=見出し <p>=ひとつの段落 <dl>=中に説明される言葉、 対応する説明を配置する <dt>=説明される言葉を表す <dd>=対応する説明↓W3C日本語訳 http://www.html5.jp/tag/elements/index.html
<section>=コンテンツのテーマをグループ化するもの <h1>〜<h6>=セクションの見出し <p>=段落 <dl>=1 個以上の名前(dt 要素)と、それに続き、1 個以上の値(dd 要素)から構成 <dt>=用語説明のグループの用語または名前の部分 <dd>=用語説明グループの説明や定義や値の部分↓調査後の考え
リファレンスを読むと「section>h[番号]+p」と「dl>dt+dd」どちらでもいい気がしますが、W3C日本語訳を読むと、Aが簡潔な言葉なら「dl>dt+dd」を使い、Aが長い文章なら「section>h[番号]+p」を使うといいのかなと思いました。
補足
想定するパターンは下記です。
・パターン1・・・A=商品名、B=商品に対する文章や説明
・パターン2・・・A=プライバシーポリシーの目的や削除や変更や管理方法など、B=その説明やAに対する文章
・パターン3・・・A=トップページの新着情報やオススメ商品や再入荷商品、B=Aに対する文章や説明
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/04 23:05
回答6件
0
ベストアンサー
section
要素とdl
要素の違い
以下のコードでは、「セクション内に見出しAと、段落B」が存在します。この場合は、section
要素内で見出しや段落を複数定義しても、それらはリストにはならず、ひとつのセクションの中にある複数の見出しと段落になります。
HTML
1<section> 2 <h2>A</h2> 3 <p>B</p> 4</section>
一方、以下のコードでは、「説明リスト内に用語Aと、それに関連付けられた説明B」が存在します。この場合は、リスト内の用語と説明が関連付けられているだけのため、dt
要素が見出しとしての役割を持たず、関連付けられたグループはセクションと同等ではありません。また、当然ですが、dl
要素内で定義した用語とその説明は、すべてリストとなります。
HTML
1<dl> 2 <dt>A</dt> 3 <dd>B</dd> 4</dl>
商品名と、それに対する説明のリスト
section
要素, dl
要素のどちらも使うことができます。
それがリストであることが重要ならば、dl
要素を使用すると良いと思います。dd
要素内には、フローコンテンツを入れることができるので、説明が複数の段落になる場合にも対応は可能です。
HTML
1<dl> 2 <dt>テキスト1</dt> 3 <dd> 4 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 5 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 6 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 7 </dd> 8</dl>
また、dd
要素内にsection
要素を入れることもできますが、そのような関連付けが正しいかはわかりません。もし、説明を一つのセクションにすることができ、それがリストであるべきなのであれば、ありえる構造だと思います。
HTML
1<section> 2 <h1>テキスト1</h1> 3 <dl> 4 <dt><h2>テキスト2</h2></dt> 5 <dd> 6 <section> 7 <h1>テキスト3</h1> 8 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 9 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 10 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 11 </section> 12 </dd> 13 </dl> 14</section>
リストであることが重要でなければ、説明リストは使わずsection
要素をそのまま並べても良いと思います。
HTML
1<section> 2 <h1>テキスト1</h1> 3 <section> 4 <h1>テキスト2</h1> 5 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 6 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 7 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 8 </section> 9 <section> 10 <h1>テキスト3</h1> 11 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 12 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 13 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 14 </section> 15</section>
リスト構造にはしたいが、リスト要素は使用したくない場合、ARIAのlist
, listitem
ロールを使用することができます。しかし、この方法では、リスト項目の順序は順不同になります。そのため、順番が重要な場合などには、適切な要素を使用する必要があります。
プライバシーポリシーの目的、管理方法と、それに対する説明
section
要素, dl
要素のどちらも使うことができます。
上でも書きましたが、それがリストであることが重要ならば、dl
要素を使用すると良いと思います。
こういったものは入れ子になっていくことが多いと思いますが、dd
要素内にdl
要素を配置することで、説明リストの入れ子を表現できます。
HTML
1<dl> 2 <dt>テキスト1</dt> 3 <dd>テキスト2 4 <dl> 5 <dt>テキスト3</dt> 6 <dd>テキスト4</dd> 7 </dl> 8 </dd> 9</dl>
新着情報やオススメ商品と、それに対する説明
section
要素, dl
要素のどちらも使うことができます。
上でも書きましたが、それがリストであることが重要ならば、dl
要素を使用すると良いと思います。
ただし、新着情報のリストはdl
要素で記述するべきではありません。新着情報のリストは通常、「日時 : 新着情報の概要」という構造になると思います。ここで、新着情報のリストには、用語(term
)が存在しません。もし、日付を用語とした場合、日付に対する説明をしていることになってしまいます。これは、新着情報を表すリストとして、不適切な関連付けだと思います。今回の場合、順序が重要な項目を列挙する時に使用するol
要素が適切です。
HTML
1<ol reversed> 2 <li> 3 <time datetime="2018-10-27">2018年10月27日</time> 4 <a href="#">テキストテキストテキスト</a> 5 </li> 6 <li> 7 <time datetime="2018-10-26">2018年10月26日</time> 8 <a href="#">テキストテキストテキスト</a> 9 </li> 10 <li> 11 <time datetime="2018-10-25">2018年10月25日</time> 12 <a href="#">テキストテキストテキスト</a> 13 </li> 14</ol>
投稿2018/10/24 22:03
編集2018/10/26 00:51総合スコア14731
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/24 22:07
2018/10/25 03:10
2018/10/30 00:26
2018/10/30 15:04
0
dlの使い方さえ覚えれば問題ありません。
先ずは下記3つのサイトを見ましょう。
以上を踏まえて考えていきます。
DLはそもそも「定義リスト」です。
一つの定義語に対する一つの定義説明
とありますから、以下のような使い方になるでしょう
- 定義名(dt)が重複するのはNG
- 定義説明がネストしたり複雑になりすぎるのはNG
・パターン1・・・A=商品名、B=商品に対する文章や説明
商品名は一意に決まりますか?
サイズやカラー等のバリエーションはどう扱いますか?
まとめた場合、定義説明が更に掘り進むのはNGですが取り扱えますか?
この辺の事情からdlで作っても作り直しになる可能性があります。
重複しないようなジャンルの商品というのもありますからモノ次第としか言いようがないですね。
・パターン2・・・A=プライバシーポリシーの目的や削除や変更や管理方法など、B=その説明やAに対する文章
こういった法律や契約系は一問一答ではなく、5.2.1条みたいな感じですぐにネストし始めるんですよねぇ…
section>hn+pならネストする構造を表現出来るので、出来ればそちらを使ったほうが良いでしょう。
・パターン3・・・A=トップページの新着情報やオススメ商品や再入荷商品、B=Aに対する文章や説明
トップページの新着情報は同名になる可能性があります。
定義名として適切ではないのでdlはあまり良い選択肢ではありません。
ただまぁ、そのためだけにセクション作り始めるのは大仰なので、
dtの裏にあるid部分が定義であると理屈こねてdlにするのもまぁ良いんじゃないでしょうか?
新着情報というまとまりなのでul>li>hn+pを使う案も良いと思います。
投稿2018/10/24 02:42
総合スコア21158
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/24 22:22 編集
2018/10/25 03:10
2018/10/25 03:23 編集
2018/10/30 00:20
0
章立ての文章であればsection
とp
でしょうし、リストであればdl
ですね。
全然用途は違うと思います。
HTML
1<section> 2 <h2>はじめに</h2> 3 <p>この物語は・・・・・である。</p> 4 <p>・・・・・・</p> 5 <p>読者の皆様にはこの本を通じて・・・・・。</p> 6</section> 7 8<section> 9 <h2>旅立ちの日</h2> 10 <p>朝、目が覚めると・・・・。</p> 11 <p>・・・・・・</p> 12 <p>・・・・・・</p> 13 <p>すると、見えてきたのは◯◯◯◯◯だった。</p> 14</section>
HTML
1<section> 2 <h2>朝食の献立</h2> 3 <dl> 4 <dt>前菜</dt> 5 <dd>◯◯◯</dd> 6 <dt>メイン</dt> 7 <dd>◯◯◯</dd> 8 <dd>◯◯◯</dd> 9 <dt>デザート</dt> 10 <dd>◯◯◯</dd> 11 </dl> 12</section> 13 14<section> 15 <h2>夕食の献立</h2> 16 <dl> 17 <dt>前菜</dt> 18 <dd>◯◯◯</dd> 19 <dt>メイン</dt> 20 <dd>◯◯◯</dd> 21 <dd>◯◯◯</dd> 22 <dt>デザート</dt> 23 <dd>◯◯◯</dd> 24 </dl> 25</section>
がっつり説明したいならp
ですかね。何か曖昧な感じですみません。
HTML
1<section> 2 <h2>魚類</h2> 3 <p>魚類とは・・・・</p> 4 <p>しかし、・・・・</p> 5</section> 6<section> 7 <h2>哺乳類</h2> 8 <p>哺乳類とは・・・・</p> 9 <p>つまり、・・・・</p> 10</section> 11 12<dl> 13 <dt>魚類</dt> 14 <dd>魚だよ</dd> 15 <dd>海とかにいるよ</dd> 16</dl> 17<dl> 18 <dt>哺乳類</dt> 19 <dd>乳で子供を育てるよ</dd> 20 <dd>人間とかもだよ</dd> 21</dl> 22
投稿2018/10/19 02:17
編集2018/10/19 02:36総合スコア4666
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/21 23:03
2018/10/30 00:05 編集
0
おはようございます。W3Cに準じたコーディング、素晴らしいですね。見習おうと思います。
さて、
↓調査後の考え
リファレンスを読むと「section>h[番号]+p」と「dl>dt+dd」どちらでもいい気がしますが、W3C日本語訳を読むと、Aが簡潔な言葉なら「dl>dt+dd」を使い、Aが長い文章なら「section>h[番号]+p」を使うといいのかなと思いました。
認識はあっていると思います。
要は「詳細な説明があるので章を立てるか、箇条書きの方が見やすいか」
というところだと思います。
さて、以下は完全に個人の意見ですが、
#・パターン1・・・A=商品名、B=商品に対する文章や説明
商品の比較を簡単にさせたいのであれば、dl>dt+dd
スタイルのほうが見やすい(文章構造的に把握しやすい)と個人的には思います。
その上で、詳細な説明文を section>h[番号]+p
で書いておき、 dl>dt+dd
の要素からページ内リンクを張っておくと、見やすいページになると思います。
・パターン2・・・A=プライバシーポリシーの目的や削除や変更や管理方法など、B=その説明やAに対する文章
これも上と重複してしまいますが、概要となるAは dl>dt+dd
で羅列し、 Bは section>h[番号]+p
で組んだ上で、Aの要素からのBの要素へのリンクが張っていると、アクセスもしやすいですし、関連も定義できると思います。
このパターンの場合、 Aは目次の意味合いも有ると思うので、 nav>dl>dt+dd
と、 <nav>
タグで囲んであげると良いかもしれません。
・パターン3・・・A=トップページの新着情報やオススメ商品や再入荷商品、B=Aに対する文章や説明
やはりこちらも Aは dl>dt+dd
で、 詳細は section>h[番号]+p
が良いと思います。
まとめ
「文章の構成要素を分別する」のはなかなか難しいですね。
しかし、これをしっかりしておくと、検索エンジンで検索された結果からのアクセスがしやすくなると思いますので、完璧に・神経質まではならなくていいとは思いますが、ちゃんとコーディングしたいものですね。(自戒を込めて)
投稿2018/10/19 01:07
総合スコア2244
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/21 23:03
2018/10/29 23:59
2018/10/30 01:26
0
文法
文法はバリデータが error, warning を出力しなければ、基本的には問題ありません。
機械的なチェックに不安があれば、各要素の仕様を読めばいいでしょう。
論理構造
「構造をどう定義するか」は「著者が論理構造をどう定義するか」が主なので、HTML Standard(通称HTML5)仕様が定義する範疇にありません。
が、判断の目安にできるものとしてアウトラインがあります。
HTML
1<section> 2 <h2>国語辞典A</h2> 3 <section> 4 <h3>言語</h3> 5 <p>音声や文字によって、人の意志・思想・感情などの情報を表現・伝達する、または受け入れ、理解するための約束・規則。また、その記号の体系。音声を媒介とするものを音声言語(話し言葉)、文字を媒介とするも...</p> 6 </section> 7 <section> 8 <h3>原語</h3> 9 <p>もとの語。翻訳した言葉に対して、そのもとになった外国の言葉。「詩を原語で味わう」</p> 10 </section> 11 <section> 12 <h3>源語</h3> 13 <p>「源氏物語」の略称。</p> 14 </section> 15</section> 16 17<section> 18 <h2>国語辞典B</h2> 19 <dl> 20 <dt>言語</dt> 21 <dd>音声や文字によって、人の意志・思想・感情などの情報を表現・伝達する、または受け入れ、理解するための約束・規則。また、その記号の体系。音声を媒介とするものを音声言語(話し言葉)、文字を媒介とするも...</dd> 22 <dt>原語</dt> 23 <dd>もとの語。翻訳した言葉に対して、そのもとになった外国の言葉。「詩を原語で味わう」</dd> 24 <dt>源語</dt> 25 <dd>「源氏物語」の略称。</dd> 26 </dl> 27</section>
これを上記ジェネレータでアウトラインを生成すると、下記のようになります。
1. Untitled Section 1. 国語辞典A 1. 言語 2. 原語 3. 源語 2. 国語辞典B
「国語辞典A」では各用語を同等の見出しとして扱いますが、「国語辞典B」では違います。
ここでは仮に「各用語は数ある日本語の語句の一種でしかないので、『国語辞典』の配下に見出しとして定義すべきではない」としましょうか。
では、次のケースはどうでしょう。
HTML
1<section> 2 <h2>プログラミング言語の種類A</h2> 3 <section> 4 <h3>C</h3> 5 </section> 6 <section> 7 <h3>Java</h3> 8 <p>...</p> 9 </section> 10 <section> 11 <h3>JavaScript</h3> 12 <p>...</p> 13 </section> 14</section> 15 16<section> 17 <h2>プログラミング言語の種類B</h2> 18 <dl> 19 <dt>C</dt> 20 <dd>...</dd> 21 <dt>Java</dt> 22 <dd>...</dd> 23 <dt>JavaScript</dt> 24 <dd>...</dd> 25 </dl> 26</section>
同様にアウトラインを生成します。
1. Untitled Section 1. プログラミング言語の種類A 1. C 2. Java 3. JavaScript 2. プログラミング言語の種類B
今度は「各言語はプログラミング言語の一種なので、Aにすべきである」と判断されるかもしれません。
…どうでしょう?
2つの違いが分かりますか。
これはあくまでも一つの考え方で絶対の定義ではありません。
実際には、ここに書かれていないh1,h4,h5,h6要素も確認した上でアウトラインに含めるべきか確認する事になるでしょう。
- アウトライン上にある見出しで、他の見出しから逸脱した見出しが混入していない
- サイト単位で俯瞰した場合、各ページのアウトラインの構造に統一性がある
このあたりがポイントだと思います。
Re: iiirohanihoheto さん
投稿2018/10/24 23:47
編集2018/10/25 00:08総合スコア18166
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/25 03:10
2018/10/30 00:31
2018/10/30 03:10 編集
0
ページ構成での範囲(重要度)を、ひとつの基準にする考え(個人的)もあります。
コンテンツのメインならば
「section>h[番号]+p」
メインではなく、パーツとしてならば
「dl>dt+dd」
投稿2018/10/24 01:20
総合スコア3523
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/24 01:22
2018/10/24 01:37
2018/10/30 00:08
2018/10/30 00:55
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。