5568 sujets

Sémantique web et HTML

Fil d'ariane HTML5

Bonjour à tous.

Je developpe un nouveau theme sur un de mes blog et j'essaye de le passer en HTML5

Pour mon fil d'ariane j'avais quelque chose du type:
<div xmlns:v="http://rdf.data-vocabulary.org/#">
  <span id="breadex">&raquo;</span>
  <span typeof="v:Breadcrumb">
    <a title="Mon Site" id="breadh" class="external" href="http://www.example.tld/" rel="v:url" property="v:title">
      Mon Site
    </a>
  </span>
  <span id="breadex">
    >>
  </span>
  <span typeof="v:Breadcrumb">
    <a title="Blog Mon Site" id="breadh" class="external" href="http://www.example.tld/blog/" rel="v:url" property="v:title">
      Blog
    </a>
  </span>
  Mon article
</div>


Le souci est qu'avec le passage en HTML5 il me releve de nombreuses erreurs,
J'aimerai avoir votre avis:
Selon vous puis je laisser le fil d'ariane ainsi?
Ou dois oligatoirement le changer pour:
Désolé c'est partit trop vite?
ou le modifier pour: 
<ol class="breadcrumb">
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/" itemprop="url">
            <span itemprop="title">Mon Site</span>
        </a>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/news" itemprop="url">
            <span itemprop="title">Blog</span>
        </a>
    </li>  
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/news/news-story.1" itemprop="url">
            <span itemprop="title">Mon article</span>
        </a>
    </li>
</ol>


Sachant notamment que le fil d'ariane actuel est utilisé, compris et exploiter par notamment google depuis 1an
Bonjour,

Il semblerais que tu utilise le twitterbootstrap.

Pour ma part, je pense que le fil d'ariane ce doit d'être dans un <nav>.

Après, rien de me choque. Voila le mien pour ton information, qui est bien utilisé et relevé par les WebmasterTools


<nav id="fdf" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
              <a href="/" itemprop="url">
                            <span itemprop="title">TITRE 1</span>
              </a> 
              &gt; 
              <a href="/xxx-xx/" itemprop="url">
                            <span itemprop="title">TITRE</span>
              </a>
               &gt;
               <a href="/xxx-xxx/xxxx.html" itemprop="url">
                            <span itemprop="title">TITRE</span>
              </a>
</nav>


Edit :

Il ne faut pas que tu déclare 
itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
dans tes 
<li>
mais dans ton 
<ol>

Modifié par totopsy (06 Mar 2014 - 10:33)
Administrateur
Bonjour,

une liste non-ordonnée convient tout à fait (ordonnée ? Peut-être, je n'utilise jamais). L'élément nav est à réserver à LA navigation principale du site (le menu de navigation), celui où tu ajoutes le role ARIA navigation.
Donc pour vous le Nav n'est à uttiliser que sur le menu principale?

Est ce que ce la pose un problème si le menu en intégré au header?
On aurais:
<header role="banner">
  tittre
  <nav role="navigation">
  [...]
  </nav>
</header>
<div role="main">
  <article>
  <article>
</div>
<footer role="contentinfo">
[...]
</footer>
Felipe a écrit :
Bonjour,

une liste non-ordonnée convient tout à fait (ordonnée ? Peut-être, je n'utilise jamais). L'élément nav est à réserver à LA navigation principale du site (le menu de navigation), celui où tu ajoutes le role ARIA navigation.


The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Je ne suis pas d'accord avec toi. Pour moi le nav sert a representer des liens, pour une navigation internet plutot pertinente. Ce qu'est le fil d'ariane. Le fil d'ariane est loin d'etre une liste.

EDIT: Voir nav en bas de page : http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Modifié par totopsy (08 Mar 2014 - 13:01)
Sujet clos
Aller à