Utilisation des balises sémantiques HTML5

Bonjour,
je suis entrain de refaire et repenser un site ecommerce.
d'apres mes lectures, j'ai constaté que l'utilisation des balises semantiques est recommandee. mais c'est un peu le flou total quant a leur utilisation!

j'ai bien compris que <header> et <footer> sont les header et footer comme indiqué par leurs nom, mais j'ai vu certains examples qui reprennent ces 2 balises a l'interieur de <section>. Bref, plus je lis, plus je me perd!!

1- dans quel cas reprendre <header> et <footer> dans <section> ?
2- j'ai aussi vu des <section> imbriqués, dans quels cas faire ainsi ?
3- dans quel cas utilisé <aside>, et <article> ?
4- est ce que <nav> doit etre a l'interieur de <header> ?

Merci pour votre aide!

Bonjour,

Citation:

---

Bref, plus je lis, plus je me perd!!

---

je pense que le mieux pour commencer et de lire les "spécifications".

• http://www.w3.org/html/wg/drafts/htm.../Overview.html
• http://developers.whatwg.org/

Bonsoir, et merci d'avoir repondu!

j'avais deja vu ces 2 liens, mais il en repondent pas a mes questions...

deja, est ce recommandé d'utiliser les balises semantiques html5 ??

Citation:

---

deja, est ce recommandé d'utiliser les balises semantiques html5 ??

---

je n'ai pas d'arguments à t'opposer pour la non utilisation des nouvelles balises HTML5 donc je dirais OUI avec les précautions d'usage concernant les navigateurs anciens.

J'ai vu dans certains examples qu'ils mettent le nom du site dans une balise H1 a l'interieur du <header>, que faut il faire dans le cas ou on a juste un logo??

Citation:

---

(...)que faut il faire dans le cas ou on a juste un logo??

---

il te suffit de mettre ton logo point

Code:

---

1 2 3

<header> <img src="http://www.developpez.net/template/images/logo.png" alt="logo developpez.net"> </header>

---

un peu léger mais correct!

OK merci. mais il me semblait avoir lu qu'il faut toujours mettre des headings a l'interieur des sections. plus precisement H1 dans le <header> et H2 dans les autres...

c'est pour cela que je suis tres confus!

Bonjour,

Les balises HTML <header> , <footer>, <section>, <nav>, etc... servent à donner une valeur sémantique au contenu. Avant ces nouvelles balises les développeur fabriquer le design à l'aide de plusieurs div, il représentai un élément de structure "à tout faire". Cependant cette neutralité est un inconvénient majeure notamment pour les agents utilisateur (robot), il pouvait difficilement savoir qu'un élément <div> contenant les principaux liens de navigations du site représente un menu ou autre...

Citation:

---

1- dans quel cas reprendre <header> et <footer> dans <section> ?
2- j'ai aussi vu des <section> imbriqués, dans quels cas faire ainsi ?
3- dans quel cas utilisé <aside>, et <article> ?
4- est ce que <nav> doit etre a l'interieur de <header> ?

---

Avant votre site étais fabriquer de <div>, si un div représente le menu ce dernier sera remplacé par <nav>. Il n'y a pas de règle spécifique qui dis qu'un <nav> doit être contenu forcément dans un <header> ou une <section> ou ... Lorsque je dis qu'il n'y a aucune règle je ne compte pas celle du bon sens ...

Une <section> regroupe un contenu relatif à une même thématique (il peut être composé <header>, <article>,<h1>,.... ). La balise <section> peut également être contenu dans un article, en ce sens cela correspondra à une division thématique dans un même article.

Un <article> est généralement une spécialisation de <section>, il est généralement vu comme une portion de document qui ce suffit à elle-même. Effectivement l'article lui même à un sens sans les sources qui l'entoure. Aucune règle n'interdit qui soit lui même composé d'un <header>, <footer>, et même d'une <section> le découpant en plusieurs partie.

Le <header> correspond à l'en-tête il peut donc être présent plusieurs fois sur une même page (voir précédents exemple). Cependant par ça nature un <footer> ne doit pas comporté de <header> comme un <header> ne peut pas comporté un autre <header>. Cette logique se passe d'exemple...

Le <nav> est souvent dans le <header> mais cela n'ai en rien une obligation, c'est à vous de savoir si votre menu est présent dans l'en-tête de votre page. La balise <nav> peut également se retrouver dans un <footer>.

Le <aside> abrite un contenu dont les informations ne sont pas essentielles à la compréhension du contenu principal.

Le <div> doit être utiliser en dernier recours si aucune autre balise sémantique de contenu n'est possible.

genial! merci booMan pour ta reponse bien detaillee...

concernant <aside> j'avais lu que cette balise devrait contenir du contenu ou liens qui ne sont pas tres important (pub ou bannieres)... le confirmes tu?
dans mon cas, j'aurais besoin de 2 colonnes, toutes les 2 importantes. faut il faire 2 <section> en float: left; ?

@redah75:

Peut-être que le Dico HTML5 (en prépa pour Developpez) peut vous aider :)

Citation:

---

concernant <aside> j'avais lu que cette balise devrait contenir du contenu ou liens qui ne sont pas tres important (pub ou bannieres)... le confirmes tu?

---

Oui cela reviens à dire que son contenu n'ai pas essentiel à la compréhension de la page principal.

Citation:

---

dans mon cas, j'aurais besoin de 2 colonnes, toutes les 2 importantes. faut il faire 2 <section> en float: left; ?

---

Difficile à dire sans aucune informations sur leur buts, leurs contenus, ... D'autant plus que la propriété CSS n'a aucun rapport direct avec la valeur sémantique de la balise. Vous organisez les éléments de votre page comme bon vous semble. Le Dico HTML5 que vous propose Muchos vous sera surement utile, prenez le temps de le lire.

Citation:

---

Envoyé par redah75

l'utilisation des balises semantiques est recommandee

---

En même temps, toutes les balises HTML sont sémantiques... :roll:

Il semble que tu confondes les nouvelles balises ajoutées dans HTML5 et la nature sémantique de HTML. Mais tu peux très bien créer un site en utilisant exclusivement des balises qui existaient avant HTML5. La seule chose qu'il faut éviter, c'est d'utiliser des balises en fonction de leur apparence dans le navigateur et non en fonction de leur sens. L'apparence devant relever uniquement de CSS.

OK, merci a vous tous pour votre contribution. Je vais lire le dico HTML5...

@ bientot

j'ai oublié de vous demander ce que vous pensez de la balise <main>, ils en parlent dans certains tutos, et dans d'autres elle est tout simplement inexistante !

Merci

On n'a rien à en penser ^^
L'élément MAIN représente le contenu principal (main content) d'une document ou d'une application web. Il est unique. Remarquez que ce n'est pas un élément de section (comme ARTICLE, SECTION, etc).

C'est un moyen simple de dire aux moteurs ou aux lecteurs d'écran, où se trouve l'essentiel d'une page. Personnellement, ça m'a beaucoup aidé pour les CSS d'impression :*tout ce qui est hors de MAIN est supprimé :)

merci pour la reponse tres rapide :)

au fait, je voulais savoir s'il faut utiliser cette balise vu que dans plein d'exemple, elle n'est jamais presente!!

Je ne pense pas qu'il faille se dire «Est-ce que je dois mettre cette balise?» (en craignant je ne sais quelle punition) mais «Qu'est-ce que ça apporterait à mon contenu?», en termes de sens ou de facilité à maintenir par exemple.
Pour chaque élément, on peut se demander quelle balise est la plus pertinente; balise que l'on peut rendre plus précise encore en utilisant des classes appropriées.

Quant à l'absence de MAIN, c'est peut-être parce que son usage est rare. C'est le cas pour d'autres balises (Qui utilise WBR? :mrgreen:), voire des usages (on peut intégrer beaucoup plus que des images avec FIGURE !)

OK, merci ;)