-
ID:eDKW4q さんの質問

html5でコーディングしているのですが、グローバルナビにul、liを使用する必要ありますか?
<nav>タグがあるので、必要ないと思っています。どうでしょうか?

みんなの回答 27 件

ID:kzh8eh さんの回答

それは対象ブラウザによるでしょ。
HTML5非対応のブラウザは全て動作保証外ってことならそれでいいんじゃない?
(そういうケースはめったに無いと思うけど)

ID:ReTlUx さんの回答

navタグはナビのセクションであることを示すタグだから、navでulとliを囲むのがいいんじゃないかな

ID:eDKW4q さんの回答

ありがとうございます。すいません聞き方が悪かったですね。HTML5非対応のブラウザでも、polyfill で対応していくのですが、その場合に<nav>タグがあるのに、文書構造的にul、liに意味があるのかと聞きたかったのです。

ID:NSOg7j

箇条書き要素は文法違反ですので、テーブル要素を使いましょう。

ID:d52FtI さんの回答

じゃあ何でメニュー組むんだよ。<nav> だけじゃどうしようもないぞ。

ID:eDKW4q さんの回答

単純に便利だというだけなら、<div>でも全然出来ます。ただul、liを使用しないと文書構造的に間違ってるのなら使わないといけないです、間違ってるんですかね?

ID:L1IJ5p さんの回答

div と ul li のタグの元々の意味考えたらわかると思う。

ID:eDKW4q

勿論そこら辺は分かった上で聞いているのですが、意味ないというのは間違っていましたね。レスポンシブウエブデザインで、特にフレキシブルGridsystem使用したサイトを見てるとグローバルナビにul、liを使用してないものも結構あるので、文書構造的にどうなんだろうと疑問に思っているのです。

ID:B7Cb51 さんの回答

意味ないと思うなら使わないでいいんじゃない?笑

ID:xASpXC さんの回答

対象の要素がナビゲーションであることと、リストであることは何の関係もない。
ナビゲーションだったらnavにすればいいし、リストだったらulないしolにすればいい。

ID:eDKW4q

ありがとうございます。グローバルナビゲーションって項目が複数あって、
リストと言えなくもないので、そういう意味でulを使っていると思うのですが、
実際、ここに回答していただいた方は読む限りそういう意味に取れるのですが、
リストではないということですね。

ID:KS0SZd さんの回答

うーん、トピ主さんがどこにこだわってるのか分かりづらい

ID:eDKW4q

あ、ごめんなさい汗。

画面の上部に横一列に6個くらいボタンのあるグローバルナビで
①意見1
ナビゲーションはリストではない。
文書構造的に<nav>で囲めば、それがナビゲーションだと
いうことがわかるので、その中の要素は<div>等でもよい。

②意見2
ナビゲーションはリスト。<nav>で囲んだとしてもul、liを使用すべきだ。

多くのサイトでは実装をみると②なので、正しいのは②
かと思うのですが、どっちなんだろうと悩んでいるのです。

ID:FQlDey

同意。
一周まわって、逆に理解が浅いのではないかという気がしてきた。

ID:qoH4VZ さんの回答

ナビゲーションっていうセクションのリスト

ID:50gb/N さんの回答

自分はそこで悩んだことはないなあ。
navの中身がリストってよりも、色んなリストがある中で「次のリストはナビゲーションなんでnavで囲んで示しておきますね」って感じかな。

ID:eDKW4q さんの回答

なるほどですね。ありがとうございます。

ID:U5WhOc さんの回答

ナビゲーションがリストじゃないケースを考えてみたら
いいんじゃないですかね
もしリストじゃないケースがあるなら、
それはリストじゃないのでリストのタグを使うべきではないよね

ID:9RSR4O さんの回答

リストじゃないならいいと思いますけど、リストならば、<ul><li>で囲んだほうがいいですね。
もちろんdivなどでもいいと思うのですが…管理しやすい点もありますね、

ID:fLLfZt さんの回答

ナビゲーションがリストじゃないケースというと、メニューが1つしかない場合でしょうか。
そういうお店とかもありますよね。

ID:xjCWFk さんの回答

リストって言葉の定義を誰に求めよう。。、

ID:91vzhH さんの回答

項目が複数ある場合、たいていスタイリングしやすいからじゃない?慣習的なものもあるだろうけど、タグの定義を考えて書く人がどれだけいるやら…。

ID:/2lo5d さんの回答

リスとテトリスとリスト

ID:x2EOU2

回文を期待したのに。

ID:9CFXX9 さんの回答

navは、中身がナビゲーションであると示すだけで、そのナビゲーションの書き方までは規定していません。
メニューをリストで作りたいならulなどを使えばいいし、リスト以外で作りたいならulを使わなくても構いません。

ID:GQnLKG さんの回答

ナビゲーションの内容が並列できるコンテンツならulじゃないかな
大カテ小カテがあるようなナビならdl使うし

ID:DcgsB1 さんの回答

どうしたってメニューって箇条書きでしょう。別に何で表現したって構わないが、<ul> を使うのが一番自然だというだけなのに、一体何を嫌がっているのかさっぱり解からん。CSS外して<div>で組んだ奴と比べてみ?

ID:uR4BS3

そう、CSSを外した状態で見てみればよくわかりますよね。意味が。

ID:wUgUR6 さんの回答

僕はulないとデザイン実現できない場合はulでマークアップするけど、
ulなくても実現できる場合は、aのみにします。

<nav> 
    <a href="#">メニュー</a> 
    <a href="#">メニュー</a> 
    <a href="#">メニュー</a> 
    <a href="#">メニュー</a> 
</nav>
ID:I3odOu

CSSで実現できるかどうかじゃなくて、文章構造的に正しいかどうかじゃないの?

ID:umAMgv

うわぁ。。。

ID:looInl

これは推奨されないね。構造的に全体でひとつの(意味不明の)文章として見られる。

ID:a8fv3c

これは良くないでしょ。デザイン以前の問題として、文書構造を定義するのがHTMLの目的だと思う。

ID:K60tpS

文章構造的に問題あるかな?

ID:K60tpS

わかりやすいマークアップだと思うんだけど。

ID:K60tpS

> CSSで実現できるかどうかじゃなくて、文章構造的に正しいかどうかじゃないの?

ulなくても文章構造的に正しいと思うので、ul書かなくて済むなら直にaタグを書くという考えです。

ID:5Nzf7l

文章構造的に問題ありあり。
内容はlooInl2nGGejさんが言及してる通り。

ID:5Nzf7l

文章じゃなくて文書構造だったorz

ID:FGs6ea さんの回答

テーブルで作れば、問題なし。

ID:w5Ic8Z

なんでこんなに評価されているんだ?
↑よりもアウトだろ。

ID:a8fv3c

HTMLをなんだと思ってるんだろう?素人でもこんなこと言わないよ。プロならなおさら。それ使って飯食ってるなら、せめて正しい仕様を意識する努力をするのは義務だと思う。

ID:8Um.22

皮肉に対する評価でしょ?

ID:5Nzf7l

どうせhtml5だから、tableタグをレイアウト目的で使用することを明示すればいいと思ってるんだろうけど。。。nav,ulタグっていう文書構造に即したタグがあるわけだし、わざわざtableタグなんて使う必要ないじゃん。

ID:qLXqIs さんの回答

CSS全部オフにした状態でどう見えるか考えればわかることだと思うけど、複数項目のナビゲーションでリスト構造じゃないなんて読みづらくね?

ID:XaEkUB さんの回答

html5の場合は、CSSオフ時の見え方はあまり関係なくて、アウトラインでしょ。

ID:I3odOu

CSSオフにすればアウトラインがある程度可視化できるよってことでしょうね

ID:XaEkUB

xhtmlと違って、hタグを宣言しなくても、sectionタグなどでアウトラインが一段下がるわけだから、cssオフにしたところで、それは可視化できないような。。。それはある程度なのか?

ID:J3NLfv

アウトラインもCSSオフ時の見え方もどっちも意識すべきなんじゃないかな

ID:ZCDDpM

ある程度の話でしょ。
それにhタグは今は関係なくて、ナビゲーションをリストにした方がいいかどうかでしょ?
CSSオフったときの見え方云々は合ってると思うけど。

ID:kMx8N5

>それにhタグは今は関係なくて、ナビゲーションをリストにした方がいいかどうかでしょ?

ulかnavかでアウトラインが違うんだよ。
CSSオフでそれを確認できないからそういう発想になるんだろ?

ID:eupR/L さんの回答

IE6だと正しく表示されませんが、

<?doctype html> 
<html> 
<head> 
 <title>少しだけ嬉しくなるnav要素の書き方</title> 
</head> 
<body> 
 
<nav id="Nav"> 
 <rails> 
  <twitter href="http://w3q.jp" /> 
 </rails> 
 <php> 
  <facebook src="/images/fb.png" /> 
 </php> 
</nav> 
 
</body> 
</html>
ID:fqLPOP さんの回答

もともと<div id="navi"><ul><li></li></ul></div>だったのを、html5で「ここはナビですよ」ってことを、さらにわかりやすくするために、<nav>ってタグが追加されたように認識しているんですが。。てことは、<nav>が出来たから、そのかわりに<ul>タグを失くすってのは、本末転倒というか少しおかしなな感じがするのですが。間違っていたらすみません。

ID:8Um.22

その通りだと思います

ID:5SCj8T

私もそういう認識で書いてますね。視覚的なものでもないですし。

ID:qJ5lIA

言えてる

最終更新日:2013-03-17 (15,266 views)

関連するトピックス

ページ上部に戻る