ブレッドクラムを作成するために使用するセマンティックHTMLマークアップは何ですか？

パンくずリストを作成するには、意味のあるHTMLタグを使用する必要がありますか？私はそれがリストであるため、ソートされていないリストを使用して作成されたメニューバーがあります。ブレッドクラムを作成するために使用するセマンティックHTMLマークアップは何ですか？

<ul id="navigation">    
    <li><%= Html.ActionLink("Home", "Index", "Home") %></li> 
    <li><%= Html.ActionLink("Contacts", "Index", "Contacts") %></li> 
</ul>

は今、私は問題があり、メニューの下にパンくずを置くことを決めた、私はどのようなタグを使用すべきか分かりません。可能な限り、私は意味のあるタグを使いたい。私を助けてください...

出典

2011-11-09 dpp

ので、 ">" を推奨しています。http：/ /css-tricks.com/7802-markup-for-breadcrumbs/ – Aziz

@Azizこれは興味深い記事だった、ありがとう。 – dpp

順序付きリストまたは段落タグを使用しない場合は、いつでもネストされたリストを使用して、ブレッドクラムの階層的な性質を意味的に表すことができます。

次の例では、マーク・ニューハウスのA List Apart article entitled "CSS Design: Taming Lists."

<div id="bread"> 
<ul> 
    <li class="first">Home 
    <ul> 
    <li>&#187; Products 
    <ul> 
     <li>&#187; Computers 
     <ul> 
      <li>&#187; Software</li> 
     </ul> 
     </li> 
    </ul></li> 
    </ul></li> 
</ul> 
</div>

出典

2012-01-21 00:05:25

パンくずリストに並べ替えられていないリストを使用すると、私にとっては完全に合理的です。アプリケーション固有の構造ごとに必ずしも名前付きタグがあるわけではなく、後にブレッドクラムのリストを表示しています。

cssを使用すると、パン粉を好きなように表示できます。

出典

2011-11-09 03:53:36

ええ、私はそれを考え、リストを注文しましたが、私はまだパン粉がリストではなく、木のような階層にあるという事実に就いています。 – dpp

いつでもブレッドクラムのツリーを表示しますか？もしそうなら、ネストしたリストもあまりにもよく機能します。 –

入れ子リストは完璧ですね。答えてくれてありがとう。 – dpp

ブレッドクラムをマークする方法はたくさんあります。リストは大丈夫です。はの特定の順序のリンクリストであるため、順序付きリストはブレッドクラムに適しています。

リストを使用したくない場合は、代わりにdivにリンクセットとして残すことができます。 HTML5を使用している場合は、nav要素に入れることができます。

最後に、HTML5 specは、p要素を使用するように提案しています。これは、特定のページにアクセスする方法の方向の段落として読み取ることができるためです。

出典

2011-11-09 03:55:28 zzzzBov

このhttp://css-tricks.com/7802-markup-for-breadcrumbs/を読んだ後、彼らは構造に適さないので、私はULやLIを使わないことに決めました。そこには「スクリーンリーダーを使っている人たちには、セマンティックコードを書かないと差別的だ」との意見が出ている。 – dpp

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

@domanokz、もしあなたがアクセシビリティを心配しているなら、私はJAWSやWindow Eyesの開発版をダウンロードし、あなたのモニターをオフにしてインターネットを閲覧することを強くお勧めします。セマンティクスが不明な場合は、実際に役立ちます。 – zzzzBov

旧ポストから来ていますが、検索に高い上がってきた私は、この質問が最初に頼まれたので、物事が少し変わってきたと思います。

html5サイトでは、breadcrumbsが技術的にサイト内を移動するため、navタグを使用します。彼らが何であるかをさらに明確にしたい場合は、マイクロデータを追加してパンくずリストであると述べることができます。

グーグルの例とhtml5doctorから

<nav> 
<ul> 
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">  
     <a href="http://www.example.com/dresses" itemprop="url"> 
      <span itemprop="title">Dresses</span> 
     </a> 
    </li> 
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="http://www.example.com/dresses/real" itemprop="url"> 
      <span itemprop="title">Real Dresses</span> 
     </a> 
    </li> 
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url"> 
      <span itemprop="title">Real Green Dresses</span> 
     </a> 
    </li> 
</ul>

出典

2013-06-25 03:14:52

常にヤコブニールセンをチェックアウト：彼は、あなたがこれを見てとりたいことがあり、2003年

出典

2013-08-05 00:23:05 ryanjohnsond

ブレッドクラムを作成するために使用するセマンティックHTMLマークアップは何ですか？

答えて

関連する問題