Idées sur ce balisage - Réflexions sur Sémantique

Bonjour à tous

J'aimerais votre avis concernant le balisage mis en place pour un site structuré de la façon suivante :

- en haut de page : logo à gauche, menu secondaire (contact, plan de site, ...) à droite,
- en dessous le menu principal et une image en fond qui occupe 100% de la largeur (fixée ou fluide),
- le contenu,
- et enfin le pied de page.

Une image pour résumer :



J'ai donc envisagé plusieurs solutions pour le code XHTML (euh, en fait seulement 2 ) :

Solution 1°) Classique : bloc entête avec logo + menu

<div id="entete">
     <h1>Nom du site</h1>

     <ul id="nav_secondaire"> 
          [...]
     </ul>
</div>

<div id="nav_principale">
     <ul>
          [...]
     </ul>
</div>

<div id="contenu">
</div>

<div id="pied">
</div>

Solution 2°) Alternative : bloc entête ET bloc menu

<div id="entete">
     <h1>Nom du site</h1>
</div>

<div id="nav">
     <ul id="nav_principale">
          [...]
     </ul>
     
     <ul id="nav_secondaire"> 
          [...]
     </ul> 
</div>

<div id="contenu">
</div>

<div id="pied">
</div>

J'ai choisi la 2ème solution, celle-ci me paraissant donner d'avantage de sens au document (visible lors de la désactivation des CSS). Le site est centré horizontalement, sa largeur est fixée à 990px et le menu secondaire est postionné absolument en haut à droite de la page. Mais voilà...

Après finalisation, j'ai réalisé que le design aurait sans doute eu plus de classe avec une bannière fluide (qui occupe toute la largeur de la fenêtre) et les autres éléments centrés comme précédement. Et sauf erreur de ma part, cela est impossible à mettre en oeuvre avec le balisage choisi (aucun moyen de placer correctement le menu secondaire en haut, aligné à droite sur 990px).

Je me pose donc les questions suivantes :
- A quoi sert de penser optimisation et Sémantique si pour au final se rendre compte qu'un balisage plus classique aurait été plus modulable ? (si j'avais opté pour la première solution jamais je n'aurais été confronté au problème évoqué ci-dessus)
- Quelles sont les différences concrètes entre ces 2 solutions (ou une autre) en matière d'accessibilité, de référencement, etc. ?
- A l'avenir, dois-je penser d'avantage à la modularité qu'à l'optimisation et au sens du document ?
- Dernière question, est-ce que l'optimisation, l'organisation et la propreté du code font partie de la Sémantique ? (ou Sémantique = choix des balises à bon escient, et c'est tout ?)

J'attends vos retours, merci
Modifié par BeliG (01 Feb 2008 - 16:28)

Bonjour,

"Principal" et "secondaire" ne donne guère idée du contenu et du rôle effectif des deux menus. Mais par expérience : a priori, les deux structures sont potentiellement indifférentes pour l'accessibilité (reste à voir le détail pour savoir si ce potentiel est exploité).

(Je suppose que le menu secondaire n'est pas un menu contextuel étroitement dépendant du contenu propre de chaque page ? Genre compléments d'informations sur le contenu, liens vers les versions téléchargeables, etc ? Parce que si c'est le cas, c'est le design qui est à revoir, autant que la structure ).

Sinon, la sémantique HTML, là, on est très au-dessus de ses pauvres (mais utiles) capacités. La sémantique HTML, c'est essentiellement mettre des HN, des UL, des P et des BLOCKQUOTE, et éventuellement des DL et autres PRE CODE, pour baliser le contenu.

Le contenu, pas l'interface. Pour l'interface, HTML n'est pas fait pour. A ce niveau, la sémantique consiste surtout à trouver l'ordre des grands blocs HTML qui reste utilisable sans CSS et permet de réaliser l'affichage CSS souhaité.

Pour ce qui est de la modularité : bien souvent, savoir que l'on aura peut-être plus tard à déplacer quelques lignes dans des templates PHP est beaucoup moins fatiguant et plus utile que de chercher le Graal HTML.
Modifié par Laurent Denis (01 Feb 2008 - 17:07)

Bonjour Laurent,

a écrit :
"Principal" et "secondaire" ne donne guère idée du contenu et du rôle effectif des deux menus.

Je m'inspire de contenu existant (d'agences web en l'occurence) pour créer mes templates. Pour celui-ci, le menu principal contient les liens permettant d'accèder aux informations détaillées de l'activité de la société : about us, services, portfolio, etc. Le menu secondaire est indépendant du premier : home, contact, site map, etc.

a écrit :
Pour l'interface, HTML n'est pas fait pour. A ce niveau, la sémantique consiste surtout à trouver l'ordre des grands blocs HTML qui reste utilisable sans CSS [...]

Si j'ai bien compris, la structure XHTML et plus précisement l'organisation des blocs font partie intégrante de la Sémantique ? (Est-ce correcte de dire que la solution n°2 est plus Sémantique que la première ?)

Merci pour ces précisions

BeliG a écrit :

Si j'ai bien compris, la structure XHTML et plus précisement l'organisation des blocs font partie intégrante de la Sémantique ? (Est-ce correcte de dire que la solution n°2 est plus Sémantique que la première ?)

Non. Ni plus, ni moins. Cela n'a rien à voir avec la sémantique HTML. j'aurais dû mettre "la sémantique" entre énormes guillemets dans la phrase que tu cites, qui était, disons, un peu sarcastique.

En revanche, du point de vue de l'accessibilité (cohérence de l'ordre HTML et de l'ordre affiché, notamment pour la tabulation, vu ton design) et ergonomique (sans CSS), il est plus logique de mettre en premier les liens généraux "home, contact, site map" et ensuite les liens plus spécifiques ("about us, services, portfolio" etc).

donc a priori, plutôt la structure n°1
Modifié par Laurent Denis (01 Feb 2008 - 17:42)

Laurent Denis a écrit :
En revanche, du point de vue de l'accessibilité (cohérence de l'ordre HTML et de l'ordre affiché, notamment pour la tabulation, vu ton design) et ergonomique (sans CSS), il est plus logique de mettre en premier les liens généraux "home, contact, site map" et ensuite les liens plus spécifiques ("about us, services, portfolio" etc).

Damned, j'étais sûr du contraire : organiser la navigation selon le degré d'importance des éléments (informations sur la société > liens généraux). Bon...

a écrit :
J'aurais dû mettre "la sémantique" entre énormes guillemets dans la phrase que tu cites, qui était, disons, un peu sarcastique.

Oh Ben forcément, si tu t'amuses à feinter là où j'ai du mal je capte plus... Dans un premier paragraphe je lis :

a écrit :
La sémantique HTML, c'est essentiellement mettre des HN, des UL, des P et des BLOCKQUOTE, et éventuellement des DL et autres PRE CODE, pour baliser le contenu.

Ok, Sémantique = utiliser les "bonnes" balises.

Et dans le suivant :

a écrit :
A ce niveau, la sémantique consiste surtout à trouver l'ordre des grands blocs HTML qui reste utilisable sans CSS

Donc Sémantique = (aussi) organisation, regroupement des blocs.


Modifié par BeliG (01 Feb 2008 - 18:03)

Pareil, plutôt la structure 1, un peu plus logique vu le contenu et plus simple pour la mise en page.

Ceci dit, utiliser la 2 ne tuerait personne, et pour la mise en page ça serait juste un tout petit peu plus compliqué mais pas bien méchant non plus.

Mais bon, pourquoi faire compliqué quand on peut faire simple, hum?