5603 sujets

Sémantique web et HTML

Migration HTML5 et structure

Bonjour,

Dans le cadre d'un rajeunissement d'un site, j'aimerais voir pour passer certains éléments sous la syntaxe HTM5, comme par exemple un <nav> pour les liens de navigation ...

Mais j'ai plus de mal avec les sections, hgroup et h1..N
Le site est assez classique :

une partie gauche avec les blocs (titre + contenu) sans rapport avec la page et une partie centrale avec le principal (titre, sous-titres, texte ...)

J'aurais tendance à faire un truc

* section blocs d'info
  * section 01
    * h1
    * p
  * section 02
    * h1
    * p
* section principale
  * hgroup
     * h1
     * h2
   * h3
   * p
   * h3
   * p
...


Mais du coup je vois pas trop comment bien faire comprendre que le "h1" de la page c'est celui dans section principale > hgroup > h1 et pas un autre, et de meme que c'est le contenu de "section principale" le plus important ... Smiley biggol

Bref, comment structure cette "partie gauche" ? (j'ai regardé aside mais à priori c'est plus quand cela a un rapport avec le contenu)

Merci d'avance Smiley cligne
Hello,

Première remarque, test H3 dans la section principale devraient être des H2. Sinon tu sautes un niveau (tu passes de H1 à H3, le H2 dans le HGROUP étant ignoré dans le plan du document.

ilmir a écrit :
Mais du coup je vois pas trop comment bien faire comprendre que le "h1" de la page c'est celui (...)

Si tu veux avoir un H1 qui décrit l'ensemble des contenus de la page, il faut mettre un H1 au début de ton contenu, avant tes deux SECTION de plus haut niveau.

Autrement, il n'y a pas de «H1 de la page», et pas de raison de faire comprendre quoi que ce soit sur ce sujet au navigateur ou à l'algorithme HTML5 de plan du document. Smiley smile

ilmir a écrit :
une partie gauche avec les blocs (titre + contenu) sans rapport avec la page

Tu as un contenu sur ta page (dans ta partie gauche) mais ce contenu sur la page est «sans rapport avec la page»? Tu te rends compte que c'est un contresens flagrant ça? Smiley cligne
Hé hé, effectivement Smiley smile en relisant ça frise un peu l'absurde.
Je voulais dire que le contenu "primaire attendu par l'utilisateur" est dans la zone droite, le contenu de la zone de gauche étant du "contenu annexe général du site sans lien avec le contenu primaire".

A priori, c'est plus le job de l'attribut "role" donc de définir l'info des sections ?

En tout cas je note le coup du hgroup.

Cela donnerait :

* hgroup
  * h1 - titre
  * h2 - baseline
* div role="complementary"
  * section 01
    * h1
    * p
  * section 02
    * h1
    * p
* div role="main"
   * h2
   * p
   * h2
   * p
...



Est-ce plus logique ?
ilmir a écrit :
Est-ce plus logique ?

J'ai peur que ça le soit moins. Ça va dépendre du contenu exact...
Ben le contenu, comme j'ai dis, c'est du contenu annexe global du site dans une colonne et le contenu principal au centre (avec soit une liste d'articles, soit un article, soit ... je sais pas quoi Smiley cligne ).

En fait je m'appercois que je positionne ma structure dans l'ordre de lecture, alors qu'en fait y a pas de raison de le mettre "avant car à gauche" Smiley cligne
De plus, j'ai lu un peu aside qui a évolué et à priori qui dépend du context, dans un article il apporte des compléments à celui-ci, alors qu'en dehors il apporte des compléments globaux...

Ce qui donnerait :

* hgroup
  * h1 - titre
  * h2 - baseline
* section role="main"
   * article
     * h1
     * h2
     * p
     * h2
     * p
* aside role="complementary"
  * section 01 // bloc général site
    * h1
    * p
  * section 02 // bloc général site
    * h1
    * p
...


Mieux, moins bien ? (avec arguments Smiley langue voir conseils Smiley rolleyes )
Sujet clos
Aller à