Normes de codage HTML5

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 des minuscules comme les autres balises, vous pouvez utiliser ce qui suit code :


Utiliser un élément en minuscule noms

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

Il est recommandé d'utiliser des lettres minuscules :

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

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

  • Le style minuscule semble plus rafraîchissant.

  • Les lettres minuscules sont faciles à écrire.


Déconseillé :

;p>Ceci est un paragraphe.



Très mauvais :

Ceci est un paragraphe.



Recommandé :


Ceci est un paragraphe.



Fermer tous les éléments HTML

En HTML5, vous n'êtes pas nécessairement 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é :


Ceci est un paragraphe.

Ceci est un paragraphe.

Recommandé :


Ceci est un paragraphe.


Ceci est un paragraphe.



Fermer les éléments HTML vides

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

On peut écrire :

Vous pouvez également écrire :

La barre oblique (/) est obligatoire en XHTML et 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 à XHTML).

  • Le style minuscule semble plus rafraîchissant.

  • Les lettres minuscules sont faciles à écrire.

Déconseillé :

Recommandé :


Valeur de l'attribut

La valeur de l'attribut HTML5 peut être utilisée sans 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.

  • Les valeurs d'attribut sont faciles à lire à l'aide de guillemets.

Les valeurs d'attribut d'instance suivantes contiennent des espaces et ne sont pas entre guillemets, elles ne fonctionneront donc pas :

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


Attributs d'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.

HTML5

Définir la taille de l'image lors du chargement peut réserver un espace désigné pour réduire le scintillement.

HTML5


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 :


Éviter un ligne Le code est trop long

En utilisant l'éditeur HTML, il n'est pas 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. < ;h1>php中文网

HTML

C'est un rêve.Site Web PHP chinois, ce que vous apprenez n'est pas seulement de la technologie, mais aussi des rêves.php中文网, ce que vous apprenez n'est pas seulement la technologie, mais aussi un rêve.

php中文网, vous apprenez non seulement la technologie, mais aussi un rêve.







Recommandé :




php Site chinois




< ; p>php Site chinois, ce que vous apprenez n'est pas seulement de la technologie, mais aussi des rêves.
php Site chinois, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves.
php Site chinois, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves.
php Site chinois, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves.



Exemple de formulaire :





;td>B


Nom
Description de B






Exemple de liste :

  1. Londres
  2. Paris

  3. Tokyo





Omettre ;

En HTML5 standard, les balises et

La documentation HTML5 suivante est correcte :

   php中文网(php.cn) 

这是一个标题

这是一个段落。

Exécutez le programme pour l'essayer
Omettre les balises recommandé. L'élément

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

;

< html lang="zh">

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

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

   php中文网(php.cn)  

段落 1。

段落 2。

Exécutez le programme et essayez-le


Conseils: Omettre la balise head maintenant est toujours < Utilisation >déconseillée.


Données sources

L'élément la page : <p></p> <blockquote> <p><title>php Site Web chinois

Le titre et la langue peuvent permettre aux moteurs de recherche de comprendre rapidement votre Thème de la page :




php Site chinois



HTML Commentaires

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 concis (l'attribut type n'est pas obligatoire) :

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

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

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

corps {
couleur de fond : gris clair;
famille de polices : "Arial Black", Helvetica, sans-serif;
taille de police : 16em;
couleur : noir ;
}


  • 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) :

HTML5 代码规范

知道并按照这些代码规范来编写程序,对我们是有很大帮助的

soumettre Réinitialiser le code
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!