正しいタグの付け方について、2つ質問があります。

質問

(1)ナビゲーションのタグの付け方

以下のソース(市販の本)はサイドコンテンツのものです。

<div id="navigation">
<h5><a href="#">TOP </a></h5>
<h5><a href="#">ニュースリリース</a></h5>
<h5><a href="#">イベント情報</a></h5>
<h5><a href="#">コンセプト</a></h5>
<h5><a href="#">会社概要</a></h5>
<h5><a href="#">FAQ</a></h5>
<h5><a href="#">お問い合わせ</a></h5>
<h5><a href="#">スタッフブログ</a></h5>
</div>

この場合はリストを使わなくて良いのでしょうか？また、サイトによってはテーブルが使われている場合もけっこう見かけます。ナビゲーションにリスト以外のタグを使うことが禁止されているわけではないんですかね・・・

(2)イベント情報などのタグの付け方

以下のソースなのですが、こういう場合は定義リストでは。別にリストでも問題ないのでしょうか？

<ul>
<li>2011/8/15　関東建設祭り2011開催決定！</li>
<li>2011/8/8　住宅構造完成見学会（ご予約受付中です）</li>
<li>2011/7/5　オール電化住宅、ソーラー発電の無料見積相談会開催中！</li>
<li>2011/5/5　完成見学会があります、詳細はイベント情報をご覧下さい。</li>
<li>2011/3/15　完成見学会があります、詳細はイベント情報をご覧下さい。</li>
</ul>

回答No.6

ORUKA1951

とりあえず、現状の説明だけ。とりあえず私の認識を説明しておきます。英語は苦手なので誤解しているかもしれませんので根拠とした原文も挙げて起きます。

dl要素は、「定義リスト(Definition lists)」と訳されますが、実際には「用語とその説明」という使い方をすることになっています。
「定義リストは、並び項目が2部から成るという点で他のタイプのリストと単にわずかに異なります:
用語と記述。用語はDT要素から与えられ、インラインの内容に制限されます。その記述は、ブロック・レベル内容を含むことができます。」
　であって、例としては「学術用語」があげられていますが、それ以上termの内容については制限がありません。また、HTML4.01では、「Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.」と書かれていましたが、HTML5では「会話に対しては適切でない（
The dl element is inappropriate for marking up dialogue. ( http://www.w3.org/TR/html5/grouping-content.html#the-dl-element )」

　HTML5では、HTML4での説明を補足する形で
「【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
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. Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-dl-element )］より」

となっています。dt/dlは、terma termとdescriptionから、nameとvalleに変更になり、「Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.」「用語と定義、メタデータトピックと値、質問と回答、もしくはその他の名前と説明」となります。

　HTMLの仕様は、マークアップの仕方を定義するものですが、実際には実際の使われ方に引きずられる部分もあります。HTML3.2は特にそうでしたが、HTML4.01で、それらをふるい落としまして整理されましたが、HTML5では、いくつかの要素が定義変更されています。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
The dl element now represents an association list of name-value groups, and is no longer said to be appropriate for dialogue.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 differences from HTML4( http://www.w3.org/TR/2011/WD-html5-diff-20110525/#changed-elements )］より

　ただ、本来は
<dl>
<dt>関東建設祭り2011開催決定！</dt>
<dd>2011/8/15　</dd>
<dt>住宅構造完成見学会（ご予約受付中です）</dt>
<dd>2011/8/8</dd>
[HTML5]定義を示すときは<dt><dfn><dfn></dt>
<dl>
<dt><dfn>関東建設祭り2011開催決定！</dfn></dt>
<dd>2011/8/15　</dd>
<dt><dfn>住宅構造完成見学会（ご予約受付中です）</dfn></dt>
<dd>2011/8/8</dd>
「A dl can be used to define a vocabulary list, like in a dictionary. In the following example, each entry, given by a dt with a dfn, has several dds, showing the various parts of the definition. ( http://www.w3.org/TR/html5/grouping-content.html#the-dd-element )」

あるいは、
<ol>
<li><span class="time">2011/8/15</span>関東建設祭り2011開催決定！</li>
<li><span class="time">2011/8/8</span>住宅構造完成見学会（ご予約受付中です）</li>

[HTML5]
<ol>
<li><time datetime="2011-08-15">2011/8/15</time>関東建設祭り2011開催決定！</li>
<li><time datetime="2011-08-08">2011/8/8</time>住宅構造完成見学会（ご予約受付中です）</li>

のほうが適切かもしれません。

　dl要素は、term-description以外にname-valueの組み合わせとして使える。

お礼

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

W3Cのルールに準拠することは、本当に大変ですね。とは言え、紹介して頂いたサイトは、自分でも読んで理解していきたいです。

回答No.5

DrFell

（1）は箇条書きリストがふさわしいと思います。
（2）は箇条書きリストまたは表がふさわしく、定義リストは当てはまらないと思います。

(1)については、他の方の重複になるので、飛ばします。

（2）ですが、そのページを作った人が箇条書きだといえば箇条書きですし、日付とその日の出来事の表、年表のようなものと考えれば表です。
が、定義リストは言葉の定義をするものなので、その用語と記述をする場所に日付など用語でもないものを入るるのは違うと思います。実際にはそのようによく使われています。でも、それって、レイアウト目的に表を使うのとどう違うの？とかねてから疑問でした。

正しいタグの付け方にこだわるなら、なぜ「定義リスト」と思われたのか教えてください。また、私が誤解しているだけかもしれないので、識者のかたの見解を教えていただきたく、このような書き込みをさせていただきました。

邦訳仕様書
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/lists.html#h-10.3

お礼

ありがとうございました。人によって解釈の違いがあるのですね。

あと、なぜ定義リストかと言いますと、大半のWebの本・サイトでイベント情報などのタグに定義リストが使われていたからです。

回答No.4

tracer

(1)にしても(2)にしても、まず、はっきり言えることは、どのような書き方をしても、SEO(現在の)に不利になったり、ブラウザがエラーを起しなりすることはないということです。語弊を恐れずに表現すると、制作者が気持ち悪いかどうかの問題と言えます。

しかし、HTMLにおいて正確な論理構造を記述することは、その後のデザインに深く影響を与えます。闇雲に記述すると、文脈上、あるいは構造上、矛盾が発生してしまう場合があり、その矛盾はデザインに響きます。

(1)に関しては、お手本として優れたものではないように見受けられます。
詳しい話は省きますが、<h1>～<h6>は、フォルダ名のような扱いで問題ないと思います。従って、(1)の記述は、フォルダ名は定義されているのに、フォルダの中身が空の状態ということで、とても不自然な記述と言えます。通常は、<h1>～<h6>の後には、<p>など、その中身を示す構造を用いるのが自然だと思います。

(2)に関しては、質問の意味がよくわからないのですが、その内容が「箇条書き」として適しているかという判断で問題ないのではないでしょうか。論理構造で言えば、リスト内の各項目<li>が、それぞれ同列の関係であれば、論理構造として矛盾は生じていないと思います。

お礼

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

制作者が気持ち悪い程度の問題なら良かったです。(2)の質問の意図としては、大半のWebの本・サイトでイベント情報などのタグに定義リストが使われていたので、普通のリストを使っても良いのか？ということです。私としても定義リストより普通のリストの方が良いです。普通のリストと違い、定義リストの横並びはそこそこ手間ですから。

回答No.3

ORUKA1951

(1)ですが、文法上は誤りではありませんが、仕様上は間違いです。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
見出しの要素は、その章・節で述べられる話題を短く記すものである。見出し情報は、ユーザエージェントによって、例えば文書の目次を自動生成するために用いられたりもするであろう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書/7.5.5 見出し: H1、H2、H3、H4、H5、H6要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-H1 )］より

　あくまで、それが属する章/節/項などの見出しです。これはHTML5ではより明確に定義されています。
★4.4.11 Headings and sections ( http://www.w3.org/TR/html5/sections.html#headings-and-sections )

　よって見出しだけを並べるべきではありません。

なお、私は
<div class="nav" id="navigation"><!-- idをつけるのは、原則リンクのターゲットになるときだけ -->
とします。これは、HTML5では、<nav>という要素になることが決まっているからです。class名にするのは、ひとつのページ内に複数登場する可能性があるからです。

(2)ですが、定義リストのほうがより文書構造を示せるでしょうね。ただ、スタイルシートで<dt><dd>をセットにする方法がないので、デザインで行き詰まることがありますから、そのような場合が想定される場合は

<ol>
　　<li><span class="date">2011/8/15</span> <span class="menue">関東建設祭り2011開催決定！</span></li>
<li><span class="date">2011/8/8</span> <span class="menue">住宅構造完成見学会（ご予約受付中です）</span></li>

とか、
<ol>
<li>2011/8/15
　　<p>関東建設祭り2011開催決定！</p>
</li>
<li>2011/8/8
　　<p>住宅構造完成見学会（ご予約受付中です）</p>
</li>

のようにマークアップしたりします。この様な予定表の場合は<dl></dl>が多いですね。

★「サイトによってはテーブルが使われている場合もけっこう見かけます。ナビゲーションにリスト以外のタグを使うことが禁止されているわけではないんですかね・・・」
　HTML5の仕様書では、ナビゲーションリンクとは書かれていますが、ナビゲーションリストとはかかれていません。
「The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. ( http://www.w3.org/TR/html5/sections.html#the-nav-element )」

「他のページへのナビゲーション」
「ページのリンクのすべてのグループが、nav要素である必要がありません。この要素はサイト内へのナビゲーションを意図するブロックから成るセクションを記します。
　しかし、利用規約、ホームページおよび奥付けのようなサイトの様々なページへのリンクだけを持っているフッタも一般的に行われていますが、そのような場合は、nav要素を使うことも出来ますが、わざわざnav要素を使う必要はありません。」
　間違っているかも・・正確には
★4.4.3 The nav element ( http://www.w3.org/TR/html5/sections.html#the-nav-element )

お礼

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

迷えばW3Cのサイトを参考にします。全て英語で書かれているので、日本語版のサイトも欲しいところですよね。

回答No.2

naokita

人それぞれの文章構造なので、
仕様での誤記を除いて、正しいとか間違ってるとか概念はありません。
-------------------

hタグは見出しなので、
章や各セクションなどの先頭になるタイトルとして
目立つように配置するべきでしょう。
つまり、ナビゲーションの各アンカーが<h5>で連ねるのは可笑しいです。

ナビゲーションは、メニュー項目（リスト）なので、
<li><a href="#">TOP </a></li>で良いでしょう。

後者は、定義リストとして解釈できますので、
<dt>2011/8/15</dt><dd>関東建設祭り2011開催決定！</dd>
その内容次第では、箇条書きリストでも良いと思います。
その辺は解釈次第。
そんな程度です。

-------------------

しかし、
「2011/8/15　関東建設祭り　2011開催決定！場所は東京都～～～～」
このような長くなるとどうしますか？
長いとか短いの問題では無いのですが、

<dl>
<dt>お知らせ</dt>
<dd>
<ul>
<li>
<dl>
<dt>2011/8/15</dt>
<dd>
<dl>
<dt>関東建設祭り</dt>
<dd>
<p>2011開催決定！場所は東京都～～～～</p>
</dd>
</dl>
</dd>
</dl>
</li>
<li>～～～繰り返し～～～</li>
</ul>
</dd>
</dl>

詳細に書くと上記のようにリストを入れ子にしますが、
ここまでせずに簡潔に書く場合が多いでしょう・・・

間違いとかでは無く、知識や解釈・表現の問題ですし、
法律では無いので、禁止では無いです。
文章構造やマークアップをどのようにするかは、作者の自由ですが、
その文章構造をユーザーがどう解釈するか？どう解釈させたいかって事や
提示した文章やコンテンツをユーザーエージェントに理解して欲しければ詳細に書けば良いだけです。

また、テーブルは「表」であって、
エクセルで作るようなコンテンツ（罫線+セル）がHTMLでのテーブルです。
表でも無い物をテーブルで利用するのは、HTML的には間違っていますが、
ユーザーが見る事ができるだけで良いと考える作者もいますので、
それはそれでWebとして見た目だけは機能していますから、
情報発信だと思えば、何も発信しないゼロよりはマシかもしれませんけどね。

お礼

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

タグの付け方は、作者の解釈次第なんですね。色々と市販の本を読んできて、大半の本はナビゲーションがリストで作成されていましたので、固定観念ができ上がってきたのかもしれません。

回答No.1

shiren2

＞(1)ナビゲーションのタグの付け方
リストを使うのはただの慣例的用法で、決まりではありません。
pタグ（文章に使うタグ）だと問題ですが、hタグはセクションやページのタイトルを意味するタグなので、場合によっては妥当なのかもしれません。

＞(2)イベント情報などのタグの付け方
こちらはあまり良くないですね。
こういうのでもOKです。
<ul id="events">
<li><span class="date">2011/8/15</span>関東建設祭り2011開催決定！</li>
<li><span class="date">2011/8/8</span>住宅構造完成見学会（ご予約受付中です）</li>
...

定義リストを使っても、もちろん出来ます。
<dl id="events">
<dt class="date">2011/8/15</dt><dd>関東建設祭り2011開催決定！</dd>
<dt class="date">2011/8/8</dt><dd>住宅構造完成見学会（ご予約受付中です）</dd>
...

tableタグで書くと、意外と美しいです。
<table id="events">
<caption>イベント情報</caption>
<colgroup class="date" />
<colgroup class="title" />
<thead>
<tr><th>日付</th><th>イベント名</th></tr>
</thead>
<tbody>
<tr><td>2011/8/15</td><td>関東建設祭り2011開催決定！</td>
<tr><td>2011/8/8</td><td>住宅構造完成見学会（ご予約受付中です）</td>
...

お礼

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

慣用的にリストを使うのですね。大半の本にはリストが使われていのたで、禁止に近いものがあるのかなと。