Doctype
Le doctype HTML5 par rapport aux versions antérieures est simplifié :
<!doctype html>
La DTD (Doctype definition – Définition de type de document) permet d’indiquer au navigateur les règles auxquelles le document est censé répondre. Cela a ainsi un impact sur les rendus CSS. Cette information est également indispensable pour les validateurs HTML (celui du W3C par exemple).
La balise <html>
La balise <html> indique le début et la fin d’un document HTML mais pas uniquement. Elle doit également définir une donnée importante qui est la langue de la page HTML. Cette donnée est utile pour l’indexation par les moteurs de recherche, pour les outils de traductions ou encore pour les outils de synthèse vocale.
La balise HTML doit donc être rédigée ainsi :
<html lang="fr">
L’attribut lang
L’attribut lang doit contenir le code de la langue sur deux caractères en suivant la norme ISO 639-1. Cet attribut est important car il est utilisé par les outils de synthèse vocale afin d’utiliser le meilleur accent possible (exemple, le mot « six » existe dans plusieurs langues mais ne se prononce pas pareil dans chacune). Il peut être utilisé sur d’autres balises (<p>, <span>, etc.) et permet également de cibler des éléments en CSS pour faire une mise en page spécifique (précéder le contenu par l’affichage d’un logo par exemple :
q {
quotes: '"' '"';
}
q:lang(fr) {
quotes: '«\00A0' '\00A0»';
}
q:lang(en) {
quotes: '"' '"';
}
#news > article[lang=de] {
background-image: url(flag-de.png);
}
#news > article[lang=it] {
background-image: url(flag-it.png);
}Les balises <meta>
Les balises <meta> permettent de définir des métadonnées d’une page HTML. Ce sont donc des balises de paramètres qui ne sont pas affichées à l’écran. Ces balises sont placées dans la balise <head> du document HTML.
Meta : charset
La méta balise charset permet de définir l’encodage d’un document, c’est à dire le jeu de caractères utilisé lors de l’enregistrement du document. Préciser l’encodage permet d’éviter d’avoir des caractères mal affichés ce qui est souvent le cas pour les caractères spéciaux ou accentués notamment. Il est donc recommandé de placer cette balise en première position, avant la balise <title> et l’inclusion des CSS ou autre fichiers.
L’information donnée par cette balise n’est pas prioritaire. C’est en effet l’encodage fourni par le serveur qui aura le dessus. Mais si le serveur n’indique pas l’encodage du document, le navigateur web cherchera alors l’information dans cette balise. Cette balise est donc une sécurité indispensable.
Pour connaitre l’encodage renvoyé par le serveur, il suffit d’examiner le retour de l’appel HTTP dans l’onglet du navigateur. S’il y a une mention similaire à Content-Type: text/html; charset=UTF-8 alors c’est bon. S’il n’y a pas l’information, c’est un manque de configuration côté serveur, et l’information sera lue par le navigateur sur la balise meta.
<!-- En HTML 5 --> <meta charset="UTF-8"> <!-- Anciennes versions HTML --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Meta : description
La méta balise description permet notamment aux moteurs de recherche d’afficher une courte description de la page dans les résultats d’une recherche. Cela s’avère également utile lors de recherches / intégration dans des réseaux sociaux pour afficher un texte précis du lien partagé. Les navigateurs s’en servent aussi dans les noms des favoris.
<meta name="description" content="Une description courte du contenu de la page.">
Meta : keywords
La méta balise keywords servait à l’origine à fournir aux moteurs de recherche des mot-clés permettant d’améliorer le classement de la page dans les résultats des recherche. Malheureusement trop souvent utilisées avec des mots très recherchés mais sans aucun rapport avec le contenu de la page dans le but d’améliorer le référencement, les moteurs de recherche ne se basent plus vraiment sur le contenu de cette balise. Il n’est plus indispensable de s’encombrer avec cette balise, mais il n’est pas dérangeant de l’implémenter pour autant.
<!-- Mots-clés séparés par une virgule --> <meta name="keywords" content="foot, football, ligue des champions, but">
Meta : robots
La méta balise robots définit le comportement que les robots d’indexation des moteurs de recherches devraient respecter. C’est une liste de valeurs séparées par des virgules. On dit bien « devrait » car tous les robots ne respectent pas le contenu de cette balise. Un fichier spécial sur le serveur, nommé robots.txt peut (devrait) être utilisé en complément.
<!-- Permet au robot d'indexer la page --> <meta name="robots" content="index"> <!-- Interdit au robot d'indexer la page --> <meta name="robots" content="noindex"> <!-- Permet au robot de suivre les liens contenus dans la page --> <meta name="robots" content="follow"> <!-- Interdit au robot de suivre les liens contenus dans la page --> <meta name="robots" content="nofollow"> <!-- Interdit au robot d'indexer la page mais lui permet de suivre les liens contenus dans la page --> <meta name="robots" content="noindex, follow">
La balise <title>
La balise <title> permet de définir le titre du document. Ce titre sera affiché dans la barre de titre de la fenêtre / de l’onglet du navigateur, dans les favoris et dans les résultats des moteurs de recherches.
Quelques règles à respecter :
- Le titre doit être une courte description de la page et non pas une série de mots-clés.
- Il est recommandé d’avoir un titre court mais de plus de deux mots, tout en restant entre 50 et 70 caractères.
- Pouvant contenir des caractères accentués, cette balise est à placé après la méta balise qui définit le charset.
La balise <link>
La balise <link> permet de définir la relation entre le document qui la contient et une autre ressource. C’est grâce à elle qu’on peut établir un lien vers une feuille de style CSS ou vers l’icône à afficher dans la barre de titre de la fenêtre par exemple.
<!-- Lien vers une feuille de style --> <link rel="stylesheet" href="main.css"> <!-- Lien vers une feuille de style dédiée à l'impression --> <link rel="stylesheet" href="print.css" media="print"> <!-- Lien vers une feuille de style dédiée aux petits écrans --> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> <!-- Icône à afficher dans la barre de titre de la fenêtre / de l'onglet --> <link rel="icon" href="favicon.ico">
Depuis HTML 5, il n’est plus nécessaire de préciser l’attribut type avec la valeur text/css. Les navigateurs déterminent automatiquement le format.
La balise <script>
La balise <script> permet d’inclure des fichiers Javascript ou autre type de script (WebGL par exemple).
<!-- Inclusion d'un Javascript --> <script src="script.js"></script>
Depuis HTML 5, il n’est plus nécessaire de préciser l’attribut type avec la valeur text/javascript. Les navigateurs déterminent automatiquement le format.
Si les attributs async et defer sont absents, les scripts dont chargés et exécutés immédiatement, avant même que le navigateur poursuive l’analyse de la page.
Les attributs async et defer
Si l’on ajoute async=“true” à la balise <script>, le navigateur tentera d’exécuter le script de manière asynchrone. Par défaut, si l’attribut est absent, les navigateurs chargent les scripts de manière synchrone.
Si l’on ajoute defer=“true” à la balise <script>, le navigateur exécutera le script après l’analyse de la page.