HTML5 question balise, tryhard

Bonjour, petite question qui ne trouve pas de réponse à ce jour.
Quelle est la meilleure façon de coder ceci :

<section>
<h1></h1>
<header><h1></h1></header>
</section>

Ou

<section>
<header><h1></h1><h2></h2></header>
</section>

Merci.

1 J'aime

Le seconde manière serait la plus respectueuse de la fonction de la balise header, au regard de la documentation. Tu pourrais également entourer tes balises de heading (h1 et h2) de la balise hgroup si jamais ces derniers doivent cohabiter avec d’autres éléments HTML. ;)

Merci pour ta réponse rapide.
A titre indicatif hgroup est obsolète (html5 obsolete)

Le probleme avec la seconde version (sans h1 dans la section) c’est que dans ce cas, le outline me dit :

  • Section untitle

dhoo!

Merci pour l’info. Il va falloir que je me mette un peu à la page sur les dernières spécifications d’HTML 5. :)

Du coup si des adeptes pouvaient commenter cet agencement, ca m’aiderait pas mal.

Question :

  • le titre du nav est il correct ?
  • Le body est elle une < section > nommé < body >?

Enjoy

Côté référencement c’est pas le plus optimum, surtout avec la multiplicité des balises h1 dans la page.

Pourtant : w3c html5 balise titre
Si je traduit bien, chaque élément balisé “doit avoir” un h1
Après le référencement n’est pas une problématique de mon projet.

Désolé pour la réponse un peu tardive, mais je ne suis pas très sûr de cette approche dans le sens où les balises de heading sont des balises de sections.

Si on prends en exemple, une page d’article, on considérerait naturellement que la balise h1 serait utilisé pour le titre de l’article et ensuite les sous-sections utiliserait les balises h2, h3 etc, y compris les éléments qui pourraient être présent dans une sidebar. Il nous semblerait alors étrange, d’avoir plusieurs fois une balise h1 dans une même page.

Après c’est ma vision de choses suite à mon expérience dans le domaine, je peux toujours me tromper mais j’ai quand même l’impression que c’est l’approche recommandée et qui paraître être en corrélation à la sémantique HTML.

Salut, bon je continue mes investigations du coté des parrains de l’accessibilité et je reviens poster une réponse.
@ bientot

Un petit Mémento pour le HTML 5 de Rodolphe Rimelé aux édition Eyrolles (j’ai aucunes actions) très clair peut fortement aider …
La balise body intègre toute la page visible, utilisée une seule fois pour chaque page.
Le h1, h2, etc … : hiérarchie de titres pouvant être utilisée pour chacune des sections de la page.
Les balises s’écrivent en minuscule.
Pour la balise aside , j’utiliserais h2 pour le titre, mais on peut utilisé h1, et c’est le css qui définira les styles pour les différents h1. Il n’y a pas obligation d’utiliser h1 pour chaque section de la page. (section : élément générique)
Normalement la balise <hgroup> est utilisée en html 5

2 J'aimes

Oui j’en suis arrivé a la même solution @mathalan.
Pour le hgroup c’est obsolète.
Enjoy

Pour le hgroup, c’est possible qu’il soit obsolète … Mais pour la vérification de ceci, il nous faut absolument que les navigateurs soit complètement HTML 5, ce qui n’est pas encore le cas et c’est une des raisons de l’utilisation actuellement de jQuery UI entre autre pour palier à certains manques. Ce n’est que le 28 Octobre 2014 que la partie implémentation faite par le W3C a été terminé. Et donc ces méthodes d’implémentations permettront d’y voir plus clair.

Effectivement il y deux approches à ton problème:

  1. HTML5 puriste: à chaque fois que tu démarres un nouveau bloc (section, article, aside, …) tu démarres une nouvelle numérotation
  2. HTML5 pragmatique: tu t’en tiens à une numérotation qui a un sens pour l’ensemble de ton document, à partir du plus haut niveau

On ne peut que constater que la première approche comporte de nombreux inconvénients, bien qu’elle soit séduisante intellectuellement parlant. Je peux citer:

  • Les problèmes d’accessibilité: de nombreux lecteurs d’écran (qui sont des appareils forts chers qu’on ne change pas tous les jours) ne comprennent pas encore ce genre de numérotation.
  • Les problèmes de CSS: comme cela a déjà été dit dans une des réponses, il va problablement falloir styler différemment les hn en fonction de l’endroit où ils se trouvent. D’ou une multiplication des règles pour éviter un problème qu’on s’est créé tout seul.

Le W3C qui construit le HTML 5 a explicitement demandé à l’époque de ne pas encore faire des sites web en HTML 5 avant que les implémentations ne soient réalisées dans les navigateurs. On pourra voir plus tard ce que cela apportera. Cela n’enlève pas les autres apports, en attendant, bien entendu.


merci @jocelyn_lecomte pour les deux approches.

La réponse à cette question dépend aussi des objectifs. Est-ce un exercice de style ou un site en production ?

Dans le 2ème cas, il faut plutôt chercher l’efficacité du point du vue analyse de la page par un robot pour optimiser le classement de la page.

Dans ce cadre je dirais qu’il faut respecter, encore pour le moment, la hiérarchie des balises, 1 seule balise H1 pour le titre le plus important de la page, puis H2 pour les titres des articles… En tout cas c’est ce que j’appliquerais.

C’est effectivement la conclusion qui a été donnée a mon problème pour le moment @gilles_klein
Merci pour ta participation.

Human Coders - Le centre de formation recommandé par les développeur·se·s pour les développeur·se·s