Guide de style HTML
Un code HTML cohérent, propre et ordonné permet aux autres de lire et de comprendre plus facilement votre code.
Voici quelques lignes directrices et conseils pour créer un bon code HTML.
Toujours déclarer le type de document
Déclarez toujours le type de document sur 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 vous recommandons d'utiliser des noms d'éléments en minuscules, car :
- Mélanger des noms en majuscules et en minuscules semble mauvais
- Les développeurs utilisent normalement des noms en minuscules
- Les minuscules semblent plus propres
- Les minuscules sont plus faciles à écrire
Bon:
<body>
<p>This is a paragraph.</p>
</body>Mal:
<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' <p>élément).
Cependant, nous vous recommandons fortement de fermer tous les éléments HTML, comme ceci :
Bon:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Mal:
<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 des noms en majuscules et en minuscules semble mauvais
- Les développeurs utilisent normalement des noms en minuscules
- Apparence plus propre en minuscules
- Les minuscules sont plus faciles à écrire
Bon:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Mal:
<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 normalement les valeurs d'attribut
- Les valeurs entre guillemets sont plus faciles à lire
- Vous DEVEZ utiliser des guillemets si la valeur contient des espaces
Bon:
<table
class="striped">Mal:
<table class=striped>Très mauvais:
Cela ne fonctionnera pas, car la valeur contient des espaces :
<table class=table striped>Toujours spécifier alt, largeur et hauteur pour les images
Spécifiez toujours l' altattribut pour les images. Cet attribut est important si l'image ne peut pas être affichée pour une raison quelconque.
De même, définissez toujours le widthet
heightdes images. Cela réduit le scintillement, car le navigateur peut réserver de l'espace pour l'image avant le chargement.
Bon:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Mal:
<img
src="html5.gif">Espaces et signes égal
HTML autorise les espaces autour des signes égal. Mais sans espace est plus facile à lire et regroupe mieux les entités.
Bon:
<link rel="stylesheet" href="styles.css">Mal:
<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 vers 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.
Bon:
<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.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
Mal:
<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.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Bon exemple de tableau :
<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' <title>élément est obligatoire 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 la liste des pages dans les résultats de recherche.
L' <title>élément :
- définit un titre dans la barre d'outils du navigateur
- donne 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
Alors, essayez de rendre le titre aussi précis et significatif que possible :
<title>HTML
Style Guide and Coding Conventions</title>
Omettre <html> et <body> ?
Une page HTML validera 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>
Cependant, nous vous recommandons fortement de toujours ajouter les balises <html>et
!<body>
L'omission <body>peut produire des erreurs dans les navigateurs plus anciens.
Omettre <html>et <body>
peut également planter les logiciels DOM et XML.
Omettre <tête> ?
La balise HTML <head> peut également être omise.
Les navigateurs ajouteront tous les éléments avant , à un
élément <body>par défaut .<head>
Exemple
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Cependant, nous vous recommandons d'utiliser la <head>balise.
Fermer les éléments HTML vides ?
En HTML, il est facultatif de fermer les éléments vides.
Permis:
<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 fermante (/), car elle est obligatoire dans XML et XHTML.
Ajouter l'attribut lang
Vous devez toujours inclure l' langattribut à l'intérieur de la <html>balise, 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>
Métadonnées
Pour garantir une interprétation correcte et une indexation correcte des moteurs de recherche, la langue et l'encodage des caractères doivent être définis le plus tôt possible dans un document HTML :<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Définition de la fenêtre d'affichage
La fenêtre d'affichage est la zone visible par l'utilisateur d'une page Web. Cela varie selon l'appareil - il sera plus petit sur un téléphone portable que sur un écran d'ordinateur.
Vous devez inclure l' <meta>élément 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 width=device-widthpartie définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui varie selon l'appareil).
La initial-scale=1.0partie définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Voici un exemple de page Web sans la balise Meta Viewport et de la même page Web avec la balise Meta Viewport :
Astuce : Si vous naviguez sur 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 :
<!-- This is a comment -->
Les commentaires qui s'étendent sur plus d'une ligne doivent être écrits comme ceci :
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
Les longs commentaires sont plus faciles à observer s'ils sont mis en retrait avec deux espaces.
Utilisation des feuilles de style
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.