Qu’est-ce que l’HTML5? Comme la plupart des programmes, OS et autre, l’HTML est amené à évoluer au cours du temps pour continuer à satisfaire les besoins des programmeurs. L’HTML5 est donc la prochaine version de l’HTML, mais pas seulement. En réalité, sous la dénomination d’HTML5 se cache les évolutions de l’HTML, la CSS3 (future version de la CSS) et de nombreuses API javascript en plus. Dans cet article, je vais vous présenter les nouvelles balises sémantiques que l’HTML5 va ajouter.

Sémantique, késako?

La sémantique, c’est ce qui permet à l’ordinateur de mieux comprendre à quoi correspond le contenu des balises. Par exemple, si vous utilisez <h1>, l’ordinateur va comprendre que le contenu de la balise est un titre très important, alors que si vous utilisez <div id=”titre”>, l’ordinateur ne saura pas à quoi correspond le contenu de la balise. Mais l’ordinateur n’a pas besoin de comprendre vu qu’on utilise la CSS pour lui indiquer comment afficher les éléments de la page, me direz-vous. La réponse est assez simple : pour un utilisateur lambda cela ne changera rien, mais il n’y a pas que des utilisateurs lambda sur votre site. En effet, il existe aussi les moteur de recherche pour qui la sémantique est très importante, mais aussi toutes les personnes qui sont obligés d’utiliser un lecteur d’écran ou un navigateur en mode texte. Dans tous ces cas, la sémantique est extrêmement importante étant donné qu’elle permettre au visiteur de mieux comprendre le contenu du site.

Les nouvelles balises sémantiques

Comme vous pouvez le devinez, l’HTML5 rajoute de nombreuses balises sémantique car leur utilité se fait de plus en plus ressentir. Voici la liste des nouvelles balises sémantiques. Pour la plupart, vous comprendrez leur utilisé avec leur noms :

  • <section> vous permettra de définir une section/partie de votre page. La plupart des autres balises sémantiques jouent leur rôle dans la section qui les contient.
  • <article> vous permettra de définir un article/post/commentaire ou tout autre contenu important de la page.
  • <aside> vous permettra de définir un texte qui se rapporte au sujet de la page/section, mais qui ne fait pas partie du contenu en lui-même. Par exemple, si vous parlez de l’évolution des pingouins albinos en antarctique, vous pourrez mettre un <aside> pour donner quelques informations sur ce qu’est la maladie albinos.
  • <header> vous permettra de définir le header de votre page/section. Par exemple, vous pouvez l’utiliser pour indiquer la date, l’auteur et d’autres information sur l’<article> dans lequel vous vous trouvez.
  • <hgroup> est un élément qui rassemble les <h1> à <h6>. Vous pourrez par exemple l’utiliser pour votre sommaire.
  • <footer> défini le footer de votre page/article.
  • <nav> est à utiliser pour la plupart des listes de lien interne à votre site.
  • <figure> défini une image accompagné de sa légende.
  • <figcaption> défini la légende de l’image à l’intérieur de <figure>.

Maintenant que vous connaissez toutes ces balises, vous devriez être capable de faire un site qui respecte la sémantique.

Et pour les vieux navigateurs?

La question des vieux navigateurs est assez importante. En effet, comment les “vieux” navigateurs vont-il réagir face à ces nouvelles balises inconnus? En fait, seul IE posera problème (comme c’est étonnant…), mais il existe heureusement un solution simple pour palier à ce problème.

En effet, il suffit de créer les balises en javascript pour pouvoir les utiliser après dans votre HTML. Un simple document.createElement(‘header’); vous autorisera à utiliser la balise <header> dans votre HTML et à utiliser la CSS dessus. Il est donc possible dès maintenant d’utiliser les balises d’HTML5 dans votre site sans risquer de gros problèmes!

A lire également :

    Aucun résultat

2 commentaires

  • Philippe @ HTML5 Débloque-notes (1 comments), le 11 décembre 2010

    Non : HTML5 et les CSS3 sont 2 choses sans rapports.

  • Renaud M.G. (1 comments), le 22 février 2013

    C’est souvent difficile à faire accepter aux clients, mais j’ai pris le parti de ne plus faire de développements aussi lourds que ça rien que pour IE ! Si tu veux aller sur l’autoroute tu ne prends pas une voiture à chevaux

Poster un commentaire

Subscribe without commenting