Article invité proposé par Thomas.
Me voilà de retour aujourd’hui afin de vous donner 21 erreurs fréquentes que l’ont peut trouver en HTML et en CSS.
Pour ceux qui ne savent pas qui je suis, je vous invite à consulter mon premier article chez Miss-SEO-Girl, intitulé “Créer, Organiser et Nettoyer son code HTML“.
Avant de commencer, je tenais à remercier une nouvelle fois Alexandra. Cela fait toujours plaisir de pouvoir transmettre son savoir à une communauté telle que celle-ci 🙂
Par ailleurs, cet article est destiné aux débutants comme aux plus expérimentés. Il est tellement facile de faire des erreurs de nos jours qu’une lecture ne vous fera que du bien ! Si vous êtes prêts, on va pouvoir commencer les énumérations !
Erreurs HTML
Erreur #1 – Oublier de fermer une balise
Erreur évidente mais que je vois encore trop souvent pour ma part ! Parfois, quand il m’arrive de regarder des codes sources, je constate que les navigateurs corrigent les mauvaises fermetures de balise. Relisez-vous et n’oubliez donc pas qu’en HTML, il faut fermer les balises comme ceci : <votrebalise></votrebalise> OU <votrebalise />
A noter qu’en HTML5, les balises indépendantes se forment ainsi : <votrebalise >. (Merci à RG)
Erreur #2 – Utiliser des balises obsolètes
Il existait auparavant des balises telles que <font>, <center>, <basefont>, etc. Ces balises sont clairement obsolètes de nos jours. Même si les navigateurs les interprètent de manière générale, évitez de les utiliser. En effet, la plupart des modifications effectuées par ces vieilles balises HTML se font maintenant dans votre code CSS.
Erreur #3 – Inclure le CSS dans le HTML
Cette pratique est encore largement utilisée aujourd’hui. On inclut le CSS dans le code HTML de cette façon : <p style=”color:red; font-size:12px;”>Votre texte</p>.
A l’exception des newsletters HTML qui sont des cas à part (et où tout ceci peut être éventuellement utilisé), je vous conseille de centraliser tout votre CSS dans un fichier dédié. Vous pourrez ainsi effectuer votre maintenance plus facilement et le code HTML ne sera pas surchargé. Vous n’aurez qu’à déclarer votre feuille de style dans le head comme ceci : <link rel=”stylesheet” href=”style.css”>.
Erreur #4 – Utiliser une mauvaise version de HTML
L’avenir des développeurs sera surement le HTML5 mais si vous êtes habitué à travailler dans une version antérieure de XHTML OU HTML, il est important de vérifier si vous utilisez bien le bon DOCTYPE et si chaque balise appartiennent bien à votre version de HTML. Par exemple, n’utilisez pas une balise <header> si vous avez déclaré que vous utilisiez le HTML4 Transitionnal, cela sera considéré comme une erreur.
Erreur #5 – Écrire du code superficiel
En HTML, évitez de mettre du code qui ne sert à rien. Faites une architecture simple sans trop ajouter de conteneur ou autre. Allez à la simplicité et ne rajoutez pas sans cesse des <div>, des <p> alors qu’il n’y en a pas besoin.
Erreur #6 – Mélanger les balises entre-elles
Comme écrit dans mon premier article, organisez votre code et faites un nettoyage ! Il faut que les balises correspondent entre-elles et qu’elles ne soient pas mélangées. Il ne faut donc pas voir des choses comme cela : <p><div><h1></p></div></h1>.
Erreur #7 – Utiliser les majuscules
Écrire les balises HTML en majuscule est considéré comme une erreur de code. Ne faites donc pas de balises ressemblant à <DIV>, <HTML>, <BODY>, etc.
Erreur #8 – Oublier de fermer ses guillemets
Lorsque que vous mettez la valeur d’un attribut : <a href=”lien”>Lien</a>. N’oubliez pas de fermer les guillemets.
Erreur #9 – Mettre des Meta inutiles
Ne vous encombrez pas avec des balises meta qui ne servent à rien. Les balises meta “Keyword”, “Revisit-after”, “Author”… ne sont strictement plus utilisés. Renseignez-vous sur les balises meta obsolètes.
Erreur #10 – Se tromper d’encodage
Les accents qui ne fonctionnent pas ou mal sont souvent liés à l’encodage qui est mal choisi ou mal utilisé. Préférez utiliser un encodage universel comme l’UTF-8 en le précisant dans l’entête head.
<meta charset=”UTF-8″>
Erreur #11 – Mettre un id au lieu d’une classe
Un id ne peut-être utilisé qu’une seule fois dans une même page du fait de son caractère unique. La classe quant à elle peut-être utilisée plusieurs fois dans un même document HTML. Utilisez donc les id pour des choses uniques comme la div logo, et placez une classe pour des éléments répétitifs comme les articles par exemple.
Erreur #12 – Utiliser un générateur de page HTML
Sans vouloir dénigrer les générateurs de page HTML ou les éditeurs wysiwyg, la majorité d’entre-eux fournissent généralement un code sale, superflu, chargé et extrêmement mal fichu. Regardez bien le code que vous fournit chaque outil et choisissez de développer votre HTML à la main ou avec ces logiciels. En voulant gagner du temps, vous en perdrez bien souvent avec eux.
Erreur #13 – Faire sa structure en tableau
Il y a quelques années, les structures de beaucoup de sites étaient conçues en tableau avec les balises <table>. Je vous encourage à utiliser au maximum le CSS ou à faire en sorte de limiter l’usage des tableaux (sauf pour des tableaux style tableur bien évidemment).
Erreurs CSS
Erreur #14 – Oublier de fermer les crochets ou les points-virgules
Lorsque vous écrivez du CSS, il peut vous arriver d’oublier de fermer les crochets. Il en est d’ailleurs de même pour les points-virgules. Faites attention à bien les utiliser !
A noter qu’il est possible de ne pas indiquer de point-virgule pour le dernier élément d’une règle CSS. Par exemple : div{color: #FFFFFF; font-size:12px} (Merci à Scraly)
Erreur #15 – Ne pas installer de reset CSS
Puisque tous les navigateurs sont différents, il ne faut pas oublier de déclarer un Reset CSS en amont de votre feuille de style traditionnelle. En effet, cela permettra de partir sur des bonnes bases à tout point de vue.
Erreur #16 – Ne pas organiser son CSS
Les CSS sont souvent victimes de notre fainéantise. En effet, nous écrivons souvent élément par élément sans nous soucier de notre organisation. Commencez donc par les déclarations générales puis continuez avec le header, le corps, la sidebar, … dans l’ordre le plus logique qui soit.
Erreur #17 – Indiquer une seule police
Lorsque vous déclarez vos polices, évitez de n’en mettre qu’une seule. Mettez-en au moins cinq par ordre de priorité au cas où les internautes de votre site ne possèderaient pas la police convenue dans votre charte graphique.
Erreur #18 – Compliquer son code
Là aussi c’est très important. Ne mettez pas des déclarations CSS inutiles qui ne changent en rien l’apparence de votre page. Œuvrez avec des règles CSS utiles qui ne rendront pas votre code lourd et impraticable.
Erreur #19 – Ne pas utiliser les codes hexadécimaux pour les couleurs
Ne vous contentez pas de mettre des couleurs simples telles que “red”, “green”, “black” ou autre. Marquez vos couleurs en hexadécimal comme ceci : #FF6600. Vous pouvez utiliser un code couleur HTML.
Erreurs HTML ou CSS
Erreur #20 – Ne pas commenter son code
Ne pas commenter son code est une pratique à éviter. En effet, si plusieurs mois voire plusieurs années passent après le premier développement d’un code, vous ne vous souviendrez probablement plus de ce que vous aurez fait auparavant. Commentez donc un minimum votre code pour vous y retrouver ou pour aider vos successeurs à vous relire.
Erreur #21 – Utiliser les codes des autres
Pour ce dernier point, je vous invite à vous méfier des codes HTML et CSS que vous pourrez trouver sur internet. L’environnement d’un site n’est jamais le même, le projet non plus et l’auteur n’est pas forcément une lumière à chaque fois. Gardez donc un œil critique sur les ressources qui sont misent à votre disposition, y compris les miennes.
Conclusion
Il existe des tas d’autres erreurs en HTML et CSS mais vous les trouverez surement au fur et à mesure que vous développerez. Cependant, je vous encourage à utiliser le Validateur W3C afin de vérifier vos codes et ainsi identifier vos erreurs plus rapidement. Moins vous ferez d’erreurs et plus votre site sera fiable !
Il est venu le temps pour moi de vous remercier d’avoir lu cet article ! J’espère qu’il vous aura appris des choses et que vous saurez faire face à de prochaine situation ! Si vous avez d’autres idées d’erreurs ou des questions, n’hésitez pas à poster un commentaire !
Passionnée par le référencement naturel et la rédaction web ! Blogueuse depuis 2012 ! Coauteur du livre “Techniques de référencement web” et “Stratégie de contenu e-commerce”.
Découvrez mes “Prestations SEO” et contactez-moi pour échanger sur votre projet SEO.
Bonjour,
sympa l’article, étant la développeuse de la boîte je rabâche éternellement ces conseils donc c’est cool de les voir noir sur blanc ;-).
Juste une petite remarque pour l’erreur ‘#14 – Oublier de fermer les crochets ou les points-virgules”, en CSS, on peut oublier le dernier point virgule d’une règle, mais uniquement le dernier.
Exemple correct : #ma-div { display: block; margin: 0 auto; width: 650px; height: 200px }
–> fonctionnera
Non correct #ma-div { display: block margin: 0 auto width: 650px; height: 200px }
–> ne fonctionnera pas 😉
🙂
Des remarques simples mais qui semblent d’une grande utilité. Pour les erreurs CSS, je me permets d’ajouter une qui concerne le fait d’avoir trop de fichiers CSS.
Véronique@comparatif banque Articles récents..ouvrir un compte bancaire
Google a sorti il n’y a pas longtemps des consignes de rédaction du code HTML5 qui, pour des raisons évidentes de rapidité de lecture, permet de ne plus fermer (à certaines conditions) les balises HTML. Le point n°1 est donc partiellement faux dorénavant.
@rg
Pour les consignes Google concernant la rédaction du code HTML, pouvez-vous nous présenter le lien vers la source?
Véronique@comparateur banque Articles récents..ouvrir un compte bancaire
Bonjour à tous et merci pour vos commentaires 🙂
@Scraly : Il est clair que dans les entreprises, nous sommes tout le temps en train de rabâcher ces choses là. Le pire étant pendant les refontes 😀
Concernant votre précision, vous avez bien évidemment raison. Mais il est vrai que je préfère qu’un débutant place tous les points-virgules plutôt que pas du tout. Je n’ai pas envie d’embrouiller son esprit avec des exceptions. Cependant, je vais rajouter votre précision qui pourra apporter un complément d’information aux internautes. Merci beaucoup 🙂
@Véronique : Votre remarque est tout à fait pertinente, surtout pour les performances. Cependant, il est vrai que j’ai voulu insister sur les erreurs les plus fréquentes lors de la conception. Votre remarque est surtout axée sur l’optimisation à mon humble avis, mais merci beaucoup pour votre contribution 🙂
@RG : Il est certain que le HTML5 est beaucoup plus clair et lisible. Vous avez d’ailleurs tout à fait raison concernant les balises indépendantes qui n’ont plus besoin d’être fermée, je l’ai d’ailleurs utilisé en point #10 avec la déclaration de l’encodage.
Cependant, ce que j’ai marqué n’est pas faux comme vous le prétendez puisque je parle du HTML en général. Dans les versions antérieure à HTML5, il fallait fermer les balises indépendantes par un slash. Ceci-dit, je vais tout de même ajouter cet élément pertinent en précisant le HTML5. Merci 🙂
Il y a certaines erreurs que je fais, parce que je suis un peu tête en l’air parfois, comme les oublis (de fermer une balise, de mettre un point-virgule…), mais en général, cela fout en l’air mon site/mon article, et comme je me connais, je capte tout de suite l’erreur ! Cependant, il y a des erreurs que je commets, comme “Ne pas commenter son code”, que je devrais corriger après cet article, alors merci 🙂
Excellent récap. A mettre entre les mains de tous les développeurs et pas que 😉 Les référenceurs se doivent de connaître toutes ces erreurs qui peuvent facilement être évités.
Maximilien@Référencement sur blogs thématiques Articles récents..Paydirtapp : un excellent outil de facturation en ligne
@Maximilien : Merci beaucoup pour ce compliment ! Et oui, tout à fait d’accord, le référenceur se doit de connaître les bonnes pratiques de chaque service afin d’écarter toute erreur éventuelle pouvant atteindre le référencement de manière directe ou indirecte 🙂
@Céline : Ce que vous indiquez n’est ni plus ni moins que la réalité. Etant ancien développeur, on code, on code et on recode jusqu’à ne plus en voir les lignes. L’erreur arrive à ce moment là en général (parce que on se presse, on en a marre, on veut voir le résultat). Mais on sait se corriger après des tests éventuels ou une relecture. Ce n’est pas tellement grave. A force, tout s’écrit automatiquement sans erreurs et c’est surement lié à l’expérience d’ailleurs.
Après, en ce qui concerne vos erreurs à corriger, je pense qu’il faut distinguer celles qui sont importantes, vitales… et celles qui sont juste lié à de l’optimisation, de l’indication ou de la structure, comme celle que vous avez mise en exemple. Je vous remercie en tout cas pour ce retour positif 🙂
Excellente liste de préconisation, par contre je ne comprends pas du tout l’utilité du resetCSS, est ce que tu pourrais en dire un peu plus ?
@Fred : Merci Fred pour ce compliment ! En ce qui concerne le reset CSS, chaque navigateur interprète à sa manière votre code HTML et CSS. Du coup, l’apparence de votre site internet n’est pas entièrement la même partout, même si de manière générale, c’est quasiment pareil.
Le reset CSS vous permet de partir sur la même base pour chaque navigateur. Il met à zéro chaque navigateur avant l’interprétation du CSS de votre site. Ainsi vous travaillez de façon évolutive et polyvalente. Aucune marge, aucun texte pré-défini ni rien.
Merci beaucoup Alexandra pour avoir publié cet excellent article de Thomas ! Dès que je vois du CSS inclut dans le code HTML (erreur #3), je demande aux développeurs / agences techniques de le mettre dans un fichier externe. Sinon, ça fait bien ralentir le chargement d’une page, et … cela pourrait augmenter facilement le taux de rebond 🙁 J’ai déjà eu le cas où un site commence directement par la balise head.
Véronique Duong Articles récents..Comment créer une page Google+ Local (Google Adresses) ?
merci pour ces astuces,c’est vrai que c’est utile d’avoir un code bien soigné,mais surtout le contenue jour un role aussi,et les alt des images…mais d’aprés mon experience,j’ai travaillé dans le referencement pendant 8 mois dans une entreprise,on referencé des site web nule et meme d’arnaque pourtant on obtient le place 1 dans les moteurs sur google,il suffit juste de les placé dans les annuaires,c’est dommage que l’algorithme de google s’accentue surtout sur les backlinks sans donné une trés grande importance au contenue !!
@Jabir : Merci pour le retour. Cependant, concernant le contenu, je ne suis pas entièrement d’accord avec vous. Le contenu est quelque chose de très apprécié par l’algorithme de Google. Certes il y a la popularité (donc backlink, social, etc…) qui joue beaucoup, mais c’est de moins en moins utilisé de façon brutale, surtout avec Google Penguin qui nous pousse à moins utiliser les liens comme le ferai un Black Hat. Je pense qu’il faut disposer d’un site bien conçu au niveau technique, puis ajouter du contenu de qualité avec une vraie valeur ajoutée. A partir de là, on a déjà une bonne base et il ne nous reste plus qu’a mettre en avant notre “matière” sur les réseaux, on cherche des partenaires de qualité, etc. Et si ça fonctionne pas, on s’interroge et on fait en fonction.
@Véronique Duong : Merci pour le compliment, c’est gentil de votre part. Concernant votre exemple sur le CSS et le taux de rebond, etc… c’est très intéressant. Je trouve que les gens ne font pas assez attention à la technique du site et aux enjeux indirects en matière de trafic, ventes, etc. Si un site est mal conçu, moche, lent… Certes ce n’est pas un critère important dans les guidelines et dans l’algorithme de Google mais c’est important pour l’internaute qui n’aura pas confiance ou n’aura pas la patience d’attendre le chargement. Du coup, il partira et ne reviendra pas, cela signifiant une perte. Le boulot de SEO est beaucoup plus large qu’on ne peut le penser à mon humble avis. Ou nous n’en avons pas la même définition.
@Thomas : je suis tout à fait d’accord avec vous. La partie technique en SEO est extrêmement importante parce qu’au final, c’est un site qu’on gère, et non seulement des mots-clés ou une stratégie marketing. Merci pour votre retour rapide.
Véronique Duong Articles récents..Comment faire une étude de mots-clés ? #KeywordPlanner
Comme vous le dites, la balise “author” n’est plus utilisé par contre la tendance est à synchroniser son compte Google+ de cette manière
@Eric : Merci pour le retour. Cependant, attention, je parlais de la balise méta name=author. Je ne parle pas de link rel=author qui est effectivement utilisé pour Google +.
Je ne suis pas certain que cette balise soit utilisé pour cela. Mais a vérifier, c’est tout a fait possible.
Belle Bible html/css ! C’est d’autant plus agaçant de voir de nouveaux sites aux codes sources affreux premiers sur des requêtes très concurrentielles. Comme quoi le code ne fait pas tout.
source Articles récents..Pourquoi la culpabilité est mauvaise pour maigrir
@Source : Merci pour le retour ! Effectivement, c’est un peu agaçant de voir des nouveaux sites codés avec les pieds, ranker comme pas possible. Ceci dit, le code est tout de même important. Mauvais code = problèmes = pénalité indirecte.
@Nathalie : Mais oui il est super le blog de la Miss ! Si tout le monde pouvais lui dire, elle serait très heureuse 🙂
Je commence à aimer ton blog et pour ne pas te cacher les choses, je pense que je vais en tirer des choses. Le referencement vu par une miss, ca ajoute du charme au métier lol. En tout cas je ne te remercierai jamais assez toi et tout ceux qui font des blogs dans ce genre et qui font éviter les écueils du métier à d’autres plutôt novices.
Par ailleurs, si quelqu’un a des bons plans pour des résidences du type golf city, je suis preneur. Depuis tout le temps que j’y pense, je n’ai toujours rien trouvé. Merci d’avance !
Une liste bien utile ma foi !
Aurélien Debord@creation site internet strasbourg Articles récents..Quel est le prix d’un site internet ?
Excellente liste de préconisation,des remarques simples mais qui semblent d’une grande utilité.Bonne continuation pour le blog qui est très instructif.
@Aurélien Debord : Merci 🙂
@Cristina : Merci pour votre compliment !
Excellent article. Le check list démontre une bonne expérience et il crois bien les techniques théoriques avec des pratiques anciennes, inutiles voir illogiques. Bravo!!!!
@ABITASUD : Merci beaucoup pour ce commentaire ! Il m’a fais extrêmement plaisir 🙂
@Franck : Merci à vous ! Effectivement, vos précisions sont exactement le reflet de ce que j’ai pu rencontrer. Parfois, ce ne sont pas des drames mais ça fout vraiment en l’air la compréhension et souvent le site en lui même.
Bonjour,
C’est une excellente liste d’erreurs courantes, ta recommandation”Mélanger les balises entre-elles” est totalement vraie, je l’ai vue déjà trop souvent, mais je ne parlerai pas de mélanger, plutôt de balises se chevauchants…
“Utiliser les codes des autres”: c’est un avertissement à ne pas négliger, on voit trop souvent des codes repris qui ne sont pas forcément bien adapter à leur site internet… Il faut bien penser à réadapter ce code pour qu’il n’y ait pas de lignes superflues ou qui ne servent à rien, il faut aussi penser à ce que le CSS que l’on empreinte ne va pas avoir des conséquences sur des “class” ou “id” que l’on a déjà défini…
Merci pour ce récapitulatif!
Excellent article. A force de créer des sites web, on en oublie parfois les fondamentaux.
Erreur #20 – Ne pas commenter son code
Je ne suis pas tout à fait d’accord…
Commenter du CSS, l’alourdir, le re-commenté et avec le temps ce retrouver avec un CSS propre mais lourd je suis tout simplement contre.
Google aime les page rapide, je suis plutôt partisan de la compression CSS/JAVASCRIPT qui optimise les ressource!
Pour des applications en C+ ou les lignes de code sont éternelles, forcement , commentaire juste “OBLIGATOIRE”, mais des feuille de style, on s’y retrouve toujours rapidement même compressé!
Bonjour Axel,
Merci pour votre commentaire.
C’est tout à fait étrange de lire un commentaire comme le vôtre dans le sens où je suis partagé entre l’amusement et ma propre remise en question.
Tout d’abord, je tiens à signaler que je suis d’accord avec vous. Trop de code superficiel, des commentaires à gogo, augmentent le nombre de caractère/ligne et alourdissent rapidement les fichiers. Cela provoque par la suite une perte en performance, une lecture/interprétation des fichiers plus longue, etc. Je suis moi aussi partisan de la compression et de l’optimisation en général. Google nous remerciera.
Cependant, je suis quand même relativement agacé (c’est simplement mon ressenti) par votre commentaire . Surtout pour le fait qu’il ne correspond pas aux objectifs de ce blog et que j’ai l’impression que vous avez cherché “la petite bête” dans mon article.
Voici quelques unes des raisons de cet agacement :
#1 – Ce billet (blog) est conçu pour les débutants. La plupart des lecteurs ne sont pas censés être à l’aise avec le CSS. C’est peut être simple pour vous de retrouver un élément, mais ce n’est pas le cas de tout le monde ici. Sans vouloir les dénigrer, sans commentaire, les débutants sont perdus. Le point que vous avez cité est donc tout à fait valable dans un début d’apprentissage.
#2 – Votre remarque (celle où je suis d’accord donc) est véritablement utile pour des sites à fort trafic ou des sites énormes tels que Google, Microsoft ou Amazon. Ces sites gagnent des gigaoctets de trafic rien qu’avec cette optimisation. Mais pensez-vous qu’un développeur de ces firmes ait besoin d’un article pareil ? Je ne pense pas. Je crois que les capacités de ces personnes à produire du code et à découvrir des astuces de haut niveau sont élevés.
#3 – Le site que vous avez intégré à votre commentaire comporte lui-même des commentaires, des tonnes de fichiers et code CSS (internalisés et externalisés), des scripts à gogo… Je ne sais pas si c’est votre site, celui d’un de vos clients, ou encore si c’est vous qui faites le développement, mais donner une leçon pareille (et encore une fois ce n’est que mon ressenti, il aurait fallu améliorer votre approche), sans exprimer la moindre reconnaissance, en créant un backlink pour un site qui n’a pas suivi beaucoup de règles, c’est dur à lire :/
En tout cas, je vous souhaite une bonne continuation et vous remercie pour votre commentaire une nouvelle fois. Sans rancune 🙂
Merci pour la liste de préconisation, au moins il y a un récap à retenir pour ne pas oublier les bases! Très bon article!
Comme vous le dites, la balise “author” n’est plus utilisée par contre la tendance est à synchroniser son compte Google+ de cette manière.
je découvre le monde du CSS parce que mon blog est sur une plateforme qui visiblement code avec les pieds.
Un article et intéressant et pédagogique, j’ai le sentiment d’avoir compris, il reste à mettre en pratique .. et ça c’est une autre histoire
Excellent article. Le check list démontre une bonne expérience et il crois bien les techniques théoriques avec des pratiques anciennes, inutiles voir illogiques. Bravo!!!!
Merci pour cet article qui vient de me sauver la vie ! Et plus précisément le point numéro 4 -> Utiliser une mauvaise version de HTML ! Cette erreur de ma part m’a fait galéré quelques heures, et après une recherche sur un moteur de recherche me voila arrivé sur votre site pour voir que j’avais commi cette erreur de débutant. J’ai pu corriger et continuer mon code. Merci encore 😉