Dans le dernier article, nous avons examiné un certain nombre de nouveaux éléments introduits dans HTML5 et comment les implémenter correctement. Dans cet article, nous discuterons à nouveau d'un ensemble de nouveaux éléments, mais cette fois-ci, nous n'examinerons que les éléments HTML5 qui représentent un changement sémantique important dans la structure de vos sites. Cet article expliquera comment utiliser chacun de ces nouveaux éléments de manière à apporter un soulagement indispensable au div-itus qui afflige la structure de tant de sites aujourd'hui.

Sémantique?

Avant de commencer, vous devez savoir que, par sémantique, je me réfère simplement à l’utilisation des balises et des éléments HTML de la manière dont ils ont été conçus. Contrairement aux langages de programmation, qui doivent être compilés pour s'exécuter, HTML ne nécessite aucun compilateur (le navigateur tente toute interprétation) et vous donne donc une grande liberté pour utiliser un élément donné comme vous le souhaitez. Cependant, si vous êtes un nouveau concepteur de sites Web, vous constaterez probablement que beaucoup de gens sont des fanatiques sémantiques, et peut-être à juste titre. Utiliser des tables où ils n'appartiennent pas ou les jeter

balises chaque fois que vous voulez mettre en gras quelque chose pourrait être pratique, mais cela rend le code incroyablement compliqué et difficile à lire. Par conséquent, nous nous tournons vers des pratiques HTML sémantiques, inter-navigateurs et valides pour apporter de l’unité et de la cohérence aux sites du Web. La plupart des éléments HTML5 que nous examinerons seront assez faciles à interpréter simplement en lisant le nom, mais il est absolument essentiel de vous familiariser avec la bonne façon de mettre en œuvre ces éléments si vous souhaitez créer des sites de qualité professionnelle fonctionnant en nombre. des principaux navigateurs.

Le problème

Jetez un coup d'œil à 100 sites Web différents avec des dispositions presque identiques et vous trouverez 100 structures différentes et conventions de dénomination dans le code HTML sous-jacent. Même si tout bon développeur Web nommera son

s de manière à ce qu’ils soient faciles à comprendre, les vastes possibilités peuvent entraîner une confusion quant à l’identification de sections de code relativement simples et uniformes. Pour cette raison, HTML5 nous fournit un certain nombre d’éléments qui peuvent être utilisés pour identifier et cibler les éléments qui apparaissent dans presque tous les sites Web, tels que les en-têtes, les pieds de page et les menus de navigation. En outre, mis à part des conventions de dénomination incohérentes, la façon de procéder actuelle peut rapidement conduire à des structures de div qui ont beaucoup de poids supplémentaire par rapport aux éléments HTML simples et intégrés. Pour illustrer notre propos, examinons une structure simple que vous pourriez trouver en HTML4.

<p>Du texte</p> <p>Du texte</p>

Vous pouvez voir comment cette partie de code relativement simple est surchargée par des divs, dont le tri peut prendre beaucoup de temps en raison de tous les fluffs nécessaires. Le CSS à utiliser avec ce code HTML contiendrait les sélecteurs suivants:

#nav_bar {} #main_header {} .side_bar {} #container {} .section {} #header {} .section p {} .footer {} #main_footer

Bien que pas aussi compliqué que le HTML avant, ce code n'est pas aussi simple qu'il pourrait l'être. Explorons maintenant comment HTML5 nous aide à résoudre ce problème.

La solution

HTML5 nous permet de prendre presque toutes les div personnalisées ci-dessus et de les convertir en éléments standard. Regardons le code nécessaire pour accomplir la même chose en HTML5.

<p>Du texte</p> <p>Du texte</p>

Et le CSS correspondant:

nav {} header {} apartement {} section {} footer {} section p {} #container {} #container header {} #container footer {}

Il y a beaucoup à discuter à propos de ces exemples, commençons par le HTML. Notez que le div-itus chronique a disparu et qu’il est universellement compris et facile à interpréter. Cela améliore considérablement la lisibilité du code. Lorsque je lis le code de quelqu'un d'autre, l'un de mes bêtes noires traque celui qui correspond correctement

et

Mots clés. Cela peut prendre un temps ridicule s’il existe huit ou dix balises div fermantes non étiquetées. L’utilisation d’éléments standard contribue à éliminer ce problème, car la balise de fermeture est plus informative (il est plus facile de la trouver).

que de localiser un hasard

qui appartient à

).

Le CSS a également été simplifié. Nous pouvons maintenant simplement utiliser des identifiants sans balises de hachage ni points dans la plupart des cas, car nous nous référons à des éléments pris en charge de manière native au lieu de divs portant un nom unique. Notez que, dans notre code HTML, nous avons pu cette fois utiliser la même balise pour tous les éléments d’en-tête et de pied de page (nous avons jeté la classification "principale"). En effet, si nous voulons styler les en-têtes du conteneur différemment des autres, nous pouvons simplement utiliser? #Container header? pour ne cibler que les éléments d’en-tête dans le conteneur div (et nous pouvons être sûrs qu’il héritera correctement des traits que nous voulons conserver). Maintenant que nous avons eu un aperçu des nouveaux éléments structurels, voyons comment les utiliser individuellement.

le

Élément

Vous pourriez initialement supposer que l'élément d'en-tête fait référence à l'en-tête principal de la page. Cependant, il ne s'agit en réalité que d'un élément générique pouvant être utilisé plusieurs fois dans votre code. Voici un exemple:

<h2>Tutoriels HTML5</h2> <p>Entièrement gratuit formation HTML5</p> <ul> <li>Un</li> <li>Deux</li> <li>Trois</li> </ul> <h2>Tutoriels CSS3</h2> <p>Entièrement libre formation CSS3</p> <ul> <li>Un</li> <li>Deux</li> <li>Trois</li> </ul>

Encore une fois, nous avons remplacé ce qui aurait normalement été un groupe de divs par des balises d'en-tête plus simples. Il est important de noter que, comme nous pouvons avoir plusieurs balises d’en-tête dans un seul fichier HTML, vous ne devez pas penser à l’en-tête comme élément de remplacement.

, qui représente une division unique n'apparaissant qu'une fois, mais plutôt pour

, qui représente un élément qui apparaît plusieurs fois.C'est une distinction importante pour des raisons sémantiques ainsi que pour le style CSS et s'applique à plusieurs des éléments dont nous allons parler.

le

Élément

La plupart des choses que je viens d'expliquer à propos de l'élément header s'appliquent également à l'élément footer, ce qui signifie qu'il est générique et qu'il peut être placé plusieurs fois dans votre code. Évidemment, les pieds de page vont généralement (bien que pas toujours) à la fin d’une section de code et contiennent des informations de nature secondaire telles que la date de publication, l’auteur, les informations de copyright, etc. vous. Voici un exemple rapide qui s'appuie sur ce que nous avons vu avec l'élément header:

<h2>Tutoriels HTML5</h2> <p>Entièrement gratuit formation HTML5</p> <ul> <li>Un</li> <li>Deux</li> <li>Trois</li> </ul> 6 heures de tutoriels gratuits! <h2>Tutoriels CSS3</h2> <p>Entièrement libre formation CSS3</p> <ul> <li>Un</li> <li>Deux</li> <li>Trois</li> </ul> 4 heures de tutoriels!

le

Élément

L'élément section est un moyen générique de séparer des parties de votre site. Par exemple, disons qu'un site Web d'événement est divisé en "quoi", "quand", et "où". Vous pourriez utiliser

balises pour faire cette division dans votre code (encore une fois, pensez? classe? pas? id?). En utilisant notre exemple précédent, nous pourrions remplacer le? Tutslist? classe avec des éléments de section.

<h2>Tutoriels HTML5</h2> <p>Entièrement gratuit formation HTML5</p> <ul> <li>Un</li> <li>Deux</li> <li>Trois</li> </ul> 6 heures de tutoriels gratuits! <h2>Tutoriels CSS3</h2> <p>Entièrement libre formation CSS3</p> <ul> <li>Un</li> <li>Deux</li> <li>Trois</li> </ul> 4 heures de tutoriels!

Notez que les sections commencent souvent par un élément d’en-tête et se terminent par un élément de pied de page, bien que cela ne soit nullement une nécessité.

le

Élément

J'ai brièvement mentionné l'élément de l'article dans mon dernier post, en oubliant complètement que je l'enregistrais pour ce post. Cependant, un intervenant a astucieusement signalé certaines informations négatives que nous devrions corriger. Bien que w3schools déclare que l'élément article est strictement destiné au contenu externe, w3.org indique clairement que son objectif réel est d'identifier une section de votre site destinée à être distribuée de manière indépendante. Par exemple, un article de blog comme celui-ci peut être autonome et ne dépend pas du reste du contenu du site. En outre, nous souhaitons que ce site fasse l’objet de discussions et de liens vers ce site. Les reportages, les messages de forum et les tutoriels sont de bons exemples de ce type de contenu. Appliquons cela à notre exemple en cours d'exécution.

<h2>Tutoriels HTML5</h2> <p>Entièrement gratuit formation HTML5</p> <h3>Tutoriel HTML 1</h3> <p>Beaucoup de bonnes informations</p> <h3>Tutoriel HTML 2</h3> <p>Beaucoup de bonnes informations</p> 6 heures de tutoriels gratuits! <h2>Tutoriels CSS3</h2> <p>Entièrement libre formation CSS3</p> <h3>Tutoriel CSS 1</h3> <p>Beaucoup de bonnes informations</p> <h3>Tutoriel CSS 2</h3> <p>Beaucoup de bonnes informations</p> 4 heures de tutoriels!

Comme vous pouvez le constater, il s'agit en réalité d'un contenu interne pouvant être référencé en externe, et non l'inverse, comme semble le suggérer w3schools.

le

Élément

L'élément nav fait référence à des sections de votre code HTML contenant des liens à des fins de navigation, par exemple dans une barre latérale ou une bande de boutons en haut d'une page. Toutefois, cela ne s'applique pas à tous les groupes de liens de navigation de vos pages. Réservez plutôt cet élément aux principales sources de navigation sur votre site. w3.org donne l'exemple d'une série de liens dans un pied de page comme une situation qui ne mériterait pas un élément de navigation. Encore une fois, nous réviserons notre exemple pour inclure le nouvel élément.

Accueil À propos de HTML5 Tuts CSS3 Tuts Contact <h2>Tutoriels HTML5</h2> <p>Entièrement gratuit formation HTML5</p> <h3>Tutoriel HTML 1</h3> <p>Beaucoup de bonnes informations</p> <h3>Tutoriel HTML 2</h3> <p>Beaucoup de bonnes informations</p> 6 heures de tutoriels gratuits! <h2>Tutoriels CSS3</h2> <p>Entièrement libre formation CSS3</p> <h3>Tutoriel CSS 1</h3> <p>Beaucoup de bonnes informations</p> <h3>Tutoriel CSS 2</h3> <p>Beaucoup de bonnes informations</p> 4 heures de tutoriels!

le

Élément

Le dernier élément dont nous allons discuter est de côté. Cet élément est réservé au contenu lié à, mais distinctement, du reste du contenu de la page. L'élément apart peut être utilisé pour les guillemets, les publicités, les éléments de navigation, les barres latérales, etc. Par exemple, supposons que nous voulions prendre notre navigation à partir du dernier exemple et la placer dans une barre latérale:

<p>Informations générales</p> Accueil À propos de Contact <p>Tutoriels</p> HTML5 Tuts CSS3 Tuts <h2>Tutoriels HTML5</h2> <p>Entièrement gratuit formation HTML5</p> <h3>Tutoriel HTML 1</h3> <p>Beaucoup de bonnes informations</p> <h3>Tutoriel HTML 2</h3> <p>Beaucoup de bonnes informations</p> 6 heures de tutoriels gratuits! <h2>Tutoriels CSS3</h2> <p>Entièrement libre formation CSS3</p> <h3>Tutoriel CSS 1</h3> <p>Beaucoup de bonnes informations</p> <h3>Tutoriel CSS 2</h3> <p>Beaucoup de bonnes informations</p> 4 heures de tutoriels gratuits!

Regarde maman, pas de divs!

L'exemple ci-dessus illustre la quantité de code exceptionnellement élevée que HTML5 nous permet d'exécuter en utilisant uniquement des éléments standard! Chaque élément de cet exemple est très facile à cibler en CSS, est immédiatement compréhensible par tout développeur (au moins tout développeur connaissant HTML5) et incroyablement concis par rapport à la quantité de code que cela nécessiterait en HTML4. Et il n'y a pas une div en vue.

Conclusion

Cet article décrit brièvement le concept et l’importance du code sémantique et traite des principaux changements sémantiques apportés par HTML5. Nous avons découvert comment utiliser correctement six nouveaux éléments HTML5 extrêmement utiles: en-tête, pied de page, section, article, navigation et apart. Enfin, nous avons appris comment utiliser ces nouveaux éléments pour créer un code parfaitement structuré et lisible évitant l’utilisation excessive de div.

Pour éviter toute confusion (et pour éviter une série de commentaires furieux), je devrais préciser que les div ne sont absolument pas mauvais.Personnellement, j'utilise les divs assez librement sur tous les sites que je crée et les trouve parmi les éléments les plus flexibles et les plus essentiels du langage HTML. Cependant, plus vous pouvez remplacer des divs portant un nom unique par des éléments portant un nom universel, plus votre code deviendra fiable et conforme aux normes.

Regard sur l'avenir: trois en bas, un à faire!

Le prochain article sera la dernière de notre série sur HTML5. Comme vous le savez probablement à ce stade, rien de ce que je vous ai montré n'est prêt à être intégré à des sites Web pour une consultation grand public. Cependant, notre prochain article vous montrera différentes astuces pour commencer à utiliser HTML5 immédiatement et expliquera comment vous devriez préparer vos sites pour l'inévitable mise à jour!