Erreurs HTML et CSS fréquentes à éviter
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 & 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
.
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.