Spécifications de codage HTML Bootstrap


Syntaxe

  • Utilisez deux espaces au lieu de tabulations - c'est le seul moyen de garantir la cohérence dans tous les environnements de présentation.

  • Les éléments imbriqués doivent être mis en retrait une fois (c'est-à-dire deux espaces).

  • Pour les définitions d'attributs, veillez à utiliser des guillemets doubles et jamais des guillemets simples.

  • N'ajoutez pas de barre oblique finale à un élément à fermeture automatique - la spécification HTML5 indique explicitement que cela est facultatif.

  • N'omettez pas la balise de fermeture facultative (par exemple, </li> ou </body>).

Exemple :

<!DOCTYPE html>
<html>
<head>
<title> Titre de la page</title>
</head>
<body>
<img src="../style/images/company-logo.png" alt="Entreprise">
<h1 class="hello-world">Bonjour tout le monde !</h1>
</body>
</html>

HTML5 doctype

ajoute une déclaration de mode standard à la première ligne de chaque page HTML pour garantir une présentation cohérente dans chaque navigateur.

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 le bon langue du document. Cela aidera les outils de synthèse vocale à déterminer la prononciation à utiliser, les outils de traduction à déterminer les règles à suivre lors de la traduction, etc.

Plus d'informations sur l'attribut lang peuvent être trouvées dans cette spécification.

La liste des codes de langue est répertoriée ici.

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

Mode de compatibilité IE

IE prend en charge la balise <meta> spécifique pour déterminer la version d'IE qui doit être utilisée pour dessiner la page actuelle. Sauf en cas de besoins particuliers importants, il est préférable de le définir sur le mode Edge pour indiquer à IE d'adopter le dernier mode qu'il prend en charge.

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

Codage des caractères

En déclarant explicitement le codage des caractères, il peut garantir que le navigateur peut déterminer rapidement et facilement comment le contenu de la page est rendu. L'avantage est que vous pouvez éviter d'utiliser des entités de caractères en HTML, afin que tout soit cohérent avec l'encodage du document (généralement l'encodage UTF-8).

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

Introduire les fichiers CSS et JavaScript

Selon la spécification HTML5, il n'est généralement pas nécessaire de spécifier l'attribut type lors de l'introduction de fichiers CSS et JavaScript, car text/css et text/javascript sont respectivement leurs valeurs par défaut.

Liens de spécifications HTML5

  • Utilisation du lien

  • Utilisation du style

  • Utilisation script

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

<!-- CSS dans le document -->
<style>
/* ... */
</style>

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

La praticité est reine

Comme autant que possible Suivez les normes et la sémantique HTML, mais ne sacrifiez pas l'aspect pratique. Essayez d'utiliser le moins de balises et de maintenir la complexité au minimum à tout moment.

Ordre des attributs

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

  • class

  • id, name

  • data-*

  • src, for, type, href

  • title, alt

  • aria-*, role

classe est utilisée pour identifier les composants hautement réutilisables, elle doit donc être classée en premier. L'identifiant est utilisé pour identifier un composant spécifique et doit être utilisé avec prudence (par exemple, les signets dans une page), il vient donc en deuxième position.

<a class="..." id="..." data-modal="toggle" href="#">
Exemple de lien
< /a>

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

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

Attributs booléens

Les attributs booléens peuvent être déclarés sans attribuer de valeur. La spécification XHTML exige qu'une valeur lui soit attribuée, mais pas la spécification HTML5.

Pour plus d'informations, veuillez vous référer à la section WhatWG sur les attributs booléens :

Si l'attribut booléen de l'élément a une valeur, il est vrai, s'il n'a pas de valeur, il est faux .

Si doit se voir attribuer une valeur, veuillez vous référer à la spécification WhatWG :

Si l'attribut existe, sa valeur doit être une chaîne vide ou [...] attribut Standardisez le nom et n'ajoutez pas d'espaces de début ou de fin.

Pour faire simple, il n'est pas nécessaire d'attribuer une valeur.

<input type="text" désactivé>

<input type="checkbox" value="1" coché>

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

Réduire le nombre de balises

Écrire HTML Lors du codage, essayez d'éviter les éléments parents redondants. Plusieurs fois, cela nécessite une itération et une refactorisation pour y parvenir. Veuillez regarder le cas suivant :

<!-- Pas si génial -->
<span class="avatar">
<img src=" ..">
</span>

<!-- Mieux -->
<img class="avatar" src="...">

Balises générées par JavaScript

Les balises générées via JavaScript rendent le contenu difficile à trouver, à modifier et réduisent les performances. Évitez-le quand vous le pouvez.