Normes de codage HTML Bootstrap

Syntaxe

  • Utilisez deux espaces au lieu de tabulations -- c'est le seul moyen de garantir un rendu cohérent dans tous les environnements.
  • Les éléments imbriqués doivent être indentés une fois (soit deux espaces).
  • Pour les définitions d'attributs, veillez à utiliser systématiquement des guillemets doubles, jamais des guillemets simples.
  • N'ajoutez pas de barre oblique finale à la fin des éléments auto-fermants --la spécification HTML5déclare explicitement que cela est facultatif.
  • N'omettez pas les balises de fermeture facultatives (par ex.,</li>ou</body>）。

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png.html" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

Doctype HTML5

Ajoutez une déclaration de mode standard comme première ligne de chaque page HTML, afin de garantir un rendu cohérent dans tous les navigateurs.

Exemple :

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Attribut de langue

Selon la spécification HTML5 :

Il est fortement recommandé de spécifier l'attribut lang pour l'élément racine html, afin de définir la langue correcte du document. Cela aidera les outils de synthèse vocale à déterminer la prononciation qu'ils doivent utiliser, aidera les outils de traduction à déterminer les règles qu'ils doivent suivre lors de la traduction, etc.

Une liste est fournie icide tableaux de codes de langue。

<html lang="zh">
  <!-- ... -->
</html>

Mode de compatibilité IE

IE prend en charge l'utilisation d'un mode spécifique<meta>balise pour déterminer quelle version d'IE doit être utilisée pour afficher la page actuelle. Sauf exigences spéciales fortes, il est préférable de la définir suredge mode, indiquant ainsi à IE d'utiliser le mode le plus récent qu'il prend en charge.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Encodage des caractères

En déclarant explicitement l'encodage des caractères, vous pouvez garantir que les navigateurs déterminent rapidement et facilement comment afficher le contenu de la page. L'avantage est que vous pouvez éviter d'utiliser le balisage des entités de caractères en HTML, en gardant tout cohérent avec l'encodage du document (généralement UTF-8).

<head>
  <meta charset="UTF-8">
</head>

Inclusion des fichiers CSS et JavaScript

Selon la spécification HTML5, lors de l'inclusion de fichiers CSS et JavaScript, il n'est généralement pas nécessaire de spécifier l'typeattribut, cartext/cssettext/javascriptsont leurs valeurs par défaut respectives.

Liens vers la spécification HTML5

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css.html">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js.html"></script>

Le pragmatisme est roi

Essayez de respecter les normes et la sémantique HTML, mais ne sacrifiez pas la praticité pour y parvenir. Essayez toujours d'utiliser le moins de balises possible et de maintenir la plus faible complexité.

Ordre des attributs

Les attributs HTML doivent être disposés dans l'ordre indiqué ci-dessous afin de garantir la lisibilité du code.

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class est utilisé pour identifier des composants hautement réutilisables, il doit donc venir en premier. id est utilisé pour identifier des composants spécifiques et doit être utilisé avec prudence (par exemple, les signets de page), il vient donc en deuxième.

<a class="..." id="..." data-modal="toggle" href="../index.html">
  Example link
</a>

<input class="form-control" type="text">

<img src="....html" alt="...">

Attributs booléens

Les attributs booléens peuvent être déclarés sans valeur. La spécification XHTML exige qu'ils aient une valeur, mais la spécification HTML5 ne l'exige pas.

Pour plus d'informations, veuillez vous référer à la sectionWhatWG sur les attributs booléens：

Un attribut booléen sur un élément est vrai s'il est présent, et faux s'il est absent.

Si vous avezvraimentbesoin d'attribuer une valeur, veuillez vous référer à la spécification WhatWG :

Si l'attribut est présent, sa valeur doit être soit la chaîne vide, soit [...] le nom canonique de l'attribut, sans espace blanc au début ou à la fin.

En bref, il n'est pas nécessaire d'attribuer une valeur.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Réduire le nombre de balises

Lors de l'écriture de code HTML, évitez autant que possible les éléments parents superflus. Dans de nombreux cas, cela nécessite des itérations et une refactorisation. Voir l'exemple ci-dessous :

<!-- Not so great -->
<span class="avatar">
  <img src="....html">
</span>

<!-- Better -->
<img class="avatar" src="....html">

Balises générées par JavaScript

Les balises générées via JavaScript rendent le contenu plus difficile à trouver et à modifier, et réduisent les performances. Évitez-les dans la mesure du possible.

Autres extensions