5568 sujets

Sémantique web et HTML

Section, Aside etc. remplacent les div?

Bonsoir,

n'étant pas super savant en HTML et CSS, je reste souvent bloqué sur des sujets qui semblent simples.

Aujourd'hui, je n'intéresse à la structure des documents HTML. Au début c'était simple, je ne m'occupais que d'HTML4 et j'utilisais des <div> et des classes pour la mise en forme, en particulier pour ma grille de mise en page (12 colonnes, 960pixels).

Mais j'ai décidé de me plonger dans HTML5 et du coup je suis perplexe.
J'ai lu quelques documents, dont celui-ci
https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
ou encore ce flowchart
http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

Si j'ai bien compris, il est conseillé de se passer des <div> à chaque fois que c'est possible?
Quid de la mise en page (ma grille de 960 pixels): vaut-il mieux continuer à utiliser des <div> pour mes 12 colonnes de largeur différentes?

J'ai bien lu cet article
http://html5doctor.com/you-can-still-use-div/
mais cela reste confus pour moi.

Merci pour vos éclaircissements
Laurent
Salut,

L'essentiel est de savoir que l'élément div est un élément neutre du point de vue de la sémantique. Si, dans ta page HTML 5, tu dois grouper des éléments dans un bloc qui, d'un point de vue sémantique, ne correspond à aucun des nouveaux éléments HTML 5, alors div reste encore ton ami. Autrement dit, des éléments HTML 5 comme article, section, header ou footer véhiculent du sens (un article, une section de document Web, un en-tête de tout ou partie de document Web, un pied de page ou d'une partie de document Web).

Bref, c'est la sémantique qui dicte le choix de tel ou tel élément, y compris pour les colonnes de ta grille de 960 pixels.
Bonsoir Victor,

merci pour cette réponse rapide.
J'avais grosso modo compris cette partie.
Ce que je ne comprends pas vraiment, c'est comment définir ce qui a un sens et ce qui n'en a pas?
Qu'est-ce qui n'entre pas dans <body> , <section> , <article> , <aside> , <footer> , <header> , <nav>?

A part pour un wrapper, je ne vois plus en quoi le <div> peut servir.

Si nous prenons comme exemple la page sur laquelle nous sommes en ce moment (note: je n'ai pas encore vérifié le code source d'Alsacréations), qu'est-ce qui serait plus approprié sans une balise <div> en lieu et place des balise citées plus haut?
Modifié par Kyotololo (01 Apr 2012 - 16:54)
Si on s'amuse à refaire la découpe du forum ça risque un peu de prendre trois plombes.

De manière générale:
- Tu as un besoin de mise en page? DIV.
- Tu as un contenu que tu identifies comme correspondant à la définition d'un élément sémantique HTML5 tel que SECTION, ARTICLE, HEADER, FOOTER, HGROUP ou ASIDE? Utilise l'élément en question.

Tu peux aussi doubler des éléments sémantiques par des DIV si tes besoins de mise en page sont complexes ou si tu veux appliquer tes styles sur des DIV notamment pour contourner les limites d'IE 7-8 sans passer par un script JS. Il n'y a pas de règle qui t'oblige à écrire un code HTML minimaliste, et il n'y a pas non plus de règle qui t'oblige à utiliser des éléments HTML5 tels que SECTION alors que ces derniers sont aux dernières nouvelles ignorés par la totalité des User Agents (navigateurs, moteurs de recherche, etc.). Smiley cligne
fvsch a écrit :
Si on s'amuse à refaire la découpe du forum ça risque un peu de prendre trois plombes.

De manière générale:
- Tu as un besoin de mise en page? DIV.
- Tu as un contenu que tu identifies comme correspondant à la définition d'un élément sémantique HTML5 tel que SECTION, ARTICLE, HEADER, FOOTER, HGROUP ou ASIDE? Utilise l'élément en question.


Donc, finalement, on utilise une DIV que lorsqu'il n'y a que du vide? Je ne vois pas trop quel contenu ne rentrerait pas dans l'une des autres balises.

fvsch a écrit :
Tu peux aussi doubler des éléments sémantiques par des DIV si tes besoins de mise en page sont complexes ou si tu veux appliquer tes styles sur des DIV notamment pour contourner les limites d'IE 7-8 sans passer par un script JS. Il n'y a pas de règle qui t'oblige à écrire un code HTML minimaliste, et il n'y a pas non plus de règle qui t'oblige à utiliser des éléments HTML5 tels que SECTION alors que ces derniers sont aux dernières nouvelles ignorés par la totalité des User Agents (navigateurs, moteurs de recherche, etc.). Smiley cligne


Alors, dans le cas d'une class définissant hauteur/largeur d'un élément, que recommanderais-tu de faire:

a) appliquer la class sur l'élément DIV, et mettre SECTION, ARTiCLE etc... dans la DIV?

ou

b) appliquer directement la class sur l'élément SECTION, ASIDE, HEADER etc...?
Higure a écrit :
Donc, finalement, on utilise une DIV que lorsqu'il n'y a que du vide?

Non.

Higure a écrit :
Je ne vois pas trop quel contenu ne rentrerait pas dans l'une des autres balises.

Tout plein. Surtout sur une page qui a un contenu riche ou complexe.

Higure a écrit :
Alors, dans le cas d'une class définissant hauteur/largeur d'un élément, que recommanderais-tu de faire:
a) appliquer la class sur l'élément DIV, et mettre SECTION, ARTiCLE etc... dans la DIV?
ou
b) appliquer directement la class sur l'élément SECTION, ASIDE, HEADER etc...?

Si tu as déjà un conteneur, autant l'utiliser sans rajouter de DIV autour. Du moins si tu veux écrire un code HTML un peu minimaliste. Mais dans certains cas de figure on pourra rajouter un DIV si jamais on n'a pas un contrôle complet du code HTML à mettre dedans (si on développe un module pour un CMS par exemple).

En passant, définir la hauteur d'un élément c'est le mal. Smiley langue
Modérateur
fvsch a écrit :

Tout plein. Surtout sur une page qui a un contenu riche ou complexe.

En même temps, j'ai l'impression que une page codée à la main proprement, pourrait voir le nombre de div diminuer grandement à l'avenir, pour n’être plus présent que ponctuellement. Les problèmes de compatibilité empêchent pour l'instant de penser de la sorte, mais cela pourrait venir. Bien entendu, un CMS qui a tendance à "diver" beaucoup pour prendre en compte plein de cas et laisser plein de possibilité aux graphistes garderait beaucoup de divs.

Affaire à suivre ^^.

a écrit :
En passant, définir la hauteur d'un élément c'est le mal.

C'est comme croiser les flux?
Sujet clos
Aller à