HTML Guide de style
Un code HTML cohérent, propre et ordonné permet aux autres de lire et de comprendre plus facilement votre code.
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 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 vous recommandons d'utiliser des noms d'éléments en minuscules, car :
- Mélanger les noms en majuscules et en minuscules semble mauvais
- Les développeurs utilisent généralement des noms en minuscules
- Les minuscules semblent plus propres
- Les minuscules sont plus faciles à écrire
Bien:
<body>
<p>This is a paragraph.</p>
</body>
Mauvais :
<BODY>
<P>This is a paragraph.</P>
</BODY>
Fermer tous les éléments HTML
En HTML, vous n'êtes pas obligé de fermer tous les éléments (par exemple, l'élément <p>).
Cependant, nous vous recommandons fortement de fermer tous les éléments HTML comme ceci :
Bien:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Mauvais :
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</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 vous recommandons d'utiliser des noms d'attributs en minuscules, car :
- Mélanger les noms en majuscules et en minuscules semble mauvais
- Les développeurs utilisent généralement des noms en minuscules
- Les minuscules semblent plus propres
- Les minuscules sont plus faciles à écrire
Bien:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Mauvais :
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Toujours citer les valeurs d'attribut
HTML autorise les valeurs d'attribut sans guillemets.
Cependant, nous vous recommandons de citer les valeurs d'attribut, car :
- Les développeurs citent généralement les valeurs d'attribut
- Les valeurs entre guillemets sont plus faciles à lire
- Vous DEVEZ utiliser des guillemets si la valeur contient des espaces
Bien:
<table class="striped">
Mauvais :
<table class=striped>
Très mauvais :
Cela ne fonctionnera pas, car la valeur contient des espaces :
<table class=table striped>
Spécifiez toujours l'alt, la largeur et la hauteur des images
Spécifiez toujours l'attribut alt pour les images. Cet attribut est important si l'image, pour une raison quelconque, ne peut pas être affichée.
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 le chargement.
Bien:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Mauvais :
<img src="html5.gif">
Espaces et signes égal
Le HTML autorise les espaces autour des signes égal. Mais sans espace, il est plus facile à lire et regroupe mieux les entités.
Bien:
<link rel="stylesheet" href="styles.css">
Mauvais :
<link rel = "stylesheet" href = "styles.css">
Évitez les longues lignes de code
Lorsque vous utilisez un éditeur HTML, il n'est PAS pratique de faire défiler vers la droite et la gauche pour lire le code HTML.
Essayez d'éviter les lignes de code trop longues.
Lignes vides et indentation
N'ajoutez pas de lignes vides, d'espaces ou d'indentations sans raison.
Pour plus de lisibilité, ajoutez des lignes vides pour séparer les blocs de code volumineux ou logiques.
Pour plus de lisibilité, ajoutez deux espaces d'indentation. N'utilisez pas la touche de tabulation.
Bien:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Mauvais :
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Bon exemple de table :
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Bon exemple de liste :
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Ne sautez jamais l'élément <title>
L'élément <title> est obligatoire en HTML.
Le contenu du titre d’une page est crucial 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 la liste des pages dans les résultats de recherche.
L'élément <title> :
- définir un titre dans la barre d'outils du navigateur
- fournit un titre à la page lorsqu'elle est ajoutée aux favoris
- affiche un titre pour la page dans les résultats des moteurs de recherche
Essayez donc 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 validée sans les balises <html> et <body> :
Exemple
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Try it Yourself »
Cependant, nous vous recommandons fortement de toujours ajouter 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>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Cependant, nous vous recommandons d'utiliser la balise <head>.
Fermer les éléments HTML vides ?
En HTML, il est facultatif de fermer les éléments vides.
Autorisé :
<meta charset="utf-8">
Également autorisé :
<meta charset="utf-8" />
Si vous vous attendez à ce qu'un logiciel XML/XHTML accède à votre page, conservez la barre oblique de fermeture (/), car elle est obligatoire 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. Ceci est destiné à aider les moteurs de recherche et les navigateurs.
Exemple
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Métadonnées
Pour garantir une interprétation correcte et une indexation correcte des moteurs de recherche, la langue et le codage des caractères <meta charset="charset"> doivent être définis comme suit : le plus tôt possible dans un document HTML :
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Définition de la fenêtre
La fenêtre d'affichage est la zone visible d'une page Web par l'utilisateur. Cela varie selon l'appareil : il sera plus petit 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 au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page.
La partie width=device-width définit la largeur de la page pour qu'elle suive la largeur de l'écran de l'appareil (qui varie en fonction de l'appareil).
La partie initial-scale=1.0 définit le niveau de zoom initial lors du premier chargement de la page par le navigateur.
Voici un exemple d'une page Web sans la balise méta viewport, et de la même page Web avec la balise méta viewport :
Astuce : 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.
HTML Commentaires
Les courts commentaires doivent être rédigés sur une seule ligne, comme ceci :
<!-- Ceci est un commentaire -->
Les commentaires qui s'étendent sur plus d'une ligne doivent être rédigés comme ceci :
<!--
Ceci est un long exemple de commentaire. Ceci est un long exemple de commentaire.
Ceci est un long exemple de commentaire. Ceci est un long exemple de commentaire.
-->
Les longs commentaires sont plus faciles à observer s’ils sont indentés de deux espaces.
Utiliser des feuilles de style
Utilisez une syntaxe simple pour créer des liens vers 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 compressées comme ceci :
p.intro {font-family:Verdana;font-size:16em;}
Les règles CSS longues doivent être écrites sur plusieurs lignes :
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- Placez le crochet ouvrant sur la même ligne que le sélecteur
- Utilisez un espace avant le crochet ouvrant
- 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 le crochet fermant sur une nouvelle ligne, sans espaces de début
Chargement de JavaScript en 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
L'utilisation d'un code HTML « désordonné » peut entraîner des erreurs JavaScript.
Ces deux instructions JavaScript produiront différents résultats :
Exemple
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
Try it Yourself »
Consultez 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" n'est pas accessible, car "London.jpg".
Les autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse : "london.jpg" est accessible en tant que "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 briseront votre site !
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 aucune différence entre les extensions de fichier .htm et .html !
Les deux seront traités comme du 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.w3schools.com/"), 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 plusieurs noms de fichiers par défaut ; vous pouvez généralement définir autant de noms de fichiers par défaut que vous le souhaitez.
