{"id":47983,"date":"2021-08-19T14:51:35","date_gmt":"2021-08-19T12:51:35","guid":{"rendered":"https:\/\/kinsta.com\/?p=99189"},"modified":"2023-10-12T15:58:44","modified_gmt":"2023-10-12T14:58:44","slug":"meilleures-pratiques-html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-html\/","title":{"rendered":"Meilleures pratiques HTML pour cr\u00e9er des sites web faciles \u00e0 entretenir et \u00e9volutifs"},"content":{"rendered":"

Les meilleures pratiques HTML aident les d\u00e9veloppeurs \u00e0 proposer des sites web et des applications innovants et hautement interactifs. Ces meilleures pratiques vous aident \u00e0 d\u00e9velopper les applications les plus riches en fonctionnalit\u00e9s et les plus ax\u00e9es sur l’entreprise. En outre, les entreprises peuvent exploiter ces meilleures pratiques pour offrir une exp\u00e9rience utilisateur transparente.<\/p>\n

Aujourd’hui, quand on parle de HTML<\/a>, on parle g\u00e9n\u00e9ralement de HTML5 (et non de ses pr\u00e9d\u00e9cesseurs imm\u00e9diats)<\/a>. HTML5 est un langage de balisage puissant qui permet aux d\u00e9veloppeurs de cr\u00e9er un document web. Il est facile \u00e0 utiliser et \u00e0 comprendre, et presque tous les navigateurs le prennent en charge. C’est \u00e9galement la base de presque tous les syst\u00e8mes de gestion de contenu (Content Manager System ou CMS).<\/p>\n

En tant que d\u00e9veloppeur web avec un minimum d’exp\u00e9rience, des questions telles que \u00ab Comment puis-je \u00e9crire du meilleur HTML ? \u00bb se posent souvent. Cet article a pour but de vous aider \u00e0 partir du bon pied.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Approche g\u00e9n\u00e9rale du codage HTML<\/h2>\n

Vous avez probablement d\u00e9j\u00e0 une bonne ma\u00eetrise de ce langage de balisage, mais voici quelques bonnes pratiques HTML5 qui vous permettront de mieux coder.<\/p>\n

D\u00e9clarez toujours un Doctype<\/h3>\n

Lors de la cr\u00e9ation d’un document HTML, la d\u00e9claration DOCTYPE<\/code> est n\u00e9cessaire pour informer le navigateur<\/a> des normes que vous utilisez. Son but est de rendre correctement votre balisage.<\/p>\n

Par exemple :<\/p>\n

\n\n\n\n\n\n\n\n
Version<\/th>\nD\u00e9claration du Doctype<\/th>\n<\/tr>\n<\/thead>\n
HTML 4.01<\/td>\n<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\"><\/code><\/td>\n<\/tr>\n
XHTML 1.1<\/td>\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.1\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd\"><\/code><\/td>\n<\/tr>\n
HTML5<\/td>\n<!DOCTYPE html><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

La d\u00e9claration <DOCTYPE><\/code> doit figurer sur la premi\u00e8re ligne de votre document HTML. Voici une comparaison entre sa bonne et sa mauvaise impl\u00e9mentation :<\/p>\n

\n\n\n\n\n\n
Meilleure pratique<\/th>\nMauvaise pratique<\/th>\n<\/tr>\n<\/thead>\n
\n
<!DOCTYPE html>\n<html>...<\/html><\/code><\/pre>\n<\/td>\n
\n
<html>...<\/html><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Vous pouvez \u00e9galement utiliser le doctype correspondant \u00e0 la version HTML\/XHTML que vous souhaitez utiliser. D\u00e9couvrez la liste recommand\u00e9e des d\u00e9clarations de doctype<\/a> pour vous aider \u00e0 choisir la bonne.<\/p>\n
Placement des balises HTML<\/h3>\n
Les d\u00e9veloppeurs savent que l’objectif des balises est d’aider les navigateurs web \u00e0 distinguer le contenu HTML du contenu ordinaire. Les balises HTML contiennent une balise d’ouverture, un contenu et une balise de fermeture. Cependant, ils ne savent pas toujours comment placer correctement les balises, quels sont les \u00e9l\u00e9ments qui n\u00e9cessitent des balises fermantes, ou quand omettre les balises.<\/p>\n
Par exemple, quel est le meilleur endroit pour placer les balises <script><\/code> ?<\/p>\n
Les balises de script sont g\u00e9n\u00e9ralement plac\u00e9es \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment <head><\/code>. Mais une bonne pratique HTML moderne consiste \u00e0 les placer plut\u00f4t au bas du document, avant de fermer la balise <body><\/code>, pour retarder leur t\u00e9l\u00e9chargement<\/a>. La page web chargera d’abord le mod\u00e8le d’objet du document (DOM), l\u2019affichera \u00e0 l’utilisateur, puis demandera ensuite les scripts, ce qui r\u00e9duira le temps n\u00e9cessaire au premier octet (TTFB)<\/a>.<\/p>\n
Le navigateur interpr\u00e8te votre document HTML ligne par ligne, de haut en bas. Ainsi, lorsqu’il lit l’en-t\u00eate et rencontre une balise de script, il lance une requ\u00eate au serveur pour obtenir le fichier. Il n’y a rien d’intrins\u00e8quement mauvais dans ce processus, mais si la page charge un fichier \u00e9norme, cela prendra beaucoup de temps et affectera grandement l’exp\u00e9rience de l’utilisateur.<\/p>\n
L’\u00e9l\u00e9ment racine<\/h3>\n
Sous l’\u00e9l\u00e9ment racine se trouve l’attribut <lang><\/code>, ou langue<\/em>. Cet attribut aide \u00e0 traduire un document HTML dans la langue appropri\u00e9e. La meilleure pratique consiste \u00e0 garder la valeur de cet attribut aussi courte que possible.<\/p>\n
Par exemple, la langue japonaise est principalement utilis\u00e9e au Japon. Par cons\u00e9quent, le code pays n’est pas n\u00e9cessaire pour cibler la langue japonaise<\/a>.<\/p>\n
\n\n\n\n\n\n
Meilleure pratique<\/th>\nMauvaise pratique<\/th>\n<\/tr>\n<\/thead>\n
<html lang=\"ja\"><\/code><\/td>\n<html lang=\"ja-JP\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Ce qu’il faut faire et ne pas faire en HTML<\/h3>\n
L’une des meilleures pratiques HTML les plus courantes consiste \u00e0 v\u00e9rifier ce qu’il faut faire et ne pas faire. Voici quelques exemples de ce qu’il ne faut pas faire en mati\u00e8re de codage HTML :<\/p>\n
\n\n\n\n\n\n\n\n\n
Description<\/th>\nBonne pratique<\/th>\nMauvaise pratique<\/th>\n<\/tr>\n<\/thead>\n
Dans le texte, utilisez l’\u00e9quivalent du code HTML des caract\u00e8res Unicode au lieu du caract\u00e8re lui-m\u00eame.<\/td>\n<p>Copyright \u00a9 2021 W3C<sup>\u00ae<\/sup><\/p><\/code><\/td>\n<p>Copyright © 2021 W3C<sup>®<\/sup><\/p><\/code><\/td>\n<\/tr>\n
\u00c9liminez les espaces autour des balises et des valeurs d’attributs.<\/td>\n<h1 class=\"title\">HTML5 Best Practices<\/h1><\/code><\/td>\n<h1 class=\" title \" > HTML5 Best Practices <\/h1><\/code><\/td>\n<\/tr>\n
Faites preuve de coh\u00e9rence et \u00e9vitez de m\u00e9langer les cas de figure.<\/td>\n<a href=\"#status\">Status<\/a><\/code><\/td>\n<a HREF=\"#status\">Status<\/a><\/code><\/td>\n<\/tr>\n
Ne s\u00e9parez pas les attributs par deux espaces blancs ou plus.<\/td>\n<input type=\"text\" name=\"LastName\"><\/code><\/td>\n<input type=\"text\" name=\"LastName\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Restez simple<\/h3>\n
Comme toute pratique de code, le principe de \u00ab\u00a0simplicit\u00e9\u00a0\u00bb s’applique parfaitement au HTML et au HTML5. En g\u00e9n\u00e9ral, HTML5 est compatible avec les anciennes versions de HTML et XHTML. Pour cette raison, nous recommandons d’\u00e9viter l’utilisation de d\u00e9clarations ou d\u2019attributs XML<\/a>.<\/p>\n
Par exemple :<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<!DOCTYPE html>\n<\/code><\/pre>\n
Vous n’avez pas besoin de d\u00e9clarer le code en tant que tel, sauf si vous voulez \u00e9crire un document XHTML. De m\u00eame, vous n’avez pas besoin d’attributs XML, tels que :<\/p>\n
<p lang=\"en\" xml:lang=\"en\">...<\/p> <\/code><\/pre>\n
Codez en tenant compte du SEO<\/h2>\n
Les d\u00e9veloppeurs doivent coder en tenant compte du r\u00e9f\u00e9rencement<\/a>. Les contenus web qui ne sont pas trouv\u00e9s ne sont pas non plus index\u00e9s. Pour cette raison, voici quelques bonnes pratiques de SEO \u00e0 prendre en compte :<\/p>\n
Ajoutez des m\u00e9tadonn\u00e9es significatives<\/h3>\n
La balise <base><\/code> est une balise pratique, mais son utilisation abusive peut entra\u00eener des comportements non intuitifs. Ainsi, si vous d\u00e9clarez une balise base, alors chaque lien dans le document sera relatif, sauf si cela est explicitement sp\u00e9cifi\u00e9 :<\/p>\n
<base href=\"http:\/\/www.kinsta.com\/\" \/><\/code><\/pre>\n
Cette syntaxe modifie le comportement par d\u00e9faut de certains liens. Par exemple, la cr\u00e9ation d’un lien vers une page web externe avec uniquement le nom de la page et son extension :<\/p>\n
href=\"coding.org\"<\/code><\/pre>\n
Ou le navigateur l’interpr\u00e9tera comme :<\/p>\n
href=\"http:\/\/www.kinsta.com\/coding.org<\/a>\"<\/code><\/pre>\n
Cette interpr\u00e9tation devient chaotique, il est donc plus s\u00fbr de toujours utiliser des chemins absolus pour vos liens.<\/p>\n
D’autre part, la r\u00e9daction des descriptions des balises m\u00e9ta ne fait pas strictement partie des meilleures pratiques HTML, mais elle est tout aussi importante. L’attribut <meta name=\"description\"><\/code> est ce \u00e0 quoi les robots des moteurs de recherche font r\u00e9f\u00e9rence lorsqu’ils indexent votre page, il est donc vital pour la sant\u00e9 de votre SEO<\/a>.<\/p>\n
D\u00e9finissez des balises de titre appropri\u00e9es<\/h3>\n
La balise <title><\/code> permet de rendre une page web conviviale pour les moteurs de recherche. D’une part, le texte contenu dans la balise <title><\/code> appara\u00eet dans les pages de r\u00e9sultats des moteurs de recherche (SERP) de Google ainsi que dans la barre de navigation et les onglets de l’utilisateur.<\/p>\n
Prenons l’exemple d’une recherche avec le mot cl\u00e9 \u00ab\u00a0HTML5\u00a0\u00bb. Dans ce r\u00e9sultat de recherche, le titre indique l’attribut sp\u00e9cifique du titre et l’auteur. Ceci est tr\u00e8s important pour le SEO et la g\u00e9n\u00e9ration de trafic sur le site<\/a>.<\/p>\n
Les images doivent avoir un attribut Alt<\/h3>\n
L’utilisation d’un attribut alt significatif<\/a> avec les \u00e9l\u00e9ments <img><\/code> est indispensable pour \u00e9crire un code valide et s\u00e9mantique.<\/p>\n
Dans le tableau ci-dessous, la colonne des mauvaises pratiques montre un \u00e9l\u00e9ment <img><\/code> sans attribut alt. Bien que le deuxi\u00e8me exemple de la m\u00eame colonne poss\u00e8de un attribut alt, sa valeur n’a aucune signification.<\/span><\/p>\n
\n\n\n\n\n\n
Bonne pratique<\/th>\nMauvaise pratique<\/th>\n<\/tr>\n<\/thead>\n
\n
<img id=\"logo\" src=\"images\/kinsta_logo.png\" alt=\"Kinsta logo\" \/><\/code><\/pre>\n<\/td>\n
\n
<img id=\"logo\" src=\"images\/kinsta_logo.png\" \/>\n<img id=\"logo\" src=\"images\/kinsta_logo.png\" alt=\"kinsta_logo.png\" \/><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Attributs m\u00e9ta descriptifs<\/h3>\n
La m\u00e9ta-description<\/a> est un \u00e9l\u00e9ment HTML qui d\u00e9crit et r\u00e9sume le contenu d’une page web. Son but est de permettre aux utilisateurs de trouver le contexte de la page. Bien que les m\u00e9ta-donn\u00e9es ne contribuent plus au classement des moteurs de recherche, la m\u00e9ta-description joue toujours un r\u00f4le important dans le r\u00e9f\u00e9rencement sur la page.<\/p>\n
Voici un exemple de code qui comprend les mots-cl\u00e9s, la description, le nom de l’auteur et le jeu de caract\u00e8res. Le jeu de caract\u00e8res est utilis\u00e9 pour prendre en charge presque tous les caract\u00e8res et symboles de diff\u00e9rentes langues. D’autre part, vous pouvez d\u00e9finir des cookies, ajouter une date de r\u00e9vision et autoriser l’actualisation de la page.<\/p>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>HTML Best Practices in Website Design<\/title>\n    <meta name = \"keywords\" content = \"HTML, Website Design, HTML Best Practices\" \/>\n    <meta name = \"description\" content = \"Learn about HTML best practices.\" \/>\n    <meta name = \"author\" content = \"John Doe\" \/>\n    <meta http-equiv = \"Content-Type\" content = \"text\/html; charset = UTF-8\" \/>\n  <\/head>\n  <body>\n    <p>Let's learn how to code HTML5!<\/p>\n  <\/body>\n<\/html><\/code><\/pre>\n
Attribut de titre avec liens<\/h3>\n
Dans les \u00e9l\u00e9ments d’ancrage, la meilleure pratique consiste \u00e0 utiliser des attributs de titre pour am\u00e9liorer l’accessibilit\u00e9. L’attribut title accro\u00eet la signification de la balise d’ancrage. La balise <a><\/code> (ou \u00e9l\u00e9ment d’ancrage), associ\u00e9e \u00e0 son attribut href<\/code>, cr\u00e9e un lien hypertexte<\/a> vers des pages web, des adresses e-mail et des fichiers. Elle est utilis\u00e9e pour relier des emplacements au sein d’une m\u00eame page ou des adresses externes.<\/p>\n
V\u00e9rifiez l’exemple sous la colonne des mauvaises pratiques – il est l\u00e0 pour \u00eatre redondant. Ce type de pratique est \u00e9vident si un utilisateur utilise un lecteur d’\u00e9cran pour lire la balise d’ancrage et lire deux fois le m\u00eame texte \u00e0 l’auditeur. Un lecteur d’\u00e9cran est une technologie d’assistance fournie aux malvoyants ou aux personnes ayant des difficult\u00e9s d’apprentissage. Si vous ne faites que r\u00e9p\u00e9ter le texte de l’ancre, il est pr\u00e9f\u00e9rable de ne pas utiliser de titre du tout.<\/p>\n
\n\n\n\n\n\n
Bonne pratique<\/th>\nMauvaise pratique<\/th>\n<\/tr>\n<\/thead>\n
<a href=\"https:\/\/kinsta.com\/our-pricing\" title=\"Learn about our products.\">Click here<\/a><\/code><\/td>\n<a href=\"https:\/\/kinsta.com\/our-pricing\" title=\"Click Here\">Click here<\/a><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Meilleures pratiques HTML en mati\u00e8re de mise en page<\/h2>\n
Le d\u00e9veloppement d’un site web ne se r\u00e9sume pas \u00e0 la cr\u00e9ation d’un bloc de texte et d’en-t\u00eates, \u00e0 la cr\u00e9ation de pages de liens<\/a>, et le tour est jou\u00e9. Il existe quelques bonnes pratiques en HTML \u00e0 prendre en compte pour tirer le meilleur parti de votre site web.<\/p>\n
D\u00e9finir une structure de document appropri\u00e9e<\/h3>\n
Les documents HTML fonctionneront toujours sans les \u00e9l\u00e9ments primaires : <html><\/code> , <head><\/code> , et <body><\/code> . Cependant, les pages peuvent ne pas s’afficher correctement si ces \u00e9l\u00e9ments sont manquants. \u00c0 cette fin, il est important d’utiliser une structure de document appropri\u00e9e de mani\u00e8re coh\u00e9rente.<\/p>\n
Regrouper les sections pertinentes<\/h3>\n
Pour un regroupement th\u00e9matique de contenu<\/a>, utilisez l’\u00e9l\u00e9ment section. Selon la sp\u00e9cification du W3C, une <section><\/code> doit contenir un titre (H1, H2, etc.). Certains d\u00e9veloppeurs ignorent compl\u00e8tement l’utilisation de l’\u00e9l\u00e9ment de titre, mais nous recommandons de l’inclure pour mieux atteindre les personnes utilisant des lecteurs d’\u00e9cran :<\/p>\n
\n\n\n\n\n\n
Bonne pratique<\/th>\nMauvaise pratique<\/th>\n<\/tr>\n<\/thead>\n
\n
<section>\n<h1>HTML Best Practices 2021<\/h1>\n<ul>\n<li><img src=\"img1.jpg\" alt=\"description\"><\/li>\n<li><img src=\"img2.jpg\" alt=\"description\"><\/li>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n
\n
<section>\n<ul>\n<li><img src=\"img1.jpg\" alt=\"description\"><\/li>\n<li><img src=\"img2.jpg\" alt=\"description\"><\/li>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Meilleures pratiques en mati\u00e8re de contenu int\u00e9gr\u00e9<\/h3>\n
La balise <embed><\/code> sert de conteneur pour une ressource externe. Il peut s’agir de pages web, d’images, de vid\u00e9os<\/a> ou d\u2019extensions. Toutefois, vous devez tenir compte du fait que la plupart des navigateurs ne prennent plus en charge les applets et les extensions Java. De plus, les contr\u00f4les ActiveX ne sont plus pris en charge par aucun navigateur, et la prise en charge de Shockwave Flash a \u00e9galement \u00e9t\u00e9 d\u00e9sactiv\u00e9e dans les navigateurs modernes.<\/p>\n
Nous recommandons ce qui suit :<\/p>\n