Article / Aside / List pour un site commerce

Bonjour,
Selon moi, le premier choix serait plus pertinent, nous sommes dans une liste de produits, donc on ouvre une liste =°

Hors sujet : J'adore l'adresse de ton site... Parce que sous Firefox, sur mon écran, la taille de la barre indiquant l'adresse vers laquelle pointe le lien survolé fait exactement la même taille que la taille séparant la bordure gauche de mon écran de la bordure gauche du site. Et j'aime ça...

Personnellement, je dirais comme Gothor, j'opterais pour le premier choix.

Car je me sentirais plus à l'aise du fait de pouvoir manipuler non seulement la balise UL et la balise LI de pouvoir appliquer du CSS sur UL ET sur LI

Merci pour vos réponses, je vais partir sur <ul><li>

@Gothor par contre quand tu dit que ce n'est pas sémantiquement correct, si dans ma page j'ai cela

<article>
    <h1>Nom produit</h1>
    <img src="toto.png" title="photo produit" />
    <p>Description produit</p>
</article>
<aside>
    <article>
        <h1>Nom produit</h1>
        <img src="toto.png" title="photo produit" />
        <p>Description produit</p>
    </article>
    <article>
        <h1>Nom produit</h1>
        <img src="toto.png" title="photo produit" />
        <p>Description produit</p>
    </article>
</aside>

Finalement les <article> de <aside> sont du contenu indépendant pouvant être utilisé individuellement.
Modifié par Albadoud (18 Jun 2012 - 18:17)

Gothor a écrit :
Dans ce cas (selon moi), oui... Mais pas dans celui que tu avais montré dans ton premier post.

c'est le fait de sortir le aside de l'article ou d'avoir un contenu plus complet dans les <article> ?

Bonjour.
Et bien sortir le aside est plus juste . Ce contenu ne fais pas partie de l'article, mais est un contenu qui vient s'ajouter à l'article dans le contexte de ta page. Si ton article se retrouve dans une autre page ou un autre site, ce contenu aside n'aura plus forcément de sens.

Ta dernière solution me semble correcte et parfaitement stylable. Toutefois, si tu souhaites abuser de la sémantique, cette solution serait la plus précise:

<aside>
  <ul>
    <li>
      <article>
        …
      </article>
    </li>
    <li>
      <article>
        …
      </article>
    </li>
  </ul>
</aside>

Albadoud a écrit :
c'est le fait de sortir le aside de l'article ou d'avoir un contenu plus complet dans les &lt;article&gt; ?

Les deux.

kustolovic a écrit :
Bonjour.
Et bien sortir le aside est plus juste . Ce contenu ne fais pas partie de l'article, mais est un contenu qui vient s'ajouter à l'article dans le contexte de ta page. Si ton article se retrouve dans une autre page ou un autre site, ce contenu aside n'aura plus forcément de sens.

Ta dernière solution me semble correcte et parfaitement stylable. Toutefois, si tu souhaites abuser de la sémantique, cette solution serait la plus précise:

<aside>
  <ul>
    <li>
      <article>
        …
      </article>
    </li>
    <li>
      <article>
        …
      </article>
    </li>
  </ul>
</aside>

J'avais pensé à faire cela en effet mais je trouve que c'est alourdir le DOM pour pas grand chose.

Albadoud a écrit :
Avec HTML5 je suis parti sur la balise <aside> pour encapsuler cette liste. C'est peut être une erreur de ma part ?

Non, ça me semble être un bon choix.

Sur le fait de mettre le ASIDE dans le ARTICLE de la fiche produit ou directement en dehors: c'est un peu kif-kif et pas très important.
Si le contenu du ASIDE est relativement court, c'est pas trop gênant et ça peut même être pertinent de le mettre dans le ARTICLE. Si c'est un contenu complexe et un peu long, on le mettra plutôt à l'extérieur.

Albadoud a écrit :
Mon dilemme concerne le contenu du aside. Est-ce que j'utilise une liste <ul><li> ou est-ce que je liste les produit similaire chacun dans une balise article.

Théoriquement un contenu de type teaser avec un titre et un paragraphe de description est suffisant pour justifier un ARTICLE. Mais l'usage de ARTICLE dans ce cas n'est pas indispensable ou particulièrement intéressant non plus. Donc c'est un peu comme tu veux. Par contre, on choisira entre:

<ul>
  <li>
    <hN>Titre</hN>
    <p>Description</p>
  </li>
  <li>
    <hN>Titre</hN>
    <p>Description</p>
  </li>
</ul>

et

<article>
  <hN>Titre</hN>
  <p>Description</p>
</article>
<article>
  <hN>Titre</hN>
  <p>Description</p>
</article>

Mais on évitera de combiner les deux (lourdeur inutile).

fvsch a écrit :

Sur le fait de mettre le ASIDE dans le ARTICLE de la fiche produit ou directement en dehors: c'est un peu kif-kif et pas très important.
Si le contenu du ASIDE est relativement court, c'est pas trop gênant et ça peut même être pertinent de le mettre dans le ARTICLE. Si c'est un contenu complexe et un peu long, on le mettra plutôt à l'extérieur.

Pas tout-à-fait d'accord, ce n'est pas kif-kif. C'est une question de contexte. Si le contenu du aside a un sens en dehors du contexte, alors on peut le mettre dedans, sinon il va dehors. Dans le cas de produits similaires, je suis toutefois d'accord que ça se discute. Si on veut être pinailleur, j'opte plus pour le mettre en dehors, dans le cas où ce ne sont pas des "produits similaires" mais plutôt des "produits les plus similaires parmi ce que je vend"dans le cas d'une boutique en ligne.

fvsch a écrit :

Mais on évitera de combiner les deux (lourdeur inutile).

D'accord avec ça: combinaison==abus de sémantique. Toutefois on peut, dans certains cas le justifier. On signaler la nature similaire des <article> par une classe identique.