[Résolu] Organisation de l'HTML5/CSS entre DIV et nouvelles balises de

Bonjour,

Je souhaiterais avoir quelques précisions ou peut-être connaitre la façon dont vous gérez l'écriture de votre code HTML.

Ma question porte sur l'écriture de l'HTML 5 et principalement sur ses nouvelles balises de section qui offre une valeur sémantique claire :
Abandonnez-vous les balises <div> au profit de ces nouvelles balises?

Pour bien cerner ma question, je m'explique.

Prenons le cas d'une portion de texte dans une page. Ce texte cible bien le thème de cette page, on lui attribue une balise <section>. Sémantiquement, on est bon. Ensuite pour mettre en forme côté CSS, voici 3 écritures qui me paraissent possibles (et ce qui me dérange est de ne pas savoir laquelle est la meilleure, j'utilise les 3):

1.

<div class="ma-section"> 
<section>

2.

<section>
<div class="ma-section"> 

3.

<section class="ma-section">

Tout me parait bon. Le flux n'est pas modifié, la sémantique est bonne. En aucun cas il est stipulé qu'on doit privilégier la mise en forme sur la <div> d'une balise de section (1.) plutôt que sur la balise elle même (3.).

Donc je n'ai peut-être pas encore été confronté à un problème me permettant de trouver la réponse. Pour moi les 3 cas sont parfaitements clairs et corrects (et ce, même avec l'utilisation de JS en remplaçant les class par des id suivant mes besoins).

Merci pour vos remarques, conseils, justifications ou méthodes de travail sur ce petit "problème".

Remarque: ma question porte sur l'écriture d'un code HTML5 et CSS, sans framework CSS, sans templates)
Modifié par Fabustis (12 Oct 2013 - 21:10)

je vois rapidement qu'une raisons de doubler un conteneur avec un div et une balise HTML5 et c'est pour les vieux navigateurs qui ne reconnaissent pas ces nouvelles balises sans JavaScript et un display:block. En tout cas , je n'y vois que des raisons de style.

Salut,

Pour ma part, j'opte pour la troisième écriture.

Quant au problème avec les anciennes versions de navigateur (en l'occurrence les versions d'IE antérieures à la 9), il suffit juste d'ajouter un fichier JavaScript (appelé via un commentaire conditionnel ciblant IE 8 et versions antérieures) qui crée les nouveaux éléments HTML 5 dans le DOM. Soit tu le fais manuellement, comme suit :

document.createElement ('section');
// Code à répéter pour tous les autres nouveaux éléments HTML 5

soit tu utilises un script tout prêt comme html5shiv.
Modifié par Victor BRITO (12 Oct 2013 - 22:39)

@gc-nomade: j'utilise déjà html5shiv pour la rétro compatibilité.

@Victor BRITO: en fait mon problème n'en est pas un pour de nouveaux projets où je fais l'intégration en html5. Mais en ce moment, je souhaitais passer un des sites en html4 vers html5. Donc au lieux de supprimer les <div class=".."> partout, j'ai simplement rajouté les balises HTML5 dans ces DIV, afin de ne pas perdre trop de temps et avoir une sémantique appropriée. Et justement la 3e écriture me permettrait aussi d'arriver au même résultat et de réduire le code html (suppression d'un grand nombre de DIV), c'est à ce moment que je me suis demandé si je fais "bien" le boulot.

Apparemment mon problème ne vous choque pas vraiment. Donc si ce n'est qu'un léger souci d'optimisation ça devrait aller, je pense.

Fabustis a écrit :
@gc-nomade: j'utilise déjà html5shiv pour la rétro compatibilité.

je n'ai pas dit le contraire

gc-nomade a écrit :
je vois rapidement qu'une raisons de doubler un conteneur avec un div et une balise HTML5 et c'est pour les vieux navigateurs qui ne reconnaissent pas ces nouvelles balises sans JavaScript et un display:block. En tout cas , je n'y vois que des raisons de style.

Bonne continuation ,
Cdt

Merci pour vos remarques.

@gc-nomade: oui j'avais bien compris, c'est effectivement une bonne raison d'avoir le div+balise html5. Ca permet de palier au problème du JavaScript désactivé chez le client. A force d'utiliser le script html5shiv, je ne fais plus attention à cet argument et c'est bien que tu le rappelles, JS n'est pas forcément activé.

Fabustis a écrit :
@Victor BRITO: en fait mon problème n'en est pas un pour de nouveaux projets où je fais l'intégration en html5. Mais en ce moment, je souhaitais passer un des sites en html4 vers html5.

En même temps, quand on procède à une refonte, on casse généralement la baraque.