J’aime bien lire Smashing Magazine, il y a souvent de bons articles décrivant quelques principes qui semblent basiques mais qui nous améliore grandement la vie !

Comme je l’avais fait pour la série sur le CSS voici une adaptation / traduction d’un article concernant les bonnes pratiques à avoir quand on code pour le web !

Utiliser le doctype Strict

Que l’on soit en HTML4.01 ou en XHTML1.0 il nous est possible de coder en doctype transitional ou strict, prenez tout de suite la bonne habitude de travailler en strict.

Ressources :

• W3C: Recommended DTDs to use in your Web document
• Fix Your Site With the Right DOCTYPE!
• No more Transitional DOCTYPEs, please

Encoder vos caractères spéciaux

On a tendance à utiliser & plutôt que & il en va de même avec les caractères accentués.

Pour n’avoir aucunes surprises avec le rendu de vos textes dans les différents navigateurs utilisé plutôt les versions encodées de ces caractères spéciaux.

Ressources :

• Wikipedia: UTF-8
• A tutorial on character code issues
• The Extended ASCII table

Indenter votre code

Une bonne indentation permet de rendre votre code plus lisible, ca n’a peut être que peu d’importance au moment ou vous écrivez votre code mais si quelques mois plus tard vous devez revenir dessus vous serez bien content de retrouver un code tout beau tout propre !

Une image vaut mieux que un long discour pour illustrer ce propos !

Ressources :

• Clean up your Web pages with HTML TIDY

Votre code Javascript et CSS dans des fichiers à part

Il est plus simple et plus propre de mettre son code Javascript et CSS dans des fichiers séparés de son code HTML, de plus la plupart des éditeurs textes avancés gèrent parfaitement les onglets pour vous permettre d’éditer tous les fichiers correspondant à votre projet.

Code source :

<link rel=”stylesheet” href=”http://beta.chezwanders.info/wp-content/themes/wanders/style.css” type=”text/css” media=”screen” />

Organiser vos tags proprement

En général le titre d’un site est sous la balise <h1> mais est aussi encadré par une balise <a> pour lié ce titre à la page principale du site.

La balise <h1> est une balise de type bloc et la balise <a> est de type inline. Les balises inline ne peuvent normallement pas encadrer de balises bloc, il faudra donc écrire votre titre comme suit :

• <h1><a href=”index.html” >Mon site</a></h1>

plutôt que :

• <a href=”index.html”><h1>Mon site</h1></a>

Eliminer les Divs superficielles

Dans le code suivant on se rend compte que la div ne sert à rien puisque la liste est identifiée par un id.

Ressources :

• Divitis: what it is, and how to cure it.

Utiliser de bonnes conventions de nommage

Vous allez trouver ci dessous le parfait exemple de la chose à ne pas faire !

• <h1>Merci de vous <span class=”gras_rouge”>connecter</span></h1>

En effet dès le premier changement de design de votre page la class “gras_rouge” n’aura plus aucun sens ! Cela parait évident à première vue mais on fait tous souvent cette erreur.

Utiliser CSS pour gérer votre typographie

Dans un menu nous souhaitons mettre les éléments en majuscule, mais comme dans l’exemple précédent nous ne savons pas si ca sera toujours le cas dans un prochain design de le page sur laquelle nous travaillons.

donc au lieu de faire :

• <li><a href=”souspage1.html”>SOUS PAGE 1</a></li>

mettez donc ce qui suit dans votre css :

• li a { text-transform: uppercase; }

Essayer d’avoir un code valide

Veillez à bien fermer vos balises et à mettre tout ce qu’il faut dedans.

• <img src=”monimage.jpg”>

sera valide si vous l’écrivez comme suit :

• <img src=”monimage.jpg” alt=”mon image de moi” />

Ressources :

• The W3C Markup Validation Service
• XHTML-CSS Validator
• Free Site Validator (checks entire site, not just one page)

Rester logique dans votre code

Organiser son code de facon logique peut paraitre simple et à la porté de tout le monde, mais il faut l’avouer on code souvant à l’arrache en ajoutant les éléments dont nous avons besoin juste en dessous de la ou notre pointeur de sourie est dans le fichier source

Ainsi veillez à mettre votre layout en ordre avec par exemple vos div dans l’ordre qui suit :

• Principale
• Haut de page
• Menu
• Contenu
• Pied de page

Vous retrouverez plus facilement vos petits dans votre code et vous gagnerez du temps lors d’éventuelles modifications futures.

Voila c’est tout pour aujourd’hui, ce billet est très très inspiré de cet article de Smashing Magazine, normal c’est une traduction / adaptation pour les anglophobes !!!!

Profil

Flickr

Le grand YAKA !

Visiteurs