2012-03-07 8 views
8

私は<nav>要素または<ul>要素を使用している場合、ナビゲーションメニューを作成していますか?navまたはulを使用する必要があります

私がnavを使用する場合、私はshivを使用してブラウザ間で動作するようにする必要があります。

これがそうなら、navul以上に使用するとどのような利点がありますか?

EDIT:

私はあなたがnav私の質問にulを置くことができます知っているが、なぜnavは全く使用しているのですか?

答えて

10

<nav><ul>と混同しないでください。両方ともナビゲーションメニュー用に一緒に使用できます。

NavはHTML5タグです。 HTML5で何かを作成する場合は、制限がないので<nav>を使うことができますが、すべてのブラウザがこれを正しくレンダリングするわけではありません。

<nav> 
    <ul> 
     <li><a href="default.asp">Home</a></li> 
     <li><a href="news.asp">News</a></li> 
     <li><a href="contact.asp">Contact</a></li> 
     <li><a href="about.asp">About</a></li> 
    </ul> 
</nav> 
  1. Read about Html 5

Ul順不同リストを作成します。順序なしとは、リスト内の項目が特定の順序でないことを意味します。 nav内にul要素をネストすると、リンクを配置できます。

HTMLタグの詳細とその動作方法here

<ul> 
    <li><a href="default.asp">Home</a></li> 
    <li><a href="news.asp">News</a></li> 
    <li><a href="contact.asp">Contact</a></li> 
    <li><a href="about.asp">About</a></li> 
</ul> 

これにより、ナビゲーションバーが作成されます。これを使用すると、より見栄えの良いCSSスタイルを配置する必要があります。

上記のコードはどちらも同じ結果になります。唯一の違いは、navは、この要素がナビゲーション目的であることをブラウザに通知していることです。あなたは、一般的にそうように、とにかく<nav>内のリストを使用する必要があります

+1

navを使用しないと、SEOにやさしくなりませんか?そうでなければ、私は言ったようにnav – qwertymk

+0

@ qwertymkの利点を見ません。いいえ、SEOの優位性はありません(現時点で)また近い将来にはありません。 – Christoph

3

要素は意味的により具体的であり、一般的にはより良い選択です。たとえば、検索エンジンでは、単純なリンクリスト(推奨される投稿や関連アイテムなど)ではなく、その中のリンクがナビゲーションを表すことがわかります。

1

navは、このコードがページのナビゲーションであることを指摘するために導入された意味的なhtml5要素です。 「通常の非類義語」検索エンジンの場合は、ulまたはnavを使用しても違いはありません。彼らは問題なく両方を理解するでしょう。現時点では、これらのセマンティック要素を使用することはあなたにとって本当の利点をもたらしません。

これらのhtml5要素を使用するとIEが壊れてしまいますので、IEでそれらを「登録」する必要があるので、IEはそれらをスタイリング可能なhtml要素として認識します。

3

はケースによって異なりますが、ほとんどの時間、あなたは両方を使用することがあります。

<nav> 
    <ul> 
     <li><a href="#">item1</a></li> 
     <li><a href="#">item2</a></li> 
     <li><a href="#">item3</a></li> 
     <li><a href="#">item4</a></li> 
     <li><a href="#">item5</a></li> 
    </ul> 
</nav> 

<!-- Or just links --> 

<nav> 
    <a href="#">Item</a> 
    <a href="#">Item</a> 
    <a href="#">Item</a> 
</nav> 

両方が意味的に正しいです。

0

navを使用したいが、それをサポートしていないブラウザで問題が発生しないようにするには、最も簡単なことは、スタイリングを適用せずにdivの周りにラップして代わりにスタイルを適用することです。

<nav> 
    <div class="nav"> 
     <ul> 
      <li><a href="?">List Item Link</a></li> 
      <li><a href="?">List Item Link</a></li> 
      <li><a href="?">List Item Link</a></li> 
     </ul> 
    </div> 
</nav> 
+0

これは、これをサポートしていないブラウザでも機能しますか?常に? – qwertymk

0

ちょうど私の意見では、私はIE 6と7は、まだかなりの市場シェアを持っている、と私はulが仕事を得るためにフープを介してジャンプする必要はありません知っているという理由だけでulを使用します。今はとにかく簡単です。 NAVとUL要素の両方がHTML5でメニューを作成するために使用することができ

0

  • のnav要素は、我々は主要なナビゲーションブロック
  • を扱っているリストは、このナビゲーション内部リンクのことを通信する通信あなたは、メニュー作成に

    <nav> 
    <ul> 
        <li>item 1</li> 
        <li>item 2</li> 
    </ul> 
    </nav> 
    
    をNAVおよびULの両方を使用することができますしかし、ブロック項目

のリストを形成します

navまたはulを選択するかどうかはあなたに任せます

関連する問題