Guide de style et conventions de code (5) HTML

Conventions de code HTML

Les développeurs web ne savent souvent pas quel style de code et quelle syntaxe utiliser dans HTML.

Entre 2000 et 2010, de nombreux développeurs web sont passés de HTML à XHTML.

Avec XHTML, les développeurs doivent écrire un code 'bien formaté' efficace.

HTML5 est plus permissif lors de la validation du code.

Avec HTML5, vous devez créer le vôtreMeilleures pratiques, guides de style et conventions de code.

Intelligent et avec une garantie future

L'utilisation logique des styles rend les autres plus faciles à comprendre et à utiliser votre HTML.

À l'avenir, des programmes tels que les lecteurs XML pourraient peut-être devoir lire votre HTML.

En utilisant une syntaxe bien formatée 'approximativement XHTML', vous pouvez être plus intelligent.

Commentaires :Gardez toujours vos styles intelligents, bien organisés, purs et bien formatés.

Utilisez le type de document correct

Déclarez toujours le type de document en premier sur la première ligne du document :

<!DOCTYPE html>

Si vous avez toujours utilisé des balises en minuscules, vous pouvez utiliser :

<!doctype html>

Utilisez des noms d'éléments en minuscules

HTML5 permet l'utilisation de lettres de大小写混合 dans les noms des éléments.

Nous recommandons d'utiliser des noms d'éléments en minuscules :

  • Les noms de大小写混合 pas bons
  • Les développeurs ont l'habitude d'utiliser des noms en minuscules (par exemple dans XHTML)
  • Les minuscules sont plus pures
  • Les minuscules sont plus faciles à écrire

Pas très bien :

<SECTION> 
  <p>Ceci est un paragraphe.</p>
</SECTION>

Très mauvais :

<Section> 
  <p>Ceci est un paragraphe.</p>
</SECTION>

Pas mal :

<section> 
  <p>Ceci est un paragraphe.</p>

Fermez tous les éléments HTML

Dans HTML5, vous n'êtes pas obligé de fermer tous les éléments (par exemple, l'élément <p>).

Nous recommandons de fermer tous les éléments HTML :

Cela a l'air mal :

<section>
  <p>Ceci est un paragraphe.
  <p>Ceci est un paragraphe.

Cela a l'air bien :

<section>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un paragraphe.</p>

</section>

Fermeture des éléments HTML vides

Dans HTML5, la fermeture des éléments vides est optionnelle.

Cela est autorisé :

Cela est également autorisé :

<meta charset="utf-8" />

Le slash (/) est obligatoire dans XHTML et XML.

Si vous attendez que des logiciels XML accèdent à votre page, il est une bonne idée de maintenir cette habitude.

Utilisez des noms d'attributs en minuscules

HTML5 permet des noms d'attributs en majuscules et en minuscules mélangés.

Nous recommandons d'utiliser des noms d'attributs en minuscules :

  • Les noms d'attributs mélangés ne sont pas bons
  • Les développeurs ont l'habitude d'utiliser des noms d'attributs en minuscules (par exemple dans XHTML)
  • Les noms d'attributs en minuscules sont plus purs dans certains cas
  • Les noms d'attributs en minuscules sont plus faciles à écrire

Cela a l'air mal :

<div CLASS="menu">

Cela a l'air bien :

<div class="menu">

Valeurs d'attributs avec guillemets

HTML5 permet des valeurs d'attributs sans guillemets.

Nous recommandons d'ajouter des guillemets aux valeurs des attributs :

  • Si la valeur de l'attribut contient une valeur, il est nécessaire d'utiliser des guillemets
  • Les styles mélangés sont absolument mauvais
  • Les valeurs entre guillemets sont plus faciles à lire

Cette valeur de l'attribut est invalide car elle contient des espaces :

<table class=table striped>

C'est valable :

<table class="table striped">

Attribut nécessaire

Utilisez toujours l'image alt Attributs. Important lorsque l'image ne peut pas être affichée.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Définissez toujours la taille de l'image. Cela réduit les clignotements, car le navigateur réserve de l'espace pour l'image avant son chargement.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Espaces et égalité

Les espaces autour de l'égalité sont légaux :

<link rel = "stylesheet" href = "styles.css">

Mais l'absence d'espaces est plus facile à lire, Mais l'absence d'espaces est plus facile à lire, et regroupe mieux les entités ensemble :

<link rel="stylesheet" href="styles.css">

Éviter les lignes de code longues

Il est très inconfortable de lire le code HTML en utilisant un éditeur HTML en glissant à droite et à gauche.

Essayez de ne pas dépasser 80 caractères par ligne de code.

Lignes vides et indentation

Ne pas ajouter de lignes vides sans raison.

Pour améliorer la lisibilité, ajoutez des lignes vides pour séparer les grands ou les blocs de code logique.

Pour améliorer la lisibilité, augmentez l'indentation de deux espaces. Ne pas utiliser de tabulations.

Ne pas utiliser de lignes vides et d'indentation inutiles. Il n'est pas nécessaire d'utiliser des lignes vides entre des éléments courts et pertinents, ni d'indentation pour chaque élément :

Inutile :

<body>
  <h1>Villes célèbres</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo est la capitale du Japon, le centre de la grande région de Tokyo,
    et la plus grande aire métropolitaine peuplée au monde.
    C'est le siège du gouvernement japonais et du Palais impérial,
    et le domicile de la famille impériale japonaise.
  </p>
</body>

Meilleur :

<body>
<h1>Villes célèbres</h1>
<h2>Tokyo</h2>
<p>
Tokyo est la capitale du Japon, le centre de la grande région de Tokyo,
et la plus grande aire métropolitaine peuplée au monde.
C'est le siège du gouvernement japonais et du Palais impérial,
et le domicile de la famille impériale japonaise.
</p>
</body>

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 de B</td>
  <tr>
</table>

Exemple de liste :

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Omettre <html> et <body> ?

Dans la norme HTML5, les balises <html> et <body> peuvent être omises.

Le code suivant est validé en tant que HTML5 :

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>

Essayez-le vous-même

Nous ne recommandons pas d'omettre les balises <html> et <body>.

L'élément <html> est l'élément racine du texte. C'est l'endroit idéal pour spécifier la langue de la page.

<!DOCTYPE html>
<html lang="en-US">

Pour les applications accessibles (lecteurs d'écran) et les moteurs de recherche, déclarer la langue est important.

Omettre <html> ou <body> peut faire crasher les logiciels DOM et XML.

Omettre <body> peut entraîner des erreurs dans les navigateurs anciens (IE9).

Omettre <head> ?

Dans la norme HTML5, l'étiquette <head> peut également être omise.

Par défaut, le navigateur ajoute tous les éléments avant <body> à l'élément <head> par défaut.

En omettant l'étiquette <head>, vous pouvez réduire la complexité de l'HTML :

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>

Essayez-le vous-même

Commentaires :Pour les développeurs web, l'omission de balises est inconnue. La création de règles prend du temps.

Métadonnées

L'élément <title> est obligatoire dans HTML5. Essayez de créer des titres significatifs.

<title>HTML5 Syntax and Coding Style</title>

Pour assurer une interprétation appropriée et un index de recherche correct, il est préférable de définir tôt dans le document la langue et l'encodage des caractères :

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

Commentaire HTML

Les commentaires courts devraient être écrits sur une ligne, avec un espace après --> et avant --> :

<!-- This is a comment -->

Les commentaires longs, qui s'étendent sur plusieurs lignes, devraient être écrits sur des lignes indépendantes avec <!-- et --> :

<!-- 
  Ceci est un exemple de commentaire long. C'est un exemple de commentaire long. C'est encore un exemple de commentaire long.
  Ceci est un exemple de commentaire long. C'est un exemple de commentaire long. C'est encore un exemple de commentaire long.
-->

Les commentaires longs sont plus faciles à observer s'ils sont retraités de deux espaces.

Feuilles de style

Utilisez une syntaxe simple pour lier les feuilles de style (l'attribut type n'est pas nécessaire) :

<link rel="stylesheet" href="styles.css">

Les règles courtes peuvent être compressées en une ligne, comme ceci :

p.into {font-family:"Verdana"; font-size:16em;}

Les règles longues devraient être divisées en plusieurs lignes :

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Placer l'accolade ouvrante et le sélecteur sur la même ligne
  • Utiliser un espace avant l'accolade ouvrante
  • Utiliser un retrait de deux caractères
  • Utiliser un deux-points suivi d'un espace entre chaque attribut et sa valeur
  • Utiliser un espace après chaque virgule ou point-virgule
  • Utiliser un point-virgule après chaque paire de valeur d'attribut (y compris la dernière)
  • Utiliser des guillemets pour encadrer la valeur uniquement si elle contient des espaces
  • Placer le parenthèse fermante sur une nouvelle ligne, sans espace précédent
  • Éviter d'avoir plus de 80 caractères par ligne

Commentaires :Ajouter un espace après une virgule ou un point-virgule est une règle universelle pour tous les types d'écriture.

Charger 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 via JavaScript

Les conséquences de l'utilisation de styles HTML 'non soignés' peuvent entraîner des erreurs JavaScript.

Ces deux instructions JavaScript produisent des résultats différents :

var obj = getElementById("Demo")
var obj = getElementById("demo")

Essayez-le vous-même

Si possible, utilisez les mêmes conventions de nommage dans HTML (que JavaScript).

Veuillez consulter les directives de style JavaScript.

Utilisez des noms de fichiers en minuscules

La plupart des serveurs web (Apache, Unix) sont sensibles à la casse des noms de fichiers :

Il n'est pas possible d'accéder à London.jpg via london.jpg.

D'autres serveurs web (Microsoft, IIS) sont insensibles à la casse :

Il est possible d'accéder à London.jpg via london.jpg ou London.jpg.

Si vous utilisez une casse mixte, vous devez maintenir une grande cohérence.

Si vous passez d'un serveur insensible à la casse à un serveur sensible à la casse, ces petites erreurs endommageront votre site.

Pour éviter ces problèmes, utilisez toujours des noms de fichiers en minuscules (si possible).

Extension de fichier

Les noms de fichiers HTML doivent utiliser l'extension .html(au lieu de .htm)

Les fichiers CSS doivent utiliser l'extension .css.

Les fichiers JavaScript doivent utiliser l'extension .js.