Code

Pourquoi le marquage propre est-il pertinent dans la conception Web?

Étant donné que le Web est un organisme en évolution et en constante évolution, il est important de construire des sites capables de grandir avec lui et de parcourir facilement le courant au lieu de se noyer à l'approche d'une nouvelle vague.

Un balisage propre et la création de normes Web vous aident non seulement à faire cela, mais vous permettront également d’économiser du temps et de l’argent à long terme.

À mesure que le Web se développe, les technologies qu'il utilise évoluent avec lui. Bien que HTML existe depuis longtemps, il a acquis un certain nombre de partenaires.

Premier Javascript, puis CSS, XML et plus tard AJAX. L'adoption large de HTML 5 est imminente. Firefox, Safari, Opera et Chrome bénéficient déjà d'un support HTML 5 quasiment complet (Internet Explorer, le ralentisseur du bloc, est en retard).

Dans cet article, nous passerons en revue les bases des normes Web, leur nature, leur signification pour vous et quelques conseils importants pour vous aider à résoudre ce problème important et souvent négligé.

Qu'est-ce que cela signifie d'avoir un marquage «propre»?

En termes simples, cela signifie qu'il n'y a pas d'encombrement, de conformité aux normes et que les balises et les structures de chaque langue sont utilisées aux fins prévues.

Le HTML sans encombrement utilise peu les balises, élimine les éléments superflus et accomplit sa tâche avec le moins de balisage nécessaire . Il évite les attributs inutiles, tels que les CSS en ligne, et laisse chaque document structuré et organisé.

De même, les CSS sans encombrement devraient éviter de se répéter, profiter de héritage (rappelez-vous, CSS signifie Cascading Style Sheet) et réutilisez les classes chaque fois que possible.

Conformité aux normes signifie que vos pages valident avec les normes établies par le W3C pour HTML, CSS et XML. Cela signifie utiliser les validateurs gratuits du W3C pour vérifier les erreurs, les corriger et les tester à nouveau jusqu'à ce que vous soyez le plus près possible de 100% .

Pourquoi devrais-je m'en soucier? Ça marche, n'est-ce pas suffisant?

Chaque projet a une date limite agressive et chaque client veut que son site soit lancé hier. En tant que concepteurs et concepteurs de sites Web, nous sommes constamment contraints de travailler plus rapidement et plus efficacement.

Il est facile de tomber dans le piège de penser vite, cela signifie que les choses doivent être négligées , et ce balisage propre et conforme aux normes prend plus de temps. Il est facile de dire "ça marche et c'est tout ce qui compte".

Bien sûr, ça marche ... pour l'instant, pour vous. Qu'en est-il de l'année prochaine ou des trois prochaines années? Qu'en est-il des nouveaux navigateurs? Qu'en est-il de l'accessibilité?

Pensez-vous vraiment que les principaux moteurs de recherche se conformeront à des méthodes de codage spéciales et négligées? Ils sont délicats, et si vous n'êtes pas conforme aux normes, vous mettez votre recherche au pied levé .

Qu'en est-il de la prochaine sève pauvre qui doit éditer ces pages que vous avez créées? Que se passe-t-il si vous êtes frappé par un bus, arrêtez de faire de la randonnée en Alaska ou êtes enlevé par des extraterrestres? Quelqu'un d'autre doit reprendre là où vous vous êtes arrêté et il examinera votre code pour essayer de le comprendre. Est-ce que ça va être facile ou est-ce que ça va lui donner mal à la tête et lui faire maudire votre nom?

Faîtes-le bien la première fois. Ce n'est pas juste une leçon de vie ennuyeuse et paternelle. En fait, cela vous permettra d'économiser du temps et de l'argent et de rendre ceux qui vous suivent plus faciles.

Vous pensez peut-être qu'il est plus rapide de simplement insérer le CSS en ligne au lieu d'ajouter correctement une nouvelle classe à votre feuille de style. Et vous pouvez penser qu'il est plus rapide de lancer le HTML que vous pouvez cracher sans tenir compte de la structure globale du document.

Lorsque vient le temps de mettre à jour ce document ultérieurement ou de modifier l'intégralité du site, vous passerez beaucoup plus de temps à rattraper le temps perdu que vous ne l'avez jamais fait en le parcourant en premier lieu. Lorsque vous créez une nouvelle feuille de style, ces styles en ligne embêtants que vous avez rapidement ajoutés vous hanteront et vous passerez des heures à les chasser et à les éliminer.

Extensibilité, accessibilité, traduction et vérification future

La navigation mobile se développe comme Godzilla sur les stéroïdes atomiques. Au lieu d’être relégués aux Blackberry toxicomanes il ya cinq ans, tous utilisent leur téléphone pour surfer sur le Web.

Les technologies d'assistance - lecteurs d'écran pour aveugles et autres dispositifs d'interface pour les personnes handicapées - sont courantes et vous ne voulez pas perdre une vente ou aliéner du trafic simplement parce que vous n'en avez pas tenu compte.

Votre site est susceptible d'être traduit dans une demi-douzaine de langues, car les lecteurs du monde entier trouvent votre contenu. Grace à Archives Internet , Le cache de Google et d'autres, les pages que vous publiez aujourd'hui seront disponibles pendant une longue période, même après leur suppression de votre site Web.

Le balisage propre et la conformité aux normes contribueront grandement à garantir que vos sites fonctionnent dans chacun de ces scénarios.

À faire et à ne pas faire:

  • Utilisez les étiquettes comme elles sont destinées. Par exemple: h1 est le premier élément de niveau supérieur de la page, puis h2, h3, etc. Il ne devrait y avoir qu'une seule balise h1 par page.
  • NOMPEZ vos classes et identifiants CSS en utilisant des termes significatifs, et demandez-vous si quelqu'un d'autre saura ce que fait une classe / un ID à partir de son nom uniquement. Quelle convention de nommage a plus de sens: # box12 ou # comment-footer?
  • Faites bon usage de l'héritage CSS. Par exemple, si vous définissez une police sur un conteneur, vous n'avez pas besoin de la spécifier à nouveau sur chaque élément enfant, sauf si cet élément enfant doit utiliser une police différente. Cela gardera vos feuilles de style maigres et rapides à charger.
  • Validez votre HTML, CSS et XML et corrigez le plus d’erreurs possible. Faites attention aux avertissements générés également.
  • Faire un double contrôle WYSIWYG code généré et nettoyer si nécessaire. Ils sont connus pour avoir craché un balisage volumineux et volumineux avec beaucoup de déchets inutiles et non valides.
  • N'injectez PAS de styles en ligne ou de balises et attributs superflus simplement parce que vous êtes pressé.
  • Ne vous contentez pas de «ça marche». Ce n’est pas parce qu’une page est rendue que le balisage sous le capot est conforme aux normes, sans problème ou aux moteurs de recherche.

Autres lectures et ressources


Écrit exclusivement pour WDD par Jeff Couturier.

Suivez-vous les normes Web dans vos sites Web? Pourquoi ou pourquoi pas? S'il vous plaît partagez vos commentaires avec nous.

conception normes web marque propre