Ceci est un petit site Internet d'entraînement et de démonstration réalisé durant mes études à la fin de l'année 2021 (de septembre à décembre). D'abord, il avait pour but principal de m'entraîner sur les bonnes pratiques de l'utilisation des balises sémantiques en HTML 5. Ensuite, grâce à une structure HTML sémantiquement forte, je devais m'exercer à l'application de la plupart des règles CSS présentes depuis la sortie de CSS 3. Pour terminer, la consigne de cet exercice était de ne pas utiliser une quelconque ligne de JavaScript pour réaliser des actions ou des animations donc vous pouvez exécuter ce site même avec le moteur JavaScript désactivé !
Même si cet entraînement ne pouvait s'appliquer qu'à moi-même, j'espère que certains pourront s'en inspirer pour aider à mieux comprendre l'intérêt des bonnes pratiques. Depuis quelques années, je vois que trop souvent une utilisation abusive des balises dites « génériques » et largement employées avec HTML 4, comme les <div> ou les <span> sous prétexte de l'effort nécessaire pour certaines balises sémantiques d'appliquer des règles de réinitialisation afin d'améliorer la facilité de personnalisation, mais également du désintérêt flagrant des algorithmes utilisés par les moteurs de recherche pour classer les sites Internet (le fameux SEO). Malgré tous ces arguments que je peux comprendre totalement, je pense qu'il est d'autant plus nécessaire d'améliorer l'utilisation des balises sémantiques afin de faire changer les choses.
De mon point de vue, l'effort investi pour l'utilisation des balises sémantiques permet d'améliorer la maintenabilité d'un site Internet sur le long terme pour l'ensemble des développeurs qui seront amenés à travailler dessus, il est difficile pour quelqu'un de dire ce qu'un imbriquement de balises div peut bien servir dans une structure HTML 5 sans regarder les classes CSS associées à cette balise pour comprendre davantage (sauf si TailwindCSS est utilisé et là vous aurez encore moins de chance de comprendre). Si HTML 5 est sortie avec un tas de nouvelles balises c'était exactement pour palier à ce genre de problèmes, surtout à une époque où les sites Internet tendent à devenir de plus en plus complexes et importants. Un autre point en faveur des balises sémantiques est qu'elles sont accessibles par défaut. En effet, si vous utilisez un div pour créer un formulaire (form) ou un bouton (button), vous devriez appliquer les attributs ARIA nécessaires et tout un tas d'autres mécanismes afin de permettre aux utilisateurs malvoyants équipés d'un lecteur d'écran de pouvoir naviguer aisément sur votre Internet. Pour certains, le dernier argument sera balayé d'un revers de la main car le nombre d'utilisateurs spécifiques à cette catégorie est insignifiant (voir inexistant) sur un site à faible trafic, néanmoins dans le cas où vous n'êtes pas une grosse entreprise qui possède une équipe de développement assez importante pour vous permettre de garder des balises sans aucune sémantique tout en assurant un support parfait des balises d'accessibilité, je vous conseille de penser différemment.
En résumé, les balises sémantiques ne sont, ni une perte de temps, ni une régression sur votre code mais plutôt une manière de travailler plus intelligemment, plus efficacement et de rendre votre site plus inclusif à tous vos utilisateurs.
This is a small training and exhibition website created during my studies at the end of 2021 (from september to december). First, its main purpose was to teach me about best practices for using semantic tags in HTML 5. Then, using a semantically strong HTML structure, I had to learn how to apply most of the CSS rules available since the release of CSS 3. To conclude, I was instructed to not use a single line of JavaScript to perform any actions or animations, so you can run this site even with the JavaScript engine disabled!
Even though this exercise could only be applied to myself, I hope that others can learn from it to help them better understand the benefits of good practice. For several years now, I've noticed far too much abusive usage of the well-known "generic" tags widely used with HTML 4, such as <div> or <span>, due to the effort required for some semantic tags to apply reset rules in order to improve easiness of customization, but also to obvious disinterest concerning the algorithms used by search engines to rate websites (the famous SEO). Even with all these arguments, which I can totally understand, I think it's absolutely essential to improve our usage of semantic tags in order to change things.
From what I see, spending so much effort using semantic tags will improve long-term maintainability of a website for all developers working on it. It's hard for anyone to tell what a nest of div tags can do in an HTML 5 structure without looking at its associated CSS classes to understand more (unless TailwindCSS is used, and then you're even less likely to understand). The fact that HTML 5 came out with a bunch of new tags was exactly to address this issue, particularly in a time when websites become increasingly complex and massive. Another point in favor of semantic tags is that they are accessible by default. In fact, if you use a div to create a form (form) or a button (button), you should apply any appropriate ARIA attributes and a whole series of other features to enable partially-sighted users using a screen reader to browse your website with relative freedom. For some people, the latter argument will be rejected completely out of hand, because the number of users targeted to this category is tiny (or even non-existent) on a low-traffic website. However, if you're not a big company with a strong development team who can keep things semantic-free while ensuring perfect support for accessibility tags, I'd advise you to adopt a different approach.
In summary, semantic tags are neither a waste of time nor a regression on your code, but rather a way of working more smartly, more efficiently and making your website more inclusive to all your visitors.
