5568 sujets

Sémantique web et HTML

Struture site en une seule page

Bonjour à tous,

j'aimerais avoir un avis sur cette structure d'un site de restaurant qui doit être réalisé en une seule page obligatoirement.


<div id="header">
  ...
</div>

<div id="p_restaurant">
  <h1>Nom restaurant vous propose une cuisine de haute qualité</h1>
  <hr />
  <ul>
    <li><h3>Présentation</h3></li>
    <p>
      ...
    </p>
  </ul>
  
  <ul>
    <li><h3>Horaires</h3></li>
    <p>
      ...
    </p>
    <li><h3>Plats à emporter</h3></li>
    <p>
      ...
    </p>
    <li><h3>Livraison</h3></li>
    <p>
      ...
    </p>
  </ul>
</div>

<div id="p_menus">
  <h2><img src="img-titre-menu" alt="Nos menus"></h2>
  <hr />
  <ul>
    <li><h4>Menu XXX</h4></li>
    <li><h4>Menu XXX</h4></li>
    <li><h4>Menu XXX</h4></li>
    <li><h4>Menu XXX</h4></li>
  </ul>
</div>

<div id="p_carte">
  <h2><img src="img-titre-carte" alt="A la carte"></h2>
  <hr />
  <ul>
    <li><h4>Plat XXX</h4></li>
    <li><h4>Plat XXX</h4></li>
    <li><h4>Plat XXX</h4></li>
    <li><h4>Plat XXX</h4></li>
  </ul>
</div>

<div id="p_contact">
  <h2><img src="img-titre-contact" alt="Contact / Accès"></h2>
  <hr />
  <h3>Contact</h3>
   ...
  <h3>Accès</h3>
   ...
</div>

<div id="footer">
  ...
</div>
Bonjour,

Quelques remarques :
* La hiérarchie des titres n'est pas correcte

* UL ne peut pas contenir de P

* L'utilité des HR ne me semble pas primordiale. S'il s'agit juste de faire apparaitre une ligne sous les titres, une bordure sera bien mieux.
Laurie-Anne a écrit :
Bonjour,

Quelques remarques :
* La hiérarchie des titres n'est pas correcte

* UL ne peut pas contenir de P

* L'utilité des HR ne me semble pas primordiale. S'il s'agit juste de faire apparaitre une ligne sous les titres, une bordure sera bien mieux.


Merci pour votre réponse,

pour les HR ils ont plus une utilité graphique que pour séparé le contenu...

Pour les titres je ne sais trop comment faire vu que tout est en une seule page.
Laurie-Anne a écrit :
Bonjour,

Quelques remarques :
* La hiérarchie des titres n'est pas correcte

* UL ne peut pas contenir de P

* L'utilité des HR ne me semble pas primordiale. S'il s'agit juste de faire apparaitre une ligne sous les titres, une bordure sera bien mieux.


Comme UL ne peut contenir P, cela pose un pose un problème d'avoir plusieurs UL contenant qu'un seul LI ?

  <ul>
    <li><h3>Présentation</h3></li>
  </ul>
  <p>
    ...
  </p>
  <ul>
    <li><h3>Livraison</h3></li>
  </ul>
  <p>
    ...
  </p>


Car LI me permet de définir une puce personnalisée pour que le texte contenu dans la balise soit bien centré verticalement par rapport à cette image.
Un ul ne contenant qu'un seul li est inutile, autant mettre le hn directement...

Pour les dl, dt, dd, ce n'est pas une bonne solution non plus (ce ne sont pas des listes de définitions).

<h2>titre</h2>
<p>...</p>

C'est très bien. Il n'y a rien à rajouter.

Pour la hiérarchie des titres, qu'il n'y ait qu'une seule page ne change pas le problème. La hiérarchie doit être respectée (et stylée pour convenir ensuite). Donc tes premier h3 sont des h2 et tes h4 sont des h3.
Laurie-Anne, je ne suis pas d'accord : ça ressemble justement à des listes de définitions pour peu que les plats s'accompagnent d'une description sommaire... mais même sans.

Sémantiquement, ça fait sens (il me semble) de lister les plats du menu et ou ceux de la carte dans une liste de définition.

Je peux bien sûr me tromper.

(cette page donne quelques exemples qui m'apparaissent proches)


à plus,

éric
padding-top a écrit :
Sémantiquement, ça fait sens (il me semble) de lister les plats du menu et ou ceux de la carte dans une liste de définition.
Pas vraiment, la liste simple est tout à fait suffiante.
padding-top a écrit :
À la place des <ul><li>, emploie des <dl><dt><dd>...

Sans vouloir contrarier qui que ce soit, et si vous essayiez la simplicité?
<!-- Inutilement complexe, et code invalide -->
<ul> 
  <li><h3>Horaires</h3></li> 
  <p> 
    ... 
  </p> 
  <li><h3>Plats à emporter</h3></li> 
  <p> 
    ... 
  </p> 
  <li><h3>Livraison</h3></li> 
  <p> 
    ... 
  </p> 
</ul>

<!-- Le même code, corrigé -->
<h3>Horaires</h3>
<p> 
  ... 
</p> 
<h3>Plats à emporter</h3>
<p> 
  ... 
</p> 
<h3>Livraison</h3>
<p> 
  ... 
</p>

Modifié par fvsch (20 Apr 2011 - 16:14)
padding-top a écrit :
ça ressemble justement à des listes de définitions pour peu que les plats s'accompagnent d'une description sommaire...

Non. C'est une structure titre-contenu, pas terme-définition.

Il y a une notion de direction: le titre qualifie le contenu, la définition qualifie le terme. La direction est différente, et on gagnera à réserver les DL aux glossaires et cas d'usages très proches.

Si on estime que les HN et les DL font la même chose, alors il y a un doublon dans la spec. Et soit on utilise l'un ou l'autre sans distinction selon les préférences ou au petit bonheur la chance, soit on résoud le doublon en dépréciant un des deux mécanismes. Dans ce dernier cas, je garderais les HN (bien utilisés par les agents utilisateur) et je bazarderais les DL.
(Mais j'estime bien sûr qu'il n'y a pas doublon, car HN et DL fonctionnent dans des sens inverses et n'ont donc pas les mêmes usages.)
Merci beaucoup pour vos réponses,

mais si je prend cette structure pour la partie présentation du restaurant, comment puis je affecter une petite image en guise de puce a côté des chaque titre (présentation, livraison etc) pour qu'elle soit facilement aligner verticalement par rapport au texte?

Pour la partie Menus / Carte, cette structure est elle correcte ?

<ul>

<li>
  <h3>Nom Menu 1</h3>
  <img src=img_menu_1  />
  <hr />
  <p>Description Menu 1</p>
  <hr />
  <p>Prix Menu 1</p>
</li>

<li>
  <h3>Nom Menu 2</h3>
  <img src=img_menu_2  />
  <hr />
  <p>Description Menu 2</p>
  <hr />
  <p>Prix Menu 2</p>
</li>

</ul>

Modifié par romrom_94 (19 Apr 2011 - 15:01)
romrom_94 a écrit :
mais si je prend cette structure pour la partie présentation du restaurant, comment puis je affecter une petite image en guise de puce a côté des chaque titre (présentation, livraison etc) pour qu'elle soit facilement aligner verticalement par rapport au texte?

Le principe c'est que tu pars du code HTML nécessaire pour décrire ton contenu:
<h3>Nom Menu 1</h3>
<img src=img_menu_1 alt="" /> 
<p>Description Menu 1</p>
<p>Prix Menu 1</p>
 
<h3>Nom Menu 2</h3>
<img src=img_menu_2 alt="" />
<p>Description Menu 2</p> 
<p>Prix Menu 2</p>

Ensuite, si tu as des besoins de mise en forme:
- soit tu peux les gérer avec les éléments HTML existants;
- soit tu rajoutes des éléments HTML neutres (DIV ou SPAN) comme support de mise en forme.

Ici, si tu veux pouvoir appliquer un style à chaque menu, et te faciliter le boulot pour la mise en forme CSS, tu peux faire:
<div class="carte-menu">
  <h3 class="nom">Nom Menu 1</h3>
  <img class="apercu" src=img_menu_1 alt="" /> 
  <p class="description">Description Menu 1</p>
  <p class="prix">Prix Menu 1</p>
</div>
<div class="carte-menu">
  <h3 class="nom">Nom Menu 2</h3>
  <img class="apercu" src=img_menu_2 alt="" /> 
  <p class="description">Description Menu 2</p>
  <p class="prix">Prix Menu 2</p>
</div>

Je me suis pas limité sur l'utilisation des classes. On peut aussi prendre le parti de ne pas rajouter de classes aux différents enfants des DIV, et utiliser des sélecteurs CSS du type:
.carte-menu > h3 {}
.carte-menu > img {}
.carte-menu > img + p {}
.carte-menu > p + p {}
+1

padding-top a écrit :
À la place des &lt;ul&gt;&lt;li&gt;, emploie des &lt;dl&gt;&lt;dt&gt;&lt;dd&gt;....


à plus,

éric
Administrateur
Toujours pas, à moins que tu aies omis de lire les messages de fvsch. Ou bien peut-être as-tu des arguments mieux étayés que "+1" que tu pourrais nous faire partager ?
Modifié par Felipe (20 Apr 2011 - 16:27)
Sujet clos
Aller à