Blog inspirant depuis 2008
  • Pin It

Erreurs HTML et CSS fréquentes à éviter

erreurs html

Tant les programmeurs débutants qu’avancés font des erreurs dans leurs fichiers HTML et CSS, soit par inattention ou soit par manque d’expérience. Il est important d’avoir un code bien écrit et bien structuré pour parfaire vos compétences de développeur web ou tout simplement pour facilité une modification future à vos documents.

Il n’est jamais mauvais non plus de réviser son code et cela, même si vous êtes un programmeur professionnel, puisque la plupart des erreurs surviennent lorsque l’on veut coder trop vite. Voici une liste des fautes d’inattention les plus courantes dans les fichiers web HTML et CSS.

Erreurs HTML

Oublier de fermer une balise

Il s’agit d’une erreur extrêmement courante. Plusieurs des balises HTML ont besoin d’être fermées.

<div>Texte ici</div>

D’autres, on simplement besoin d’un «slash» à la fin de leur balise d’ouverture.

<img src="images/twitter.png" />

Mauvais DOCTYPE

Les documents HTML doivent débuter par une balise «DOCTYPE» afin de spécifier le type de document HTML que vous allez utiliser. Voici la ligne de code pour un document XHTML 1.0 standard.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Mettre les balises en majuscules

À ne pas faire: <DIV></DIV>. Cela ne changera rien au niveau de la validation de votre code mais c’est considéré comme une mauvaise utilisation du HTML.

Oublier de fermer des guillemets

Une erreur classique d’inattention…

<img src="images/monImage.jpg>

Déclaration de styles dans le code HTML

L’utilisation de style à l’intérieur de vos balises fonctionnera mais sera plus tard, difficile à éditer. Avoir des styles à plusieurs endroits différents dans votre site web est une très mauvaise idée. À ne pas faire…

<div style="background:url(../images/monImage.jpg) repeat-x; padding:10px">Mon Texte Ici</div>

Ne pas encoder les caractères spéciaux

Par exemple, utilisez le code &amp; pour le caractère &. Voici une liste des caractères spéciaux ainsi que leur code HTML.

Confusion entre l’utilisation des CLASSES et des ID

Les classes sont pour les items utilisés plus d’une fois dans une page. Les ID, sont pour les items appelés obligatoirement qu’une seule fois dans la même page comme les bloques header, body, wrap, footer, etc…

Erreurs CSS

Ne pas utiliser les styles globales

Il est important d’utiliser des styles globales pour les paragraphes (p), les titres (h1,h2,h3,h4,h5,h6), les citations (blockquote), etc… afin d’harmoniser vos styles et de réduire la quantité de code dans votre feuille de style.

Ne pas utiliser des noms uniques pour les ID et les CLASSES

Il est impératif d’utiliser des noms uniques lorsque vous déclarez de nouvelles classes ou de nouveaux id. Également, utilisez des noms ayant une signification précise ex: #accueil-colonne-gauche.

Ne pas utiliser les «shorthand code»

Ne pas utiliser: padding-top:5px; padding-right:10px;.. Utilisez plutôt: padding:5px 10px 0 0;

Également pour condenser votre code, utilisez color:#fff; à la place de color:#ffffff;

Valider avec le W3C

Il est important de valider son code HTML et CSS avec le validateur du W3C. Cela vous aidera à trouver les erreurs dans vos documents et vous aidera à trouver la source de différents problèmes.

Faites-vous d’autres erreurs HTML ou CSS que celles mentionnées ci-haut ? Si oui, lesquelles ?

Billet original écrit par Shannon Noack (lien Twitter) sur le site webdesignledger.com

.

9 commentaires

  • katsoura | 2010/04/17

    Je trouve que le style directement dans la page à son utilité. Il allège CSS pour un effet local et exceptionnel. Ce qu'il faut éviter c'est sa généralisation.

  • ugg boots | 2010/07/08

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good information we can learn in this forum! Dior homme shoes

  • sakhr | 2011/03/31

    merci bien , ce sont des conseil précieuses !

  • René | 2011/08/06

    Vous devriez aller voir aussi de très bon tutoriels français sur le html5, le css3 et le Mootools sur ce site http://beta.rdsign.net/code/ Tutoriels plus souvent le code à télécharger.

  • Sac Longchamp | 2013/07/17

    Erreurs HTML et CSS fréquentes à éviter | Ma Revue Web Sac Longchamp http://www.jomafrance.com/

  • Chennorris | 2016/01/14

    Article qui aurait pu être intéressant mais qui donne malheureusement beaucoup de mauvais conseils.

    Par exemple, les « shorthand code » (je ne savais pas que ça s’appelait comme ça) peuvent parfaitement être utilisés lorsqu’on ne souhaite définir qu’une seule marge et hériter des marges parentes. C’est certes une source d’erreurs mais ce n’est pas une mauvaise pratique en soit.
    Concernant la fermeture des balises, il n’est pas juste d’indiquer que seules certaines doivent être fermées : elles doivent TOUTES être fermées. Le slash final est simplement une autre manière de le faire. Indiquer que seules certaines balises doivent être fermées est source de non conformité, par exemple avec la balise br que beaucoup écrivent au lieu de . La validation W3C ne laissera pas passer.
    Vous parlez d’utiliser le bon doctype mais le code source de cette page commence par . Il serait peut-être bon de commencer par appliquer les bonnes pratiques à votre propre site…
    Les noms des classes ne nécessitent pas d’être uniques : au contraire, c’est une très bonne pratique que d’appliquer un même style sur plusieurs éléments différents (en l’occurence sur votre site, appliquer la couleur verte sur les titres, les boutons, les liens, …). Vous l’avez même très justement utilisé sur ce site, j’en prends pour exemple les boutons de lien vers le flux RSS, Facebook et Twitter : ils comportent tous la classe « sb ». Pourquoi donner des conseils que vous n’appliquez pas vous-même ?
    Ne pas indiquer les unités dans les feuilles de style est aussi une très mauvaise idée car les navigateurs peuvent l’interpréter différemment. Éviter donc d’écrire qu’il faut utiliser « padding:5px 10px 0 0; », mettez plutôt « padding: 5px 10px 0px 0px; ». La valeur « 0 » ne nécessite peut-être pas de mettre d’unité mais ça fait un peu brouillon que de ne pas la mettre.
    Remarque plus personnelle : condenser les codes couleur ne me semble pas non plus une bonne pratique car cela nécessite une conversion mentale qui n’est pas toujours évidente : #1f4 qui doit être interprété comme #11ff44, ce n’est pas très logique. Un débutant risquerait de l’interpréter comme #0001f4, ou même #1f41f4. Ce ne sont pas trois caractères supplémentaires en CSS qui risquent d’alourdir le chargement d’une page, à mon avis. Si vraiment vous vouliez optimiser à mort votre page, ne donnez pas comme conseil d’encoder les caractères spéciaux mais plutôt de déclarer l’encodage dans l’entête (pratique que j’évite personnellement au maximum). Pour le coup, vous gagneriez considérablement plus en taille qu’en condensant vos codes couleur dans le CSS.

    Attention aussi aux fautes d’orthographe car elles sont vraiment nombreuses et donnent un côté un très amateur à votre article (d’autant que celui-ci est suffisamment court pour que vous vous relisiez une à plusieurs fois avant de le publier) :
    – le verbe se met à l’infinitif après les prépositions suivantes : à, de, pour et sans. Écrivez « pour faciliter une modification future à vos documents » plutôt que « pour facilité une modification future à vos documents ».
    – le mot « bloque » n’existe pas en français : on parle de bloc.
    – « Etc. », forme abrégée d’« et caetera », n’est jamais suivi de points de suspension. Il faut l’écrire « etc. » avec un seul point.
    – « style » est un nom masculin, pas féminin. Ne parlez donc pas de « styles globales » mais plutôt de « styles globaux »
    – lorsqu’ils sont doubles, les signes de ponctuation doivent comporter des espaces insécables de part et d’autre. Pour les caractères ‘«’, ‘»’ et ‘:’, mettez donc des espaces de chaque côté.

    En espérant que mes remarques ne vous froisserons pas trop mais vous orienteront plutôt vers une voie meilleure…

  • Chennorris | 2016/01/14

    L’écriture de la balise br dans mon commentaire précédent ayant été interprétée, j’apporte un correctif. Il fallait lire ceci :
    « … la balise br que beaucoup écrivent au lieu de . » (en retirant les espaces que j’ai volontairement ajoutés)

  • Chennorris | 2016/01/14

    L’écriture de la balise br dans mon commentaire précédent ayant été interprétée, j’apporte un correctif. Il fallait lire ceci :
    « … la balise br que beaucoup écrivent au lieu de . » (en retirant les espaces que j’ai volontairement ajoutés)
    Même remarque concernant le doctype de votre document : (toujours en retirant les espaces)

  • Chennorris | 2016/01/14

    Décidément… :
    – « … la balise br que beaucoup écrivent <br> au lieu de <br />. »
    – le doctype de votre document : <!DOCTYPE HTML>

Laisser un commentaire