HTML Guide de Style
Un code HTML cohérent, propre et soigné facilite la lecture et la compréhension de votre code par les autres.
Voici quelques directives et conseils pour créer un bon code HTML.
Toujours déclarer le type de document
Déclarez toujours le type de document comme la première ligne de votre document.
Le type de document correct pour HTML est :
<!DOCTYPE html> Utiliser des noms d'éléments en minuscules
HTML permet de mélanger des lettres majuscules et minuscules dans les noms d'éléments.
Cependant, nous recommandons d'utiliser des noms d'éléments en minuscules, car :
- Mélanger des noms en majuscules et en minuscules a un mauvais aspect
- Les développeurs utilisent normalement des noms en minuscules
- Les minuscules ont un aspect plus propre
- Les minuscules sont plus faciles à taper
Bon :
<body>
<p>Ceci est un paragraphe.</p>
</body> Mauvais :
<BODY>
<P>Ceci est un paragraphe.</P>
</BODY> Fermer tous les éléments HTML
En HTML, vous n'avez pas à fermer tous les éléments (par exemple, l'élément <p> ).
Cependant, nous recommandons fortement de fermer tous les éléments HTML, comme ceci :
Bon :
<section>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un paragraphe.</p>
</section> Mauvais :
<section>
<p>Ceci est un paragraphe.
<p>Ceci est un paragraphe.
</section> Utiliser des noms d'attributs en minuscules
HTML permet de mélanger des lettres majuscules et minuscules dans les noms d'attributs.
Cependant, nous recommandons d'utiliser des noms d'attributs en minuscules, car :
- Mélanger des noms en majuscules et en minuscules a un mauvais aspect
- Les développeurs utilisent normalement des noms en minuscules
- Les minuscules ont un aspect plus propre
- Les minuscules sont plus faciles à taper
Bon :
<a href="https://www.formation-ti.org/html/">Visitez notre tutoriel HTML</a> Mauvais :
<a HREF="https://www.formation-ti.org/html/">Visitez notre tutoriel HTML</a> Toujours mettre entre guillemets les valeurs d'attributs
HTML permet des valeurs d'attributs sans guillemets.
Cependant, nous recommandons de mettre entre guillemets les valeurs d'attributs, car :
- Les développeurs mettent normalement entre guillemets les valeurs d'attributs
- Les valeurs entre guillemets sont plus faciles à lire
- Vous DEVEZ utiliser des guillemets si la valeur contient des espaces
Bon :
<table class="striped"> Mauvais :
<table class=striped> Très mauvais :
Cela ne fonctionnera pas, car la valeur contient des espaces :
<table class=table striped> Toujours spécifier alt, width et height pour les images
Toujours spécifier l'attribut alt pour les images. Cet attribut est important si l'image ne peut pas être affichée pour une raison quelconque.
De plus, définissez toujours la width et la height des images. Cela réduit le scintillement, car le navigateur peut réserver de l'espace pour l'image avant de la charger.
Bon :
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> Mauvais :
<img src="html5.gif"> Espaces et signes égaux
HTML permet des espaces autour des signes égaux. Cependant, sans espace, c'est plus facile à lire et cela regroupe mieux les entités.
Bon :
<link rel="stylesheet" href="styles.css"> Mauvais :
<link rel = "stylesheet" href = "styles.css"> Évitez les longues lignes de code
Lors de l'utilisation d'un éditeur HTML, il n'est pas pratique de faire défiler à droite et à gauche pour lire le code HTML.
Essayez d'éviter les lignes de code trop longues.
Lignes vides et indentation
Ne pas ajouter de lignes vides, d'espaces ou d'indentations sans raison.
Pour améliorer la lisibilité, ajoutez des lignes vides pour séparer de grands blocs de code ou logiques.
Pour la lisibilité, ajoutez deux espaces d'indentation. N'utilisez pas la touche de tabulation.
Bon :
<body>
<h1>Villes Célèbres</h1>
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon, le centre de la région métropolitaine du Grand Tokyo, et la zone métropolitaine la plus peuplée du monde.</p>
<h2>Londres</h2>
<p>Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni.</p>
<h2>Paris</h2>
<p>Paris est la capitale de la France. La région parisienne est l'un des plus grands centres de population en Europe.</p>
</body> Mauvais :
<body>
<h1>Villes Célèbres</h1>
<h2>Tokyo</h2><p>Tokyo est la capitale du Japon, le centre de la région métropolitaine du Grand Tokyo, et la zone métropolitaine la plus peuplée du monde.</p>
<h2>Londres</h2><p>Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni.</p>
<h2>Paris</h2><p>Paris est la capitale de la France. La région parisienne est l'un des plus grands centres de population en Europe.</p>
</body> Bon exemple de tableau :
<table>
<tr>
<th>Nom</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description de A</td>
</tr>
<tr>
<td>B</td>
<td>Description de B</td>
</tr>
</table> Bon exemple de liste :
<ul>
<li>Londres</li>
<li>Paris</li>
<li>Tokyo</li>
</ul> Ne jamais sauter l'élément <title>
L'élément <title> est requis en HTML.
Le contenu d'un titre de page est très important pour l'optimisation des moteurs de recherche (SEO) ! Le titre de la page est utilisé par les algorithmes des moteurs de recherche pour décider de l'ordre lors de l'affichage des pages dans les résultats de recherche.
L'élément <title> :
- définit un titre dans la barre d'outils du navigateur
- fournit un titre pour la page lorsqu'elle est ajoutée aux favoris
- affiche un titre pour la page dans les résultats des moteurs de recherche
Donc, essayez de rendre le titre aussi précis et significatif que possible :
<title>Guide de Style HTML et Conventions de Codage</title> Omettre <html> et <body> ?
Une page HTML sera valide sans les balises <html> et <body> :
Exemple
<!DOCTYPE html>
<head>
<title>Titre de la Page</title>
</head>
<h1>Ceci est un en-tête</h1>
<p>Ceci est un paragraphe.</p> Cependant, nous recommandons fortement d'ajouter toujours les balises <html> et <body> !
Omettre <body> peut produire des erreurs dans les anciens navigateurs.
Omettre <html> et <body> peut également faire planter les logiciels DOM et XML.
Omettre <head> ?
La balise HTML <head> peut également être omise.
Les navigateurs ajouteront tous les éléments avant <body> , à un élément <head> par défaut.
Exemple
<!DOCTYPE html>
<html>
<title>Titre de la Page</title>
<body>
<h1>Ceci est un en-tête</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html> Cependant, nous recommandons d'utiliser la balise <head> .
Fermer les éléments HTML vides ?
En HTML, il est optionnel de fermer les éléments vides.
Autorisé :
<meta charset="utf-8"> Également autorisé :
<meta charset="utf-8" /> Si vous vous attendez à ce que des logiciels XML/XHTML accèdent à votre page, gardez la barre oblique de fermeture (/), car elle est requise en XML et XHTML.
Ajouter l'attribut lang
Vous devez toujours inclure l'attribut lang à l'intérieur de la balise <html> , pour déclarer la langue de la page Web. Cela est destiné à aider les moteurs de recherche et les navigateurs.
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre de la Page</title>
</head>
<body>
<h1>Ceci est un en-tête</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html> Métadonnées
Pour garantir une interprétation correcte et un bon indexage par les moteurs de recherche, la langue et l'encodage des caractères <meta charset=" charset "> doivent être définis le plus tôt possible dans un document HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la Page</title>
</head> Définir la fenêtre d'affichage
La fenêtre d'affichage est la zone visible d'une page Web pour l'utilisateur. Elle varie selon le dispositif - elle sera plus petite sur un téléphone mobile que sur un écran d'ordinateur.
Vous devez inclure l'élément <meta> suivant dans toutes vos pages Web :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Cela donne des instructions au navigateur sur la façon de contrôler les dimensions et le zoom de la page.
La partie width=device-width définit la largeur de la page pour suivre la largeur de l'écran du dispositif (qui variera en fonction du dispositif).
La partie initial-scale=1.0 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Voici un exemple d'une page Web sans la balise meta viewport, et la même page Web avec la balise meta viewport :
Conseil : Si vous parcourez cette page avec un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessous pour voir la différence.
Commentaires HTML
Les commentaires courts doivent être écrits sur une seule ligne, comme ceci :
<!-- Ceci est un commentaire --> Les commentaires qui s'étendent sur plus d'une ligne doivent être écrits comme ceci :
<!--
Ceci est un exemple de long commentaire. Ceci est un exemple de long commentaire.
Ceci est un exemple de long commentaire. Ceci est un exemple de long commentaire.
--> Les longs commentaires sont plus faciles à observer s'ils sont indentés avec deux espaces.
Utilisation des feuilles de style
Utilisez une syntaxe simple pour lier des feuilles de style (l'attribut type n'est pas nécessaire) :
<link rel="stylesheet" href="styles.css"> De courtes règles CSS peuvent être écrites de manière compressée, comme ceci :
p.intro {font-family:Verdana;font-size:16em;} Les longues règles CSS doivent être écrites sur plusieurs lignes :
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
} - Placez l'accolade d'ouverture sur la même ligne que le sélecteur
- Utilisez un espace avant l'accolade d'ouverture
- Utilisez deux espaces d'indentation
- Utilisez un point-virgule après chaque paire propriété-valeur, y compris la dernière
- N'utilisez des guillemets autour des valeurs que si la valeur contient des espaces
- Placez l'accolade de fermeture sur une nouvelle ligne, sans espaces en tête
Chargement de JavaScript dans HTML
Utilisez une syntaxe simple pour charger des scripts externes (l'attribut type n'est pas nécessaire) :
<script src="myscript.js"> Accéder aux éléments HTML avec JavaScript
Utiliser un code HTML "désordonné" peut entraîner des erreurs JavaScript.
Ces deux instructions JavaScript produiront des résultats différents :
Exemple
getElementById("Demo").innerHTML = "Bonjour";
getElementById("demo").innerHTML = "Bonjour"; Visitez le Guide de Style JavaScript .
Utiliser des noms de fichiers en minuscules
Certains serveurs Web (Apache, Unix) sont sensibles à la casse concernant les noms de fichiers : "london.jpg" ne peut pas être accessible sous "London.jpg".
D'autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse : "london.jpg" peut être accessible sous "London.jpg".
Si vous utilisez un mélange de majuscules et de minuscules, vous devez en être conscient.
Si vous passez d'un serveur insensible à la casse à un serveur sensible à la casse, même de petites erreurs casseront votre site Web !
Pour éviter ces problèmes, utilisez toujours des noms de fichiers en minuscules !
Extensions de fichiers
Les fichiers HTML doivent avoir une extension .html ( .htm est autorisé).
Les fichiers CSS doivent avoir une extension .css .
Les fichiers JavaScript doivent avoir une extension .js .
Différences entre .htm et .html ?
Il n'y a pas de différence entre les extensions de fichiers .htm et .html !
Les deux seront traitées comme HTML par n'importe quel navigateur Web et serveur Web.
Noms de fichiers par défaut
Lorsqu'une URL ne spécifie pas de nom de fichier à la fin (comme "https://www.formation-ti.org/"), le serveur ajoute simplement un nom de fichier par défaut, tel que "index.html", "index.htm", "default.html" ou "default.htm".
Si votre serveur est configuré uniquement avec "index.html" comme nom de fichier par défaut, votre fichier doit être nommé "index.html", et non "default.html".
Cependant, les serveurs peuvent être configurés avec plus d'un nom de fichier par défaut ; généralement, vous pouvez configurer autant de noms de fichiers par défaut que vous le souhaitez.