Conventions de codage HTML
Les développeurs Web sont souvent incertaines sur le style de codage et d'utiliser la syntaxe HTML.
Entre 2000 et 2010, de nombreux développeurs web convertis en HTML à XHTML.
Avec XHTML, les développeurs ont été contraints d'écrire valides et "well-formed" code.
HTML5 est un peu plus bâclée en matière de code de validation.
Avec HTML5, vous devez créer vos propres conventions sur les pratiques exemplaires, Guide de style et de codage.
Soyez intelligent et Future Proof
Une utilisation conséquente de style, il est plus facile pour les autres à comprendre et à utiliser votre code HTML.
À l'avenir, des programmes tels que les lecteurs XML, peuvent vouloir lire votre code HTML.
L' utilisation d' un bien formé "close to XHTML" syntaxe, peut être intelligent.
Gardez toujours votre style élégant, bien rangé, propre et bien formé.
Utilisation correcte Type de document
Toujours déclarer le type de document que la première ligne de votre document:
<!DOCTYPE html>Si vous voulez la cohérence avec les balises minuscules, vous pouvez utiliser:
<!DOCTYPE html>Utilisez des noms d'élément Minuscules
HTML5 permet de mélanger les lettres majuscules et minuscules dans les noms d'éléments.
Nous vous recommandons d'utiliser des noms d'éléments minuscules:
- Le mélange des noms majuscules et minuscules est mauvais
- Les développeurs sont habitués à utiliser des noms en minuscules (as in XHTML)
- propre look Minuscules
- Minuscules sont plus faciles à écrire
Mal:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Très mauvais:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Bien:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Fermer tous les éléments HTML
En HTML5, vous ne devez pas fermer tous les éléments (for example the <p> element) .
Nous vous recommandons de fermer tous les éléments HTML:
Vous cherchez mauvais:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Vous cherchez une bonne:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Fermer vide HTML Elements
En HTML5, il est facultatif de fermer des éléments vides.
Ceci est permis:
<meta charset="utf-8">Ceci est également permis:
<meta charset="utf-8" />La barre oblique (/) est nécessaire en XHTML et XML.
Si vous vous attendez à un logiciel XML pour accéder à votre page, il pourrait être une bonne idée de le garder.
Utilisation Minuscules des noms d'attributs
HTML5 permet de mélanger les lettres majuscules et minuscules dans les noms d'attributs.
Nous vous recommandons d'utiliser des noms d'attributs en minuscules:
- Le mélange des noms majuscules et minuscules est mauvais
- Les développeurs sont habitués à utiliser des noms en minuscules (as in XHTML)
- propre look Minuscules
- Minuscules sont plus faciles à écrire
Vous cherchez mauvais:
<div CLASS="menu">Vous cherchez une bonne:
<div class="menu">Les valeurs d'attribut Quote
HTML5 permet des valeurs d'attributs sans les guillemets.
Nous vous recommandons de citer des valeurs d'attribut:
- Vous devez utiliser des guillemets si la valeur contient des espaces
- Le mélange des styles est jamais bon
- Les valeurs indiquées sont plus faciles à lire
Cela ne fonctionnera pas, parce que la valeur contient des espaces:
<table class=table striped>Cela fonctionne:
<table class="table striped">Les attributs d'image
Toujours utiliser l' alt attribut avec des images. Il est important lorsque l'image ne peut pas être considérée.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">Toujours définir la taille de l'image. Il réduit vacillante parce que le navigateur peut réserver de l'espace pour les images avant qu'elles ne soient chargées.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">Les espaces et les signes égal
Les espaces autour signe égal est légal:
<link rel = "stylesheet" href = "styles.css">Mais l'espace est moins facile à lire, et les groupes entités mieux ensemble:
<link rel="stylesheet" href="styles.css">Évitez les longues lignes de code
Lorsque vous utilisez un éditeur HTML, il est peu pratique pour faire défiler à droite et à gauche pour lire le code HTML.
Essayez d'éviter les lignes de code de plus de 80 caractères.
Les lignes vides et Indentation
Ne pas ajouter des lignes vides sans raison.
Pour plus de lisibilité, ajouter des lignes vides pour séparer les blocs de code ou de grandes logiques.
Pour plus de lisibilité, ajouter 2 espaces d'indentation. Ne pas utiliser TAB.
Ne pas utiliser des lignes vides inutiles et en retrait. Il ne faut pas utiliser des lignes vides entre les éléments courts et connexes. Il ne faut pas mettre en retrait tous les éléments:
Inutile:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>Meilleur:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>Tableau Exemple:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>Exemple de liste:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>Omettre <html> et <body> ?
Dans la norme HTML5, le <html> balise et le <body> balise peut être omis.
Le code suivant validera comme HTML5:
Exemple
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Essayez vous - même » Nous ne recommandons pas omettre les <html> et <body> tags.
Le <html> élément est la racine du document. Il est le lieu recommandé pour spécifier la langue de la page:
<!DOCTYPE html>
<html lang="en-US">Déclarant une langue est importante pour les applications d'accessibilité (screen readers) et les moteurs de recherche.
Omission <html> ou <body> peut tomber en panne DOM et logiciel XML.
Omettre <body> peut produire des erreurs dans les anciens navigateurs (IE9) .
Omettre <head> ?
Dans la norme HTML5, le <head> balise peut également être omis.
Par défaut, les navigateurs ajouteront tous les éléments avant <body> , à défaut <head> élément.
Vous pouvez réduire la complexité du langage HTML, en omettant le <head> tag:
Exemple
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Essayez vous - même » Omettre balises ne connaît pas pour les développeurs web. Il a besoin de temps pour établir une ligne directrice.
Meta Data
Le <title> élément est requis en HTML5. Faire le titre aussi significative que possible:
<title>HTML5 Syntax and Coding Style</title>Pour garantir une interprétation correcte et l'indexation des moteurs de recherche correct, la langue et le codage des caractères doit être défini le plus tôt possible dans un document:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>Commentaires HTML
Commentaires courts doivent être écrits sur une ligne, avec un espace après <!-- and a space before --> :
<!-- This is a comment -->Les commentaires longs, couvrant de nombreuses lignes, doivent être écrites avec <!-- and --> Sur des lignes distinctes:
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->Les longs commentaires sont plus faciles à observer, si elles sont en retrait 2 places.
Les feuilles de style
Utilisez une syntaxe simple pour relier des feuilles de style (the type attribute is not necessary) :
<link rel="stylesheet" href="styles.css">règles courtes peuvent être écrites compressés, sur une seule ligne, comme ceci:
p.into {font-family: Verdana; font-size: 16em;}règles longues doivent être écrites sur plusieurs lignes:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Placez le support d'ouverture sur la même ligne que le sélecteur.
- Utiliser une espace avant le crochet d'ouverture.
- Utilisez 2 espaces d'indentation.
- Utilisation du côlon plus un espace entre chaque propriété et sa valeur.
- Utilisez l'espace après chaque virgule ou point-virgule.
- Utilisez chaque paire virgule après-valeur de la propriété, y compris la dernière.
- Utilisez uniquement des guillemets autour des valeurs si la valeur contient des espaces.
- Placez le support de fermeture sur une nouvelle ligne, sans espaces principaux.
- Évitez les lignes de plus de 80 caractères.
Ajout d'un espace après une virgule ou un point-virgule, est une règle générale dans tous les types d'écriture.
Chargement JavaScript HTML
Utilisez une syntaxe simple pour le chargement des scripts externes (the type attribute is not necessary) :
<script src="myscript.js">L'accès aux éléments HTML avec JavaScript
Une conséquence de l' utilisation de "untidy" styles HTML, peut entraîner des erreurs JavaScript.
Ces deux déclarations JavaScript produiront des résultats différents:
Si possible, utilisez la même convention de nommage (as JavaScript) en HTML.
Visitez le Guide de style JavaScript .
Utilisez des noms de fichier minuscule
La plupart des serveurs web (Apache, Unix) sont sensibles à la casse sur les noms de fichiers:
London.jpg ne peut pas être accessible en tant que London.jpg.
D' autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse:
London.jpg est accessible comme London.jpg ou London.jpg.
Si vous utilisez un mélange de majuscules et minuscules, vous devez être extrêmement cohérent.
Si vous passez d'un insensible à la casse, à un cas serveur sensible, même de petites erreurs vont briser votre site.
Pour éviter ces problèmes, utilisez toujours les noms de fichiers de minuscules (if possible) .
Extensions de fichiers
Les fichiers HTML doivent avoir une extension .html (or .htm ) .
Les fichiers CSS doivent avoir une extension .css.
Les fichiers JavaScript doivent avoir une extension .js.
Différences entre .htm et .html
Il n'y a pas de différence entre les extensions .htm et .html. Les deux seront traités comme HTML par un navigateur Web ou un serveur Web.
Les différences sont d'ordre culturel:
.htm "smells" des premiers systèmes DOS où le système a limité les extensions de 3 caractères.
.html "smells" des systèmes d' exploitation Unix qui n'ont pas cette limitation.
Les différences techniques
Lorsqu'une URL ne spécifie pas un nom de fichier (like http://www.w3ii.com/css/) , le serveur renvoie un nom de fichier par défaut. les noms de fichiers par défaut communs sont index.html, index.htm, default.html et default.htm.
Si votre serveur est configuré uniquement avec "index.html" comme nom de fichier par défaut, votre fichier doit être nommé "index.html" , pas "index.htm."
Cependant, les serveurs peuvent être configurés avec plus d'un nom de fichier par défaut, et normalement vous pouvez configurer autant de noms de fichiers par défaut au besoin.
Quoi qu'il en soit, l'extension complète des fichiers HTML est .html, et il n'y a aucune raison qu'il ne devrait pas être utilisé.