Q&A
大分、時が経っていますが、まだ解決しませんか？
前提・実現したいこと
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」を使うといいのかなと思いました。
補足
想定するパターンは下記です。
・パターン１・・・A＝商品名、B＝商品に対する文章や説明
・パターン２・・・A＝プライバシーポリシーの目的や削除や変更や管理方法など、B=その説明やAに対する文章
・パターン３・・・A=トップページの新着情報やオススメ商品や再入荷商品、B＝Aに対する文章や説明
回答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
※下書き段階でうっかり投稿してしまいました。
そのため、突然内容を変更するかもしれません。
ご回答ありがとうございます。理解するのに時間がかかるので、じっくり考えたいと思います。
遅くなり申し訳ありません。時間が取れたので、いただいたご回答を再度じっくり考えました。
「提示した３つのパターンにおいては、section要素, dl要素のどちらも使うことができるが、リストであることが重要ならdl要素が良い。(ただし新着情報はNG)」ということで、ご回答いただいたようにリストであることを重要視するかどうかを基準にすれば、どちらの構造が適切か判別しやすいかなと思いました。ありがとうございます。リストであることが重要かどうかは、情報を羅列したいかどうかで考えようと思います。
A＝Bに対する見出しにもなるし、Bによって説明される言葉にもなるもの
B＝Aに対応する本文にもなるし、Aの説明文でもあるもの
とした場合、Bがあまりにも情報量が多いと、１画面には収まらずスクロールの必要が出てくると思います。そうすると、「A＋B」の組を複数個並べても、情報が羅列しているように見えないと思います。つまりリストっぽくないかなと思いました。そのため、１画面で「A＋B」の組を複数個並べられるような簡潔な情報量のBなら「dl>dt+dd」を使い、スクロールしないと全体を見れないような情報量の多いBなら「section>h[番号]+p」にしようかと思います。「１画面で」と書くと見た目で判断してるように思われるかもしれませんが、あくまで情報量の目安ということで、文書構造の判別に利用していいと思いました。
> 「提示した３つのパターンにおいては、section要素, dl要素のどちらも使うことができるが、リストであ
> ることが重要ならdl要素が良い。(ただし新着情報はNG)」
回答文では「新着情報では`dl`要素は不適切」と記述しましたが、新着情報以外にも、「リストであることが重要だとしても、`dl`要素は不適切」となる場合が存在します。そのため、「自身の記述する文書の構造はどのようになるべきか」を常に考えながらコードを記述すると良いと思います。
> Bがあまりにも情報量が多いと、１画面には収まらずスクロールの必要が出てくると思います。そうする
> と、「A＋B」の組を複数個並べても、情報が羅列しているように見えないと思います。つまりリストっぽ
> くないかなと思いました。
回答文には、「幾つかの条件を満たすならば、リストの内容が長大になる構造もありえる」と記述しました。
ここで、もしリストが「一覧」なのであれば、リストを用いることに違和感を感じます。なぜなら、一覧は、「全体が一目で分かる、見渡せるものであるべき」だからです。
しかし、リストを「何かを並べ挙げるもの」だとするのであれば、たとえ各項目の情報量が多い場合でも、リストを用いて良いと思います。なぜなら、ここでのリストは、必ずしも「全体が一目で分かる、見渡せるものであるべき」というわけではないからです。
結局のところ、リストをどういうものだと解釈するか、ということではないかと思います。個人的には、質問者さんの解釈がわかりやすいですが、あくまでも解釈の一通りであることを念頭においておくと、良いと思います。
0
dlの使い方さえ覚えれば問題ありません。
先ずは下記3つのサイトを見ましょう。
以上を踏まえて考えていきます。
DLはそもそも「定義リスト」です。
一つの定義語に対する一つの定義説明とありますから、以下のような使い方になるでしょう
- 定義名(dt)が重複するのはNG
- 定義説明がネストしたり複雑になりすぎるのはNG
・パターン１・・・A＝商品名、B＝商品に対する文章や説明
商品名は一意に決まりますか？
サイズやカラー等のバリエーションはどう扱いますか？
まとめた場合、定義説明が更に掘り進むのはNGですが取り扱えますか？
この辺の事情からdlで作っても作り直しになる可能性があります。
重複しないようなジャンルの商品というのもありますからモノ次第としか言いようがないですね。
・パターン２・・・A＝プライバシーポリシーの目的や削除や変更や管理方法など、B=その説明やAに対する文章
こういった法律や契約系は一問一答ではなく、5.2.1条みたいな感じですぐにネストし始めるんですよねぇ…
section>hn+pならネストする構造を表現出来るので、出来ればそちらを使ったほうが良いでしょう。
・パターン３・・・A=トップページの新着情報やオススメ商品や再入荷商品、B＝Aに対する文章や説明
トップページの新着情報は同名になる可能性があります。
定義名として適切ではないのでdlはあまり良い選択肢ではありません。
ただまぁ、そのためだけにセクション作り始めるのは大仰なので、
dtの裏にあるid部分が定義であると理屈こねてdlにするのもまぁ良いんじゃないでしょうか？
新着情報というまとまりなのでul>li>hn+pを使う案も良いと思います。
投稿2018/10/24 02:42
総合スコア21158
横から失礼します。
> トップページの新着情報は同名になる可能性があります。
> 定義名として適切ではないのでdlはあまり良い選択肢ではありません。
は、「`dt`要素の内容がひとつの`dl`要素内で同名になるべきではない」ということだと思うのですが、こちら( https://www.w3.org/TR/html/grouping-content.html#the-dl-element )を軽く眺めた限り、そのような記述は見つかりませんでした。もし、どこに記述されているかご存知であれば、教えていただけませんか？
ご回答ありがとうございます。理解するのに時間がかかるので、じっくり考えたいと思います。
おっしゃるように、DTの中身が重複しようがしまいがHTMLの仕様上問題はありません。
私は質問文を「基準が分からないので教えて欲しい」と解釈しました。
なので何かしらのガイドラインを用意したいなと考えました。
そこで着目したのが、HTML文書の「定義リスト」という存在の意味です。
「定義リスト」をHTMLの1ページ内でのみ適用される辞書として考えました。
同名の定義名が複数存在し、それぞれ別の事を語っていれば読者は混乱してしまうでしょう。
なので定義名の重複はあってはならないことです。
また、あまり複雑な文章をDDの中にぶちこむ事はあまりよろしくないでしょう。
定義と説明なので、文章が中に放り込まれるなら、DDの中に「詳細はこちら」リンク等を張って別紙として逃がすべきだろうなと考えました。
この2つの観点を元に即興のガイドラインを作ったので、仕様に無いじゃんってのはそのとおりでごめんなさいとしか言いようがないです。
もっとスマートで本家の指示や表現方法などがあれば差し替えたいなと思ってます。
遅くなり申し訳ありません。時間が取れたので、いただいたご回答を再度じっくり考えました。
A＝Bに対する見出しにもなるし、Bによって説明される言葉にもなるもの
B＝Aに対応する本文にもなるし、Aの説明文でもあるもの
とした場合、Bがあまりにも情報量が多いと、１画面には収まらずスクロールの必要が出てくると思います。そうすると、「A＋B」の組を複数個並べても、情報が羅列しているように見えないと思います。つまりリストっぽくないかなと思いました。そのため、１画面で「A＋B」の組を複数個並べられるような簡潔な情報量のBなら「dl>dt+dd」を使い、スクロールしないと全体を見れないような情報量の多いBなら「section>h[番号]+p」にしようかと思います。「１画面で」と書くと見た目で判断してるように思われるかもしれませんが、あくまで情報量の目安ということで、文書構造の判別に利用していいと思いました。
＜パターン１＞
ご回答いただいたように、サイズやカラー等で説明が複雑になり簡潔にならない可能性(１画面に収まらない)を考慮すると「section>h[番号]+p」の方がいいかもしれませんね。
＜パターン２＞
ご回答いただいたように、説明がさらに子要素に枝分かれして複雑になり簡潔にならない可能性(１画面に収まらない)を考慮すると「section>h[番号]+p」の方がいいかもしれませんね。
＜パターン３（新着情報）＞
「同名になる可能性があるので定義名として適切ではないからdlはあまり良い選択肢ではない」というのはとてもわかりやすいです。今後気をつけようと思いました。
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
返信遅くなり誠に申し訳ありません。ご回答ありがとうございます。理解するのに時間がかかるので、もう少し自分なりに考えて見ます。
遅くなり申し訳ありません。時間が取れたので、いただいたご回答を再度じっくり考えました。
ご回答の「リストであればdl」という部分を再度考えてみました。リストの定義を調べると「羅列」とありました。羅列とは「ずらりと並ぶこと」とありました。これを踏まえて考えたのが下記です。
A＝Bに対する見出しにもなるし、Bによって説明される言葉にもなるもの
B＝Aに対応する本文にもなるし、Aの説明文でもあるもの
とした場合、Bがあまりにも情報量が多いと、１画面には収まらずスクロールの必要が出てくると思います。そうすると、「A＋B」の組を複数個並べても、情報が「羅列」しているように見えないと思います。つまりリストの定義とずれるかなと思いました。そのため、１画面で「A＋B」の組を複数個並べられるような簡潔な情報量のBなら「dl>dt+dd」を使い、スクロールしないと全体を見れないような情報量の多いB(ご回答いただいた部分でいうと「がっつり説明したいなら」の部分)なら「section>h[番号]+p」にしようかと思います。「１画面で」と書くと見た目で判断してるように思われるかもしれませんが、あくまで情報量の目安ということで、文書構造の判別に利用していいと思いました。
0
おはようございます。W3Cに準じたコーディング、素晴らしいですね。見習おうと思います。
さて、
↓調査後の考え
リファレンスを読むと「section>h[番号]+p」と「dl>dt+dd」どちらでもいい気がしますが、W3C日本語訳を読むと、Aが簡潔な言葉なら「dl>dt+dd」を使い、Aが長い文章なら「section>h[番号]+p」を使うといいのかなと思いました。
認識はあっていると思います。
要は「詳細な説明があるので章を立てるか、箇条書きの方が見やすいか」
というところだと思います。
さて、以下は完全に個人の意見ですが、
#・パターン１・・・A＝商品名、B＝商品に対する文章や説明
商品の比較を簡単にさせたいのであれば、dl>dt+dd スタイルのほうが見やすい（文章構造的に把握しやすい）と個人的には思います。
その上で、詳細な説明文を section>h[番号]+p で書いておき、 dl>dt+dd の要素からページ内リンクを張っておくと、見やすいページになると思います。
・パターン２・・・A＝プライバシーポリシーの目的や削除や変更や管理方法など、B=その説明やAに対する文章
これも上と重複してしまいますが、概要となるAは dl>dt+dd で羅列し、 Bは section>h[番号]+p で組んだ上で、Aの要素からのBの要素へのリンクが張っていると、アクセスもしやすいですし、関連も定義できると思います。
このパターンの場合、 Aは目次の意味合いも有ると思うので、 nav>dl>dt+dd と、 <nav> タグで囲んであげると良いかもしれません。
・パターン３・・・A=トップページの新着情報やオススメ商品や再入荷商品、B＝Aに対する文章や説明
やはりこちらも Aは dl>dt+dd で、 詳細は section>h[番号]+p が良いと思います。
まとめ
「文章の構成要素を分別する」のはなかなか難しいですね。
しかし、これをしっかりしておくと、検索エンジンで検索された結果からのアクセスがしやすくなると思いますので、完璧に・神経質まではならなくていいとは思いますが、ちゃんとコーディングしたいものですね。（自戒を込めて）
投稿2018/10/19 01:07
総合スコア2244
返信遅くなり誠に申し訳ありません。ご回答ありがとうございます。理解するのに時間がかかるので、もう少し自分なりに考えて見ます。パターンごとのご丁寧なご説明、感謝いたします。
遅くなり申し訳ありません。時間が取れたので、いただいたご回答を再度じっくり考えました。
「dl>dt+dd」で簡潔に羅列しておいて、詳細情報のある「section>h[番号]+p」にリンクさせるということですね。簡潔なら「dl>dt+dd」、詳細なら「section>h[番号]+p」というのは基準としてはとても判別しやすいです。
A＝Bに対する見出しにもなるし、Bによって説明される言葉にもなるもの
B＝Aに対応する本文にもなるし、Aの説明文でもあるもの
とした場合、Bがあまりにも情報量が多いと、１画面には収まらずスクロールの必要が出てくると思います。そうすると、「A＋B」の組を複数個並べても、情報が羅列しているように見えないと思います。つまりリストっぽくないかなと思いました。そのため、１画面で「A＋B」の組を複数個並べられるような簡潔な情報量のBなら「dl>dt+dd」を使い、スクロールしないと全体を見れないような情報量の多いBなら「section>h[番号]+p」にしようかと思います。「１画面で」と書くと見た目で判断してるように思われるかもしれませんが、あくまで情報量の目安ということで、文書構造の判別に利用していいと思いました。
1画面や、（紙媒体の場合は）1ページに収まる情報量、良いですね（親指を立てて）
目安の基準は大切だと思います。
自分はダラダラ文章を書いてしまうくせがあるので、見習いたいです。
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総合スコア18162
ご回答ありがとうございます。理解するのに時間がかかるので、じっくり考えたいと思います。
遅くなり申し訳ありません。時間が取れたので、いただいたご回答を再度じっくり考えました。
A＝Bに対する見出しにもなるし、Bによって説明される言葉にもなるもの
B＝Aに対応する本文にもなるし、Aの説明文でもあるもの
とした場合、いただいたご回答は「BがAの一種であるので配下として適切である」ならば「dl>dt+dd」を使い、BがAの一種でないならば「section>h[番号]+p」という解釈をしました。そういった考えもあるのだととても参考になりました。ありがとうございました。
AとBの対応関係だけではなく、A,Bの上位/下位に属する見出しを総合的に見て、適切か判断する、ということです。
辞書的な狭い目線で見ても判断できません。
その周辺のアウトライン、言い換えるなら、見出しツリーを全体的に見て判断します。
0
ページ構成での範囲（重要度）を、ひとつの基準にする考え（個人的）もあります。
コンテンツのメインならば
「section>h[番号]+p」
メインではなく、パーツとしてならば
「dl>dt+dd」
投稿2018/10/24 01:20
総合スコア3523
ご回答ありがとうございます。メインかパーツか、どちらなのかも自分で判断できるようになるのが今後の私の課題だと、気づかされました。ありがとうございます。
「SEO対策」を考えると、適材適所なタグ使用が必要ですが、あまり縛られ過ぎないようにしてください。
大事なのは、訪問者にとって「良いサイト（コンテンツ）」と感じてもらえる事です。
遅くなり申し訳ありません。時間が取れたので、いただいたご回答を再度じっくり考えました。
ご回答の＜パーツとしてならば「dl>dt+dd」＞という部分を再度考えてみました。部分(パーツ・部品)の定義を調べると「全体を小分けにした一つ」とありました。これを踏まえて考えたのが下記です。
A＝Bに対する見出しにもなるし、Bによって説明される言葉にもなるもの
B＝Aに対応する本文にもなるし、Aの説明文でもあるもの
とした場合、Bがあまりにも情報量が多いと、１画面には収まらずスクロールの必要が出てくると思います。そうすると、「A＋B」の組を複数個並べても、情報が「小分けした一つ」に見えないと思います。つまりパーツの定義とずれるかなと思いました。そのため、１画面で「A＋B」の組を複数個並べられるような簡潔な情報量のBなら「dl>dt+dd」を使い、スクロールしないと全体を見れないような情報量の多いBなら「section>h[番号]+p」にしようかと思います。「１画面で」と書くと見た目で判断してるように思われるかもしれませんが、あくまで情報量の目安ということで、文書構造の判別に利用していいと思いました。
SEO対策にもなるので、文書構成を考慮したタグの使い方が、HTML5から必要になっています。
しかし、いくつものパターンがあるので、一概に言えない場合もあります。
リストを「メイン」とする場合、「補足・参考」にする場合、それぞれが単独や複数の場合等、いくつもの選択肢の中で、h要素やdl要素は、「どちらかひとつ」ではないので、先ずは、自分なりの基準で良いかと思います。
あなたの回答
tips
プレビュー
