W3Cに準拠したホームページ作り

質問

こんにちわ
ホームページのメニュー部分の作り方なのですが私はアンカータグ<span>|</span>
アンカータグ<span>|</span>
とhtmlに記述し、スタイルシートにはspan{display:none}とし段組メニュー、横並びメニューをつくっていますが色々なサイトを見ているとリストでメニューを作っているところが多数ありました。
どちらが正解、もしくわW3C、SEO的に好ましいでしょうか？

回答No.7

ao_

SEO的にはリストの方が適当なようです。
検索ロボットはリスト形式の要素は一つのグループとしてみなします。また、CSSに対応していないブラウザでみるとすごく見やすいのがわかります。私もリスト形式で作っています。
また、テキストをdisplay:noneにしてしまうと音声ブラウザで対応していなものは認識できなくなるので、text-indent:-9000pxとかで不可視エリアに飛ばすのが一般的みたいです。どちらの一長一短ありますが…

回答No.6

nonbejapan

どちらが正解か、個人的意見でSEO的にliメニューが最適かと思いますが、個人的な意見なので本当に正解かは微妙。
標準の文法に照準をあわせるなら、参考URLのような便利なツールがあります。

参考URL：

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

回答No.5

JeanneNet

こんにちは、じゃんぬねっと と申します。
私のサイトも li でメニュー書いてます。

「|」は、装飾なので好ましくないですよね?
装飾は、content で付与すべきですが、
IE6 だと対応していないので、border で対応しています。

実装としては、CSS に float:left としておくだけです。

回答No.4

coder

僕も通常のメニューはliタグを使いますが、ぱんくずの様な場合は、そのままベタで置いてしまいますね。ぱんくずでliを使ってしまうと、音声で意味わからない状態になってしまうのかなと思いますので・・・。
ぱんくずの場合は、「現在位置　TOP > 教えてgoo」ってなってたら、
<dl>
<dt>現在位置</dt>
<dd>TOP > 教えてgoo</dd>
</dl>
みたいにして、後はCSSで整えるっていうのはどうでしょう？

プルダウンメニューなんかの階層を示す場合なんかにもdlを使って、
<dl>
<dt>国内旅行</dt>
<dd>
<ul><li>地域から探す</li><li>値段で探す</li>
</ul>
</dd>
<dt>海外旅行</dt>
<dd>
<ul><li>地域から探す</li><li>値段で探す</li>
</ul>
</dd>
</dl>
みたいな感じにしてます。

なんかあんまりまとまりない感じですいません。
web標準を気にするなら参考サイト見てみて。
すごい勉強になります。

参考URL：

http://www.mozilla.gr.jp/standards/webtips/index.html

回答No.3

steel_gray

ちょっと訂正。
#1さんのいうサイトマップ的なものとは、パンくずリストンの事ですね。（勝手に勘違いしていしまいました。）
パンくずリストならベタ書きもありかもしれませんね。
ただ、ベタ書きなら間の記号はカンマかスペースあたりが妥当でしょうけど。（｜記号にしたければCSSで。と、いってもIEでは出来ないけど。→参考URL）

参考URL：

http://www.htmq.com/style/content.shtml

回答No.2

steel_gray

メニューがリスト状の存在なので、リストで書いてあるケースが多いのでしょう。
リスト状のものをべた書きにしようとするから、間に本質的には不要なはずの | を入れる事になってしまっているのだと思います。難しく考えすぎなのでは？

#1さんのいうサイトマップのような階層的なものならばリストをネストさせたほうが構造を表現できるかと思います。

回答No.1

koutarou504

結論から言えば内容次第と・・・。（なんか答えになってないみたいですけど。）

まず、メニューと言ってもいろいろある処から問題でして。
一覧的な物から階層的な物まで
一覧提示ならリストでも問題ないし、
またメニューが一覧である事を重視するならば
リストを使うべきでしょう。
ただそこで、デザインの問題で CSS などでかなり細工をしなければならない場合は、
それほどまでにして一覧である事を意識する必要があるか検討する程度の事なので
正しいとか好ましいとまで言う程度の事でなく
こういう意味も加味できるという程度の事です。
（CSS 等は各ブラウザの癖や閲覧者の環境，操作も配慮が必要になるし、ブラウザの癖までとは言わなくても無効の場合くらいは配慮が必要になるし・・・。）

次にそのメニューが階層的な事も含めての（サイトマップの様な）場合は、リストは逆に問題です。
故に質問者のメニューの書き方は無難です。

最後にW3C, SEO的ですが、リスト (OL, UL) はブロック要素ですが、アンカータグ(A要素)やSPAN要素はインライン要素といいBODY直下には記述するべきでないかと。
この場合はDIV要素などで囲う必要があるかと。