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 :

<!DOCTYPE html>

Si vous souhaitez utiliser des minuscules comme les autres balises, vous pouvez utiliser ce qui suit code :

<!doctype html>

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é :

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

Très mauvais :

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

Recommandé :

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

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 <p>), mais nous vous recommandons d'ajouter une balise de fermeture à chaque élément.

Déconseillé :

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

Recommandé :

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

Fermer les éléments HTML vides

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

On peut écrire :

<meta charset="utf-8">

Vous pouvez également écrire :

<meta charset="utf-8" />

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é :

<div CLASS="menu">

Recommandé :

<div class="menu">

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 :

<table class=table striped>

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

<table class="table striped">

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.

<img src="html5.gif" alt="HTML5" >

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

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

Espaces et signe égal

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

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

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

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

É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中文网</h1>

<h2>HTML</h2> 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.

</p>
</body>

Recommandé :

<body>

<h1>php Site chinois</h1>

<h2></h2>
< ; 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. </p>

</body>
Exemple de formulaire :
<table>
<tr>
<th>Nom</th>
<tr>
;td>B</td>
<td>Description de B</td>
</tr>
</table>

Exemple de liste :
<ol> <li>Londres</li> Paris</li>
<li>Tokyo</ li>
</ol>

Omettre<html> ;
En HTML5 standard, les balises <html> et <body>
La documentation HTML5 suivante est correcte :
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
Exécutez le programme pour l'essayer
Omettre les balises <html> recommandé. L'élément
<html> est l'élément racine du document et est utilisé pour décrire la langue de la page :
<!DOCTYPE html> ;
< 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 <html> ou <body> entraînera un blocage dans les logiciels DOM et XML.
L'omission de <body> entraînera une erreur dans les anciens navigateurs (IE9).
Omettre <head> ?
En HTML5 standard, la balise <head>
Par défaut, le navigateur ajoutera le contenu avant <body> à un élément <head>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
    // 只有段落 2 会被替换
    document.getElementById("demo").innerHTML = "HELLO。";
</script>
</body>
</html>
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 <title> la page :
<title>php Site Web chinois</title>
Le titre et la langue peuvent permettre aux moteurs de recherche de comprendre rapidement votre Thème de la page :
<!DOCTYPE html><html lang="zh">
<head>
<meta charset=" UTF -8">
<title>php Site chinois</title>
</head>
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) :

<link rel="stylesheet" href="styles.css">
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) :
<script src="myscript.js"> 🎜>
Utiliser JavaScript pour accéder aux éléments HTML
Un code HTML mal formaté peut entraîner une erreur d'exécution de JavaScript.
Essayez d'utiliser les mêmes règles de dénomination pour JavaScript en HTML.
Accédez aux spécifications du code JavaScript.

Utiliser 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 .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 n'est pas précisée nom de fichier (tel que http://www.php.cn/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, généralement le serveur peut 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".

Formation continue

nouveau fichier

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h3>HTML5 代码规范</h3> <p>知道并按照这些代码规范来编写程序，对我们是有很大帮助的</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique