Créer une page Web avec HTML et CSS est assez simple. Mais il est facile de faire des erreurs et il y a pas mal de choses auxquelles vous pourriez ne pas penser. La plupart du temps, ces petites erreurs ne feront pas beaucoup de différence.
Mais à long terme, ils peuvent vous compliquer la vie. Ces neuf erreurs sont faciles à commettre, mais si vous les évitez plus tôt que tard, votre page sera plus belle, plus facile à entretenir et fonctionnera comme vous le souhaitez.
L'un des grands avantages du HTML et du CSS est que vous pouvez formater n'importe quelle ligne de texte - n'importe quel mot, vraiment - quand vous le souhaitez. Mais cela ne signifie pas que vous devez tirer parti de cette fonctionnalité.
Voici un exemple de style en ligne que vous pouvez utiliser pour agrandir un paragraphe par rapport aux paragraphes environnants et le mettre en surbrillance dans une couleur différente :
Votre texte ici.
Cela donne au paragraphe un style CSS qui se termine par la conclusion du paragraphe. Cela semble assez efficace, non ?
Il y a un gros problème avec cela :si vous voulez changer beaucoup de choses sur votre site Web, vous devrez aller chercher chaque instance de style en ligne et la changer. Si vous avez 100 paragraphes différents dont la taille du texte est de 120 % et qui sont bleus, vous devrez tous les rechercher et les modifier selon ce que vous avez décidé comme étant un meilleur format.
Utilisez plutôt une feuille de style CSS. Voici le style que vous utiliseriez pour le paragraphe ci-dessus :
p.important {
taille :120 %;
Couleur bleue;
} Maintenant, au lieu d'utiliser le style en ligne, vous pouvez simplement utiliser cette ligne :
Votre texte ici.
Et votre paragraphe sera grand et bleu. Et lorsque vous modifiez la classe "important" dans votre CSS, elles changent toutes.
Les gens utilisaient assez régulièrement des tableaux pour formater la mise en page. En utilisant un tableau, vous pouvez organiser les éléments de votre page en colonnes et en lignes, ainsi qu'appliquer différents alignements et styles. Même des tableaux à cellule unique seraient utilisés pour aligner correctement le contenu. Mais cette utilisation des tableaux est généralement mal vue.
Tout comme les styles en ligne, l'utilisation de CSS au lieu de tableaux HTML pour la mise en page est plus facile à gérer. Encore une fois, si vous souhaitez apporter des modifications à des dizaines ou des centaines de pages, il est beaucoup plus facile de modifier votre feuille de style que de parcourir chaque page et de modifier les tableaux.
En plus d'une maintenance plus facile, la lecture des mises en page CSS a tendance à être un peu plus facile que la lecture des tableaux HTML. Surtout si vous finissez par imbriquer plusieurs niveaux de tables les uns dans les autres. Il ne sera peut-être pas très facile d'aller et venir entre votre document HTML et votre feuille de style pour voir exactement ce qui se passe, mais le contenu de votre page sera plus clair et plus facile à modifier.
Utiliser des tableaux ici et là pour diviser les pages en colonnes n'est pas un péché mortel. Parfois, c'est plus facile et plus rapide que de jouer avec CSS. Mais si vous créez des tableaux gigantesques à plusieurs niveaux, vous devriez envisager de reformater avec CSS.
Comme tout langage, HTML change régulièrement. Les balises officiellement reconnues changent et certaines deviennent obsolètes. Même si ces balises fonctionnent toujours, il est préférable de les éviter.
Par exemple, si vous avez l'habitude d'utiliser la balise pour le gras et la balise pour l'italique, vous êtes en retard. et (pour "emphase") sont désormais les balises standard.
La plupart des balises obsolètes ont été remplacées par du CSS, vous devrez donc utiliser des styles (de préférence pas en ligne) pour obtenir le même effet. Si vous ne savez pas comment remplacer une balise obsolète ou si une balise spécifique est toujours utilisée, consultez la documentation HTML officielle ou lancez simplement une recherche rapide.
Certaines pages Web utilisent JavaScript pour ajouter des fonctionnalités supplémentaires. Il peut rendre les pages Web interactives, valider le texte lors de sa saisie, ajouter des animations, fournir des réponses aux actions de l'utilisateur, etc. En bref, cela peut rendre une page plus utile en fournissant un comportement supplémentaire.
Tout comme CSS, vous pouvez ajouter du JavaScript en ligne à votre code HTML. Tout comme CSS, cela est généralement déconseillé. En plus d'être potentiellement plus difficile à maintenir, il y a quelques autres raisons qui justifient cet avertissement.
Le JavaScript intégré peut utiliser une plus grande quantité de bande passante qu'un script lié à partir d'un autre fichier. Un processus appelé minification compresse le HTML et le CSS avant de l'envoyer à un utilisateur, nécessitant moins de bande passante sur les connexions haut débit ou mobiles. Cependant, le JavaScript inline ne peut pas être minifié. Il ne sera pas non plus mis en cache, alors qu'un fichier JavaScript distinct peut être mis en cache.
Toutes ces choses rendent le JavaScript en ligne plus gourmand en bande passante.
Il est également plus difficile à déboguer, car vous pouvez utiliser un validateur JavaScript pour un fichier JavaScript... mais cela ne fonctionnera pas sur un script en ligne. Et, encore une fois, cela rend le HTML plus propre et plus facile à entretenir.
Les balises d'en-tête sont excellentes. Ils facilitent le survol des pages, ils peuvent vous donner un coup de pouce pour le référencement et ils peuvent être utilisés pour souligner certains points.
Mais il y a six niveaux de balises de titre pour une raison. Il ne devrait vraiment y avoir qu'une seule balise H1 sur votre page. Et c'est souvent le titre de la page (surtout sur les blogs et sites similaires). Vous pourriez penser que mettre un tas de mots-clés dans les balises H1 rendra Google plus susceptible de les récupérer et de classer votre site plus haut dans les résultats.
Mais ce qu'il fait vraiment, c'est rendre votre page plus confuse et plus difficile à lire. Ce qui annulera tous les avantages SEO que vous pourriez voir de toute façon.
Utilisez H2, H3 et le reste des balises d'en-tête pour mieux décrire votre page. Le niveau du titre doit donner à votre lecteur une idée de l'importance de la section suivante. Si vous les avez induits en erreur, ils le sauront et ils ne seront pas contents.
Chaque image peut recevoir un attribut "alt" qui affiche une ligne de texte spécifique si l'image ne peut pas être affichée. Cela peut ne pas sembler un gros problème, en particulier avec les navigateurs modernes (ordinateurs de bureau et mobiles) qui peuvent afficher à peu près n'importe quoi.
Mais ne pas ajouter d'attributs alt est une grosse erreur, surtout à l'ère de la navigation mobile constante. Les connexions mobiles ne sont pas toujours bonnes, et si un navigateur ne peut pas charger une image, votre lecteur n'a aucune idée de ce qu'il devrait y voir. Un attribut alt peut résoudre ce problème.
Et si quelqu'un utilise un lecteur d'écran ou une autre fonctionnalité d'accessibilité, cet attribut alt peut être tout ce qu'il obtient de l'image.
Bien sûr, il existe également des avantages potentiels pour le référencement. Les moteurs de recherche peuvent indexer des attributs alt courts et descriptifs. Mais le plus grand avantage ici est d'aider vos lecteurs.
Il existe certaines balises HTML que vous pouvez éviter de fermer, comme
et
Tout d'abord, malgré les progrès de la technologie des navigateurs, il est certainement possible que le navigateur affiche votre contenu de manière incorrecte si vous n'avez pas fermé vos balises. Et l'application de styles peut produire des résultats imprévisibles, comme le démontre l'utilisateur de Stack Exchange, Robertc.
Cela revient à dire que les navigateurs attendent des balises de fermeture. Ils n'en ont pas absolument besoin... mais ils bénéficieront certainement d'avoir le code HTML correct lorsqu'ils essaieront d'afficher votre page.
Heureusement, il ne faut pas grand-chose pour fermer vos balises, surtout si vous utilisez un bon éditeur HTML.
Au début des documents HTML, vous verrez généralement une déclaration DOCTYPE, comme celle-ci :
C'est quelque chose dont on ne parle pas souvent, mais c'est un élément important de votre page. La déclaration DOCTYPE indique au navigateur le type de HTML que vous utilisez. Cela lui permet de restituer correctement le HTML.
Si vous ignorez la déclaration DOCTYPE, la page s'affichera en "mode bizarrerie". C'est la défense du navigateur moderne contre les pages Web désuètes. Et cela change la façon dont votre page s'affiche. Un rapide coup d'œil au mode Quirks de Firefox montre que la sensibilité à la casse change, que les propriétés de police n'héritent pas dans les tableaux, que les tailles de police sont calculées différemment et que les images sans attributs alt s'affichent parfois de manière incorrecte.
La plupart de ces choses sont relativement mineures. Mais si vous voulez que votre page s'affiche correctement, vous devez vous assurer qu'un navigateur a son mode standard complet activé.
Et pour ce faire, vous avez besoin d'un DOCTYPE. (Si vous ne savez pas quoi utiliser, utilisez simplement .)
Le balisage de schéma aide les moteurs de recherche à avoir une meilleure idée du contenu de votre page. Plus précisément, ce balisage indique aux moteurs de recherche ce que vous écrivez dans chaque section.
Par exemple, dans un article, vous pouvez utiliser le balisage de schéma pour indiquer à un moteur de recherche le titre, l'auteur, la date, l'éditeur et d'autres informations utiles sur un article.
Il existe des schémas pour les films, les livres, les organisations, les personnes, les restaurants, les produits, les lieux, les actions, différents types de données, la musique, la sculpture, les réservations, les services, les guichets automatiques, les brasseries et à peu près tout ce à quoi vous pouvez penser. C'est assez incroyable.
Vous pouvez certainement vous en sortir sans utiliser le balisage de schéma. Votre page s'affichera correctement sans elle. Vos lecteurs ne sauront même pas qu'il est là. Mais il y a beaucoup à gagner en incluant ce balisage. Les moteurs de recherche pourront fournir des informations beaucoup plus détaillées et utiles sur votre page, y compris des extraits enrichis.
Et avec l'outil de balisage de schéma de Google, le processus est en fait assez simple.
Faire de ces meilleures pratiques une habitude peut prendre un certain temps. Et parfois, vous pouvez avoir l'impression de prendre beaucoup de temps supplémentaire pour quelque chose qui ne vous rapporte pas beaucoup. Mais vous assurer que votre code HTML et CSS sont bien agencés, faciles à utiliser et maintenables vous fera gagner beaucoup de temps à long terme.
Quelles autres bonnes habitudes avez-vous trouvées utiles lors de la création de pages Web ? Êtes-vous en désaccord avec l'une des pratiques ci-dessus ? Partagez vos impressions dans les commentaires ci-dessous !