Conventions de codage HTML

De nombreux développeurs Web connaissent très peu les conventions de codage HTML.

Entre 2000 et 2010, de nombreux développeurs Web sont passés du HTML au XHTML.

En utilisant XHTML, les développeurs ont progressivement développé de meilleures normes d'écriture HTML.

Pour HTML5, nous devrions élaborer de meilleures normes de code. Ce qui suit fournit plusieurs suggestions standard.

Utilisez le bon type de document

La déclaration du type de document se trouve sur la première ligne du document HTML :

Si vous souhaitez utiliser les minuscules comme les autres balises, vous pouvez utiliser le code suivant :

Utiliser les noms d'éléments en minuscules

Les noms d'éléments HTML5 peuvent utiliser des lettres majuscules et minuscules.

Utilisez des lettres minuscules recommandées :

Le style mixte majuscules et minuscules est très mauvais.

Les développeurs utilisent généralement des minuscules (similaires au XHTML).

Le style minuscule semble plus rafraîchissant.

Les lettres minuscules sont faciles à écrire.

Déconseillé :

 
这是一个段落。
 

Très mauvais :

 
这是一个段落。
 

Recommandé :

 
这是一个段落。
 

Fermez tous les éléments HTML

En HTML5, vous n'êtes pas obligé de fermer tous les éléments (tels que les éléments

), mais nous vous recommandons d'ajouter une balise de fermeture à chaque élément.

Déconseillé :

 
这是一个段落。 
这是一个段落。 

Recommandé :

 
这是一个段落。
 
这是一个段落。
 

Fermer les éléments HTML vides

En HTML5, les éléments HTML vides n'ont pas besoin d'être fermés :

On peut écrire comme ceci :

On peut aussi écrire comme ceci :

Dans XHTML La barre oblique (/) est obligatoire en XML.

L'utilisation de ce style est idéale si vous vous attendez à ce qu'un logiciel XML utilise votre page.

Utiliser les noms d'attributs en minuscules

Les noms d'attributs HTML5 permettent l'utilisation de lettres majuscules et minuscules.

Nous vous recommandons d'utiliser des lettres minuscules pour les noms d'attributs :

C'est une très mauvaise habitude d'utiliser des lettres majuscules en même temps.

Les développeurs utilisent généralement des minuscules (similaires au XHTML).

Le style minuscule semble plus rafraîchissant.

Les lettres minuscules sont faciles à écrire.

Déconseillé :

Recommandé :

Valeur de l'attribut

Les valeurs d'attribut HTML5 n'ont pas besoin de guillemets.

Nous vous recommandons d'utiliser des guillemets pour les valeurs d'attribut :

Si la valeur d'attribut contient des espaces, vous devez utiliser des guillemets.

Le mélange des styles n'est pas recommandé, il est recommandé d'unifier le style.

Utilisez des guillemets pour les valeurs d'attribut afin de les rendre plus faciles à lire.

Les valeurs d'attribut d'instance suivantes contiennent des espaces et n'utilisent pas de guillemets, elles ne fonctionneront donc pas :

Ce qui suit utilise des guillemets doubles, ce qui est correct pour :

Attributs de l'image

Les images utilisent généralement l'attribut alt. Lorsque l'image ne peut pas être affichée, elle peut remplacer l'affichage de l'image.

Définissez la taille de l'image et réservez l'espace spécifié lors du chargement pour réduire le scintillement.

Espaces et signe égal

Vous pouvez utiliser des espaces avant et après le signe égal.

Mais nous vous recommandons d'utiliser moins d'espaces :

Évitez une ligne de code trop longue

Lorsque vous utilisez l'éditeur HTML, il est peu pratique de faire défiler le code vers la gauche et la droite.

Gardez chaque ligne de code à moins de 80 caractères.

Lignes vierges et indentation

N'ajoutez pas de lignes vides sans raison.

Ajoutez des lignes vides à chaque bloc fonctionnel logique pour faciliter la lecture.

Utilisez deux espaces pour l'indentation, TAB n'est pas recommandé.

N'utilisez pas de lignes vides inutiles ou d'indentations entre des codes plus courts.

Lignes vides et retraits inutiles :

 
相思
 
HTML
 
 红豆生南国，春来发几枝。 愿君多采撷，此物最相思。 
 

Recommandé :

 
相思
 
 
红豆生南国，春来发几枝。 愿君多采撷，此物最相思。
 

Exemple de tableau :

Name	Description
A	Description of A
B	Description of B

Exemple de liste :

 
London
 
Paris
 
Tokyo
 

Omettre < ;html> et ?

En HTML5 standard, les balises

La documentation HTML5 suivante est correcte :

Exemple :

   
 
标题
 
段落。

Il n'est pas recommandé d'omettre les balises L'élément

est l'élément racine du document et est utilisé pour décrire la langue de la page :

La langue déclarée est destinée à la commodité des lecteurs d'écran et des moteurs de recherche.

L'omission de ou entraînera un blocage dans les logiciels DOM et XML.

L'omission de entraînera une erreur dans les anciens navigateurs (IE9).

Omettre ?

En HTML5 standard, la balise peut être omise.

Par défaut, le navigateur ajoutera le contenu avant à un élément

Exemple

    
标题
 
段落。
  

Omettre la balise head n'est pas recommandé maintenant.

Métadonnées

L'élément . ;

Le titre et la langue peuvent permettre aux moteurs de recherche de comprendre rapidement le sujet de votre page :

Commentaires HTML

Les commentaires peuvent être écrits en

Les commentaires plus longs peuvent être écrits sur des lignes séparées entre :

Le premier caractère des commentaires longs est indenté de deux espaces pour faciliter la lecture.

Feuille de style

La feuille de style utilise un format de syntaxe concise (l'attribut type n'est pas obligatoire) :

Des règles courtes peuvent être écrites sur une seule ligne :

p.into {font-family: Verdana;

Les règles longues peuvent être écrites sur plusieurs lignes :

body {
background-color : lightgrey;
font-family : "Arial Black", Helvetica, sans-serif;
font -size: 16em;
color: black;
}

Placez l'accolade ouvrante sur la même ligne que le sélecteur.

Ajoutez un espace entre l'accolade gauche et le sélecteur.

Utilisez deux espaces pour l'indentation.

Ajoutez un espace entre les deux points et la valeur de l'attribut.

Utilisez un espace après la virgule et le symbole.

Utilisez un symbole à la fin de chaque attribut et valeur.

Utilisez des guillemets uniquement si la valeur de l'attribut contient des espaces.

L'accolade fermante est placée sur une nouvelle ligne.

Maximum 80 caractères par ligne.

Une règle courante consiste à ajouter des espaces après les virgules et les points-virgules.

Charger JavaScript en HTML

Utilisez une syntaxe concise pour charger des fichiers de script externes (l'attribut type n'est pas requis) :

段落 1。

段落 2。

Essayez d'utiliser les mêmes règles de dénomination en JavaScript en HTML.

Accédez aux spécifications du code JavaScript.

Utilisez des noms de fichiers en minuscules

La plupart des serveurs Web (Apache, Unix) sont sensibles à la casse : london.jpg n'est pas accessible via London.jpg.

Les autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse : london.jpg est accessible sous London.jpg ou london.jpg.

Vous devez conserver un style cohérent et nous vous recommandons d'utiliser systématiquement les noms de fichiers en minuscules.

Extension de fichier

Le suffixe du fichier HTML peut être .html (ou r .htm).

Le suffixe du fichier CSS est .css.

Le suffixe du fichier JavaScript est .js . La différence entre

.htm et .html

Il n'y a essentiellement aucune différence entre les fichiers d'extension .htm et .html. Les navigateurs et les serveurs Web les traitent comme des fichiers HTML.

La différence est la suivante :

.htm était utilisé dans les premiers systèmes DOS, et le système n'a plus que trois caractères.

Il n'y a pas de restrictions particulières sur le suffixe dans les systèmes Unix, généralement .html est utilisé.

Différence technique

Si une URL ne spécifie pas de nom de fichier (comme //m.sbmmt.com/css/), le serveur renverra le nom de fichier par défaut. Généralement, les noms de fichiers par défaut sont index.html, index.htm, default.html et default.htm.

Si le serveur est configuré avec uniquement « index.html » comme fichier par défaut, vous devez nommer le fichier « index.html », et non « index.htm ».

Cependant, le serveur peut généralement définir plusieurs fichiers par défaut, pouvez-vous définir le fichier par défaut en fonction de vos besoins.

Quoi qu'il en soit, le suffixe complet du HTML est ".html".