Editions ENI Livres | Vidéos | e-Formations
Les bonnes pratiques
Séparer le contenu de la mise en forme
Nous l’avons vu précédemment, à la sortie du HTML 4, le W3C a proposé les CSS 1. L’objectif était clair : séparer le contenu de la mise en forme et de la mise en page. Chaque langage a son objectif bien défini : le HTML décrit la structure et le contenu des pages web et les CSS permettent de les mettre en forme et en page.
En travaillant de la sorte, vous n’aurez que des avantages :
-
bien séparer les deux langages,
-
avoir un code plus propre, plus rigoureux et plus lisible,
-
séparer la gestion du contenu de la mise en forme et de la mise en page,
-
centraliser la mise en forme et la mise en page en CSS,
-
homogénéiser la mise en forme et la mise en page en CSS,
-
avoir des mises à jour des CSS facilitées et rapides.
Dans la création des pages web, il faudra donc « éviter », autant que faire se peut, de « mélanger » la structure, le contenu et la mise en forme, le code HTML et le code CSS.
Utiliser une structure sémantique
Le HTML5 est un langage qui est parfaitement sémantique. Chaque élément HTML est fait pour contenir un type de contenu. Pour avoir un code propre, lisible, valide et accessible, vous devez respecter cette structure sémantique.
Voici quelques exemples de bonnes utilisations :
-
L’élément <p> est fait pour contenir du texte courant dans des paragraphes.
-
L’élément <h1> est fait pour afficher des titres de premier niveau, pour les titres les plus importants des pages.
-
L’élément <dl> est fait pour concevoir des listes de définitions.
Dans votre code, utilisez à bon escient les éléments HTML et utilisez-les dans le cadre de leur définition.
Optimiser le code et organiser vos fichiers
En tant que développeur, vous savez qu’il faut optimiser et bien organiser votre code. Voici quelques conseils de bon sens :
-
Dans vos pages web, veillez à bien indenter les lignes de code. Cela sera toujours plus facile à reprendre par la suite, que ce soit pour vous ou une autre personne.
-
Les commentaires sont indispensables pour bien expliquer votre code. À nouveau, c’est vous faciliter la tâche ou celles des personnes qui reprendront vos pages plus tard.
-
Essayez de nommer les sélecteurs CSS de manière intelligible et logique. Il est toujours plus facile et rapide de reprendre du code bien créé.
-
Pour l’organisation des fichiers, prenez la bonne habitude de créer des dossiers par type de fichier utilisé dans vos développements. Il est très classique d’avoir un dossier css pour tous les fichiers feuilles de style CSS, un dossier js pour tous les fichiers JavaScript et un dossier img pour les médias de type images.
-
Et bien sûr, faites régulièrement des sauvegardes et utilisez, pourquoi pas, un outil de gestion des versions.
Un exemple d’une page bien formée
Nous allons terminer ce chapitre en étudiant une courte et très simple page web « mal codée » et voir ce qu’il faut faire.
Voici le code de la page :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.titre {
font-size: 16pt;
font-weight: bold;
}
</style>
</head>
<body>
<p class="titre">Maecenas faucibus mollis interdum</p>
<p>Curabitur blandit tempus porttitor...</p>
<p><center>Aenean eu leo quam. Pellentesque...</center></p>
Cras mattis consectetur purus sit amet...
<p> </p><p> </p>
<h2>Nullam quis risus eget urna mollis ornare vel eu leo</h2>
<p>Sed posuere consectetur est at lobortis...</p>
<table>
<tr>
<td><img src="tigre.jpg" /></td>
<td><img src="suricate.jpg" /></td>
<td><img src="loutre.jpg" /></td>
</tr>
</table>
</body>
</html> Voyons maintenant pourquoi cette page peut être qualifiée de « pas correctement codée ».
-
Il n’y a aucune indentation. Le code est donc peu lisible, mal organisé et mal structuré.
-
Dans l’élément <head>, il n’y a pas l’élément <title> qui est pourtant indispensable.
-
Le premier titre de la page est placé dans un élément <p>, fait pour contenir du texte courant dans un paragraphe.
-
Pour ce titre, la mise en forme est faite en CSS (taille de caractères et mise en gras). Il fallait utiliser l’élément sémantique <h1>.
-
Le deuxième paragraphe utilise l’élément HTML <center> qui est obsolète.
-
Le troisième paragraphe de texte n’est placé dans aucun conteneur. Il ne peut...
Valider le code de vos pages
Il est important de valider le code HTML de vos pages. En effet, vos clients s’attendent à recevoir un site ou une application web parfaitement fonctionnelle, sans erreur pouvant détériorer son utilisation. Et n’oubliez pas que les assistants vocaux pour les personnes malentendantes se basent sur des pages valides.
Pour toutes ces raisons, vous pouvez utiliser des validateurs de code. Certains éditeurs de code en intègrent un nativement, d’autres nécessitent une installation d’une extension.
Mais vous pouvez aussi utiliser les validateurs en ligne, comme celui du W3C qui est le plus rigoureux. Voici son URL : https://validator.w3.org.
Vous pouvez choisir de valider une page HTML publiée (onglet Validate by URI), d’importer une de vos pages (onglet Validate by File Upload), ou de copier/coller du code de votre page (onglet Validate by Direct Input).