7

Chris Coyier wrote a while ago that the best markup uses rel='up' in a <nav> section, but that was in 2010, and he said that this way was debated back then. What's the best way to mark up hierarchy using HTML5 for a breadcrumb navigation bar? Here is Chris' reccomendation:

<nav>
  <p>
    <a href="/" rel="index up up up">Main</a> >
    <a href="/products/" rel="up up">Products</a> >
    <a href="/products/dishwashers/" rel="up">Dishwashers</a> >
    <a>Second hand</a>
  </p>
</nav>
4

2 回答 2

1

This is how Google represents markup for BreadCrumb (using Microdata) - 

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/dresses" itemprop="url">
        <span itemprop="title">Dresses</span>
    </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/dresses/real" itemprop="url">
        <span itemprop="title">Real Dresses</span>
    </a> ›
</div>  
<div 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>
</div>

Source : https://support.google.com/webmasters/answer/185417

But I don't really think that there is right-or-wrong in either of the approaches!

于 2013-09-23T15:47:14.257 回答
0

Well, personally, I like this article by Divya Manian, which explains that semantics really don't matter as much as most people seem to think. Most of the time, people will be viewing your page in a web browser, and will have no idea what your underlying css or html structure is, and as such couldn't care less as long as it looks pretty and works.

Most search engines and computer accessibility software will figure out what it is regardless of your specific markup, as long as you don't specifically try to hinder them. Putting your navigation in a nav tag will of course help the smarter software, but the smarter software will figure it out anyway.

Worrying about whether your code follows semantics will not provide you with enough tangible benefits to make it worth your time to decide whether a rel=up is the "best way" to code your navigation. Don't waste your time, just code your site. (Unless of course you're getting paid by the hour.)

于 2012-06-03T03:26:34.033 回答