Les meilleures pratiques HTML aident les développeurs à proposer des sites web et des applications innovants et hautement interactifs. Ces meilleures pratiques vous aident à développer les applications les plus riches en fonctionnalités et les plus axées sur l’entreprise. En outre, les entreprises peuvent exploiter ces meilleures pratiques pour offrir une expérience utilisateur transparente.
Aujourd’hui, quand on parle de HTML, on parle généralement de HTML5 (et non de ses prédécesseurs immédiats). HTML5 est un langage de balisage puissant qui permet aux développeurs de créer un document web. Il est facile à utiliser et à comprendre, et presque tous les navigateurs le prennent en charge. C’est également la base de presque tous les systèmes de gestion de contenu (Content Manager System ou CMS).
En tant que développeur web avec un minimum d’expérience, des questions telles que « Comment puis-je écrire du meilleur HTML ? » se posent souvent. Cet article a pour but de vous aider à partir du bon pied.
Approche générale du codage HTML
Vous avez probablement déjà une bonne maîtrise de ce langage de balisage, mais voici quelques bonnes pratiques HTML5 qui vous permettront de mieux coder.
Déclarez toujours un Doctype
Lors de la création d’un document HTML, la déclaration DOCTYPE est nécessaire pour informer le navigateur des normes que vous utilisez. Son but est de rendre correctement votre balisage.
Par exemple :
| Version | Déclaration du Doctype |
|---|---|
| HTML 4.01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| HTML5 | <!DOCTYPE html> |
La déclaration <DOCTYPE> doit figurer sur la première ligne de votre document HTML. Voici une comparaison entre sa bonne et sa mauvaise implémentation :
| Meilleure pratique | Mauvaise pratique |
|---|---|
|
|
Vous pouvez également utiliser le doctype correspondant à la version HTML/XHTML que vous souhaitez utiliser. Découvrez la liste recommandée des déclarations de doctype pour vous aider à choisir la bonne.
Placement des balises HTML
Les développeurs savent que l’objectif des balises est d’aider les navigateurs web à 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 éléments qui nécessitent des balises fermantes, ou quand omettre les balises.
Par exemple, quel est le meilleur endroit pour placer les balises <script> ?
Les balises de script sont généralement placées à l’intérieur de l’élément <head>. Mais une bonne pratique HTML moderne consiste à les placer plutôt au bas du document, avant de fermer la balise <body>, pour retarder leur téléchargement. La page web chargera d’abord le modèle d’objet du document (DOM), l’affichera à l’utilisateur, puis demandera ensuite les scripts, ce qui réduira le temps nécessaire au premier octet (TTFB).
Le navigateur interprète votre document HTML ligne par ligne, de haut en bas. Ainsi, lorsqu’il lit l’en-tête et rencontre une balise de script, il lance une requête au serveur pour obtenir le fichier. Il n’y a rien d’intrinsèquement mauvais dans ce processus, mais si la page charge un fichier énorme, cela prendra beaucoup de temps et affectera grandement l’expérience de l’utilisateur.
L’élément racine
Sous l’élément racine se trouve l’attribut <lang>, ou langue. Cet attribut aide à traduire un document HTML dans la langue appropriée. La meilleure pratique consiste à garder la valeur de cet attribut aussi courte que possible.
Par exemple, la langue japonaise est principalement utilisée au Japon. Par conséquent, le code pays n’est pas nécessaire pour cibler la langue japonaise.
| Meilleure pratique | Mauvaise pratique |
|---|---|
<html lang="ja"> |
<html lang="ja-JP"> |
Ce qu’il faut faire et ne pas faire en HTML
L’une des meilleures pratiques HTML les plus courantes consiste à vérifier ce qu’il faut faire et ne pas faire. Voici quelques exemples de ce qu’il ne faut pas faire en matière de codage HTML :
| Description | Bonne pratique | Mauvaise pratique |
|---|---|---|
| Dans le texte, utilisez l’équivalent du code HTML des caractères Unicode au lieu du caractère lui-même. | <p>Copyright © 2021 W3C<sup>®</sup></p> |
<p>Copyright © 2021 W3C<sup>®</sup></p> |
| Éliminez les espaces autour des balises et des valeurs d’attributs. | <h1 class="title">HTML5 Best Practices</h1> |
<h1 class=" title " > HTML5 Best Practices </h1> |
| Faites preuve de cohérence et évitez de mélanger les cas de figure. | <a href="#status">Status</a> |
<a HREF="#status">Status</a> |
| Ne séparez pas les attributs par deux espaces blancs ou plus. | <input type="text" name="LastName"> |
<input type="text" name="LastName"> |
Restez simple
Comme toute pratique de code, le principe de « simplicité » s’applique parfaitement au HTML et au HTML5. En général, HTML5 est compatible avec les anciennes versions de HTML et XHTML. Pour cette raison, nous recommandons d’éviter l’utilisation de déclarations ou d’attributs XML.
Par exemple :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
Vous n’avez pas besoin de déclarer le code en tant que tel, sauf si vous voulez écrire un document XHTML. De même, vous n’avez pas besoin d’attributs XML, tels que :
<p lang="en" xml:lang="en">...</p> Codez en tenant compte du SEO
Les développeurs doivent coder en tenant compte du référencement. Les contenus web qui ne sont pas trouvés ne sont pas non plus indexés. Pour cette raison, voici quelques bonnes pratiques de SEO à prendre en compte :
Ajoutez des métadonnées significatives
La balise <base> est une balise pratique, mais son utilisation abusive peut entraîner des comportements non intuitifs. Ainsi, si vous déclarez une balise base, alors chaque lien dans le document sera relatif, sauf si cela est explicitement spécifié :
<base href="http://www.kinsta.com/" />Cette syntaxe modifie le comportement par défaut de certains liens. Par exemple, la création d’un lien vers une page web externe avec uniquement le nom de la page et son extension :
href="coding.org"Ou le navigateur l’interprétera comme :
href="http://www.kinsta.com/coding.org"Cette interprétation devient chaotique, il est donc plus sûr de toujours utiliser des chemins absolus pour vos liens.
D’autre part, la rédaction des descriptions des balises méta ne fait pas strictement partie des meilleures pratiques HTML, mais elle est tout aussi importante. L’attribut <meta name="description"> est ce à quoi les robots des moteurs de recherche font référence lorsqu’ils indexent votre page, il est donc vital pour la santé de votre SEO.
Définissez des balises de titre appropriées
La balise <title> permet de rendre une page web conviviale pour les moteurs de recherche. D’une part, le texte contenu dans la balise <title> apparaît dans les pages de résultats des moteurs de recherche (SERP) de Google ainsi que dans la barre de navigation et les onglets de l’utilisateur.
Prenons l’exemple d’une recherche avec le mot clé « HTML5 ». Dans ce résultat de recherche, le titre indique l’attribut spécifique du titre et l’auteur. Ceci est très important pour le SEO et la génération de trafic sur le site.
Les images doivent avoir un attribut Alt
L’utilisation d’un attribut alt significatif avec les éléments <img> est indispensable pour écrire un code valide et sémantique.
Dans le tableau ci-dessous, la colonne des mauvaises pratiques montre un élément <img> sans attribut alt. Bien que le deuxième exemple de la même colonne possède un attribut alt, sa valeur n’a aucune signification.
| Bonne pratique | Mauvaise pratique |
|---|---|
|
|
Attributs méta descriptifs
La méta-description est un élément HTML qui décrit et résume le contenu d’une page web. Son but est de permettre aux utilisateurs de trouver le contexte de la page. Bien que les méta-données ne contribuent plus au classement des moteurs de recherche, la méta-description joue toujours un rôle important dans le référencement sur la page.
Voici un exemple de code qui comprend les mots-clés, la description, le nom de l’auteur et le jeu de caractères. Le jeu de caractères est utilisé pour prendre en charge presque tous les caractères et symboles de différentes langues. D’autre part, vous pouvez définir des cookies, ajouter une date de révision et autoriser l’actualisation de la page.
<!DOCTYPE html>
<html>
<head>
<title>HTML Best Practices in Website Design</title>
<meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" />
<meta name = "description" content = "Learn about HTML best practices." />
<meta name = "author" content = "John Doe" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Let's learn how to code HTML5!</p>
</body>
</html>Attribut de titre avec liens
Dans les éléments d’ancrage, la meilleure pratique consiste à utiliser des attributs de titre pour améliorer l’accessibilité. L’attribut title accroît la signification de la balise d’ancrage. La balise <a> (ou élément d’ancrage), associée à son attribut href, crée un lien hypertexte vers des pages web, des adresses e-mail et des fichiers. Elle est utilisée pour relier des emplacements au sein d’une même page ou des adresses externes.
Vérifiez l’exemple sous la colonne des mauvaises pratiques – il est là pour être redondant. Ce type de pratique est évident si un utilisateur utilise un lecteur d’écran pour lire la balise d’ancrage et lire deux fois le même texte à l’auditeur. Un lecteur d’écran est une technologie d’assistance fournie aux malvoyants ou aux personnes ayant des difficultés d’apprentissage. Si vous ne faites que répéter le texte de l’ancre, il est préférable de ne pas utiliser de titre du tout.
| Bonne pratique | Mauvaise pratique |
|---|---|
<a href="http://kinsta.com/our-pricing" title="Learn about our products.">Click here</a> |
<a href="http://kinsta.com/our-pricing" title="Click Here">Click here</a> |
Meilleures pratiques HTML en matière de mise en page
Le développement d’un site web ne se résume pas à la création d’un bloc de texte et d’en-têtes, à la création de pages de liens, et le tour est joué. Il existe quelques bonnes pratiques en HTML à prendre en compte pour tirer le meilleur parti de votre site web.
Définir une structure de document appropriée
Les documents HTML fonctionneront toujours sans les éléments primaires : <html> , <head> , et <body> . Cependant, les pages peuvent ne pas s’afficher correctement si ces éléments sont manquants. À cette fin, il est important d’utiliser une structure de document appropriée de manière cohérente.
Regrouper les sections pertinentes
Pour un regroupement thématique de contenu, utilisez l’élément section. Selon la spécification du W3C, une <section> doit contenir un titre (H1, H2, etc.). Certains développeurs ignorent complètement l’utilisation de l’élément de titre, mais nous recommandons de l’inclure pour mieux atteindre les personnes utilisant des lecteurs d’écran :
| Bonne pratique | Mauvaise pratique |
|---|---|
|
|
Meilleures pratiques en matière de contenu intégré
La balise <embed> sert de conteneur pour une ressource externe. Il peut s’agir de pages web, d’images, de vidéos ou d’extensions. 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ôles ActiveX ne sont plus pris en charge par aucun navigateur, et la prise en charge de Shockwave Flash a également été désactivée dans les navigateurs modernes.
Nous recommandons ce qui suit :
- Pour une image, utilisez la balise
<img>. - Pour le HTML d’un autre site, utilisez la balise
<iframe>. - Pour les vidéos ou les audios, utilisez les balises
<video>et<audio>.
L’attribut alt de l’élément <img> fournit une description de l’image utile aux moteurs de recherche et aux lecteurs d’écran. Il peut s’avérer particulièrement pratique pour les utilisateurs lorsque les images ne peuvent pas être traitées :
| Bonne pratique | Mauvaise pratique |
|---|---|
<img alt="HTML Best Practices" src="/img/logo.png"> |
<img src="/img/logo.png"> |
Laissez l’attribut alt vide s’il y a un texte supplémentaire pour expliquer l’image. Cela permet d’éviter la redondance :
| Bonne pratique | Mauvaise pratique |
|---|---|
<img alt="" src="/img/icon/warning.png"> Warning |
<img alt="Warning Sign" src="/img/icon/warning.png"> Warning |
Laissez les éléments <iframe> <iframe> vides s’il existe des restrictions quant à leur contenu. Un élément iframe vide est toujours sûr :
| Bonne pratique | Mauvaise pratique |
|---|---|
|
|
Les développeurs doivent fournir un contenu de repli, ou des liens de secours, pour tout élément <audio> ou <video>, tout comme pour les images. Le contenu de repli est nécessaire, en particulier pour les éléments nouvellement introduits dans le langage HTML :
| Bonne pratique | Mauvaise pratique |
|---|---|
|
|
Réduisez le nombre d’éléments
Les documents HTML deviennent compliqués, surtout pour les pages web comportant beaucoup de contenu. Il est préférable de réduire le nombre d’éléments d’une page à un minimum que vous pouvez gérer. Apprenez à utiliser les éléments de titre à bon escient et suivez la manière dont les éléments <h1> à <h6> dénotent la hiérarchie du contenu du HTML. Votre contenu sera ainsi plus significatif pour vos lecteurs, les logiciels de lecture d’écran et les moteurs de recherche.
Exemple :
<h1>The topmost heading</h1>
<h2>This is a subheading that follows the topmost heading.</h2>
<h3>This is a subheading that follows the h2 heading.</h3>
<h4>This is a subheading that follows the h3 heading.</h4>
<h5>This is a subheading that follows the h4 heading.</h5>
<h6>This is a subheading that follows the h5 heading.</h6>Pour les développeurs et créateurs de contenu WordPress, utilisez l’élément <h1> pour le titre de l’article de blog au lieu du nom du site. Cela aide à l’exploration des moteurs de recherche, et cette approche est adaptée au SEO.
En outre, utilisez le bon élément HTML pour transmettre les informations qu’il contient afin d’obtenir une structure de contenu sémantique et significative. Par exemple, utilisez <em> pour l’emphase et <strong> pour une forte emphase au lieu de leurs prédécesseurs <i> ou <b>, qui sont maintenant obsolètes.
Exemple :
<em>emphasized text</em>
<strong>strongly emphasized text</strong>Tout aussi important, utilisez <p> pour les paragraphes, et évitez d’utiliser <br /> pour ajouter une nouvelle ligne entre les paragraphes. Utilisez plutôt les propriétés CSS margin et/ou padding pour mieux positionner votre contenu. Parfois, vous pourriez être tenté d’utiliser la balise <blockquote> à des fins d’indentation. Évitez ce piège – utilisez-la exclusivement pour citer du texte.
Ce qu’il faut faire et ne pas faire en matière de mise en page
L’une des meilleures pratiques HTML consiste à utiliser des éléments sémantiquement appropriés dans votre mise en page. Plusieurs éléments vous aideront à organiser votre mise en page en sections.
Compte tenu de l’ampleur des sujets abordés dans le cadre de la mise en page HTML, il est préférable de mettre rapidement en évidence les choses à faire et à ne pas faire en matière de mise en page. Par exemple, le HTML donne une signification plus sémantique aux éléments d’en-tête et de pied de page, il ne faut donc pas négliger l’utilisation de la balise <header> telle qu’elle est utilisée dans une section ou un article donné. Outre le contrôle des balises <title> et <meta> et d’autres éléments stylistiques du document, elle est utilisée dans les titres, les dates de publication et d’autres contenus d’introduction de votre page ou section. De même, vous pouvez en finir avec l’idée que les pieds de page n’appartiennent qu’à la section des droits d’auteur – désormais, vous pouvez les utiliser à peu près partout.
Pour l’élément <nav>, vous devez l’utiliser pour la navigation à l’échelle du site. Il n’est pas nécessaire de déclarer un rôle car l’utilisation est déjà implicite dans la balise.
| Bonne pratique | Mauvaise pratique |
|---|---|
<nav></nav> |
<nav role="navigation"></nav> |
Quant à l’élément <main>, il fait déjà partie des dernières versions de HTML5, qui désignent le contenu principal du corps du document. Il n’est donc plus nécessaire d’utiliser <div> lorsque nous disposons d’une balise plus spécifique pour notre contenu principal.
| Bonne pratique | Mauvaise pratique |
|---|---|
<main id="content"></main> |
<div id="content"></div> |
La balise <article> est utilisée pour un bloc de contenu. Elle est autonome et a du sens sans qu’il soit nécessaire de donner des explications supplémentaires, tandis que la balise <section> est utilisée pour diviser une page en différents sujets ou pour sectionner un article individuel. Malheureusement, de nombreux développeurs utilisent encore les deux de manière interchangeable.
Considérons que la balise <section> est une balise plus générique que la balise <article>. Cela signifie que la première dénote un contenu lié au sujet en question, mais pas nécessairement autonome. La seconde, à l’inverse, est une propriété autonome.
Mais lorsqu’il n’existe pas de balise de balisage appropriée à vos besoins, que devez-vous utiliser ? La réponse est d’utiliser <div> quand aucun autre élément ne fonctionne ou quand il s’agit d’un élément spécifiquement stylistique. Pour nos besoins, l’utilisation de <div> est également une mauvaise pratique.
Revenons à la balise <section>, qui est une balise de balisage sémantique. Ce n’est pas une balise stylistique, et il est important de le souligner. En effet, une bonne pratique de code doit comporter une balise de titre.
Maintenant, les choses à ne pas faire avec <section> suivent que vous ne devriez pas l’utiliser pour baliser un wrapper, un conteneur, ou tout autre bloc purement stylistique. Vous trouverez ci-dessous un exemple de mauvaise pratique de codage avec la balise <section> :
<section id="wrapper">
<section class="container-fluid">
<div id="main">
</div>
</section>
</section>Voici une meilleure approche, mais elle surcharge la balise <div> :
<div id="wrapper">
<div class="container-fluid">
<div id="main">
</div>
</div>
</div>Par conséquent, une bien meilleure pratique de code est la suivante :
<body id="wrapper">
<div class="container-fluid">
<main id="main">
</main>
</div>
</body>Les figures pour la représentation des données constituent un élément populaire de nombreuses mises en page, et l’élément <figure> est surtout utilisé avec des images. Cependant, il a un plus large éventail d’utilisations possibles, car tout ce qui est lié au document pourrait être positionné n’importe où et enveloppé dans un élément <figure>. Parmi les exemples, citons les illustrations, les tableaux ou les diagrammes d’un livre.
Une caractéristique intéressante de <figure> est qu’elle ne contribue pas au plan du document. Par conséquent, vous pouvez l’utiliser pour regrouper des éléments ayant un thème commun – par exemple, plusieurs images avec une <figcaption> commune, ou même un bloc de code.
Pour regrouper des éléments avec <figure> , utilisez <figcaption>. La légende <figcaption> doit aller soit directement après la balise <figure> d’ouverture, soit directement avant la balise </figure> de fermeture :
<figure>
<img src="image1.jpg" alt="Bird Image">
<img src="image2.jpg" alt="Tree Image">
<img src="image3.jpg" alt="Sun Image">
<figcaption>Three images related to a topic</figcaption>
</figure>Les meilleures pratiques en matière de script HTML
Le HTML est l’une des technologies de base du développement web. Sa puissance et ses fonctionnalités impressionnantes l’ont rendu populaire auprès des développeurs et des chefs d’entreprise. Le développement frontend ne cesse d’innover, et pour rester dans la course, les développeurs doivent connaître les meilleures pratiques en matière de script HTML.
Utiliser des feuilles de style externes
Les styles en ligne encombrent votre code et le rendent illisible. À cette fin, créez toujours des liens vers des feuilles de style externes et utilisez-les. Évitez également d’utiliser des déclarations d’importation dans vos fichiers CSS, car elles génèrent une requête supplémentaire au serveur.
Il en va de même pour le CSS et le JavaScript en ligne. Outre les problèmes de lisibilité, cela alourdira votre document et rendra sa maintenance plus difficile, ce qui vous permettra d’éviter du code en ligne.
Utilisez des balises en minuscules
L’utilisation de caractères minuscules dans le code est une pratique standard de l’industrie. Bien que l’utilisation de majuscules ou d’autres cas de texte rendra quand même votre page, le problème n’est pas la normalisation mais la lisibilité du code.
La lisibilité du code est un aspect important du codage car elle contribue à rendre les applications maintenables et sûres. En outre, le développement web est le plus souvent le fait d’une équipe. Rendre votre code lisible rend votre travail et celui de votre équipe moins compliqué.
| Bonne pratique | Mauvaise pratique |
|---|---|
|
|
Ce qu’il faut faire et ne pas faire en matière de scripts
Alors qu’il y a beaucoup de choses à ne pas faire dans le code HTML, nous allons partager deux choses fondamentales à ne pas faire dans les scripts :
- Rédigez des codes bien indentés et formatés de manière cohérente : Un code propre et bien écrit favorise une meilleure lisibilité sur votre site, ce qui est une aide considérable pour votre développeur et les autres personnes susceptibles de travailler sur le site. Il témoigne également d’un grand professionnalisme et d’un souci du détail, ce qui reflète bien votre attitude en tant que développeur.
- Évitez d’inclure des commentaires excessifs : Les commentaires sont essentiels et rendent votre code plus facile à comprendre. Cependant, la syntaxe HTML est très explicite, et les commentaires ne sont donc pas nécessaires, sauf si vous devez clarifier la sémantique et les conventions de dénomination.
Validez et minifiez
Les codes de validation et de minification sont utilisés pour identifier les erreurs à un stade précoce. N’attendez pas de terminer votre document HTML – prenez l’habitude de valider et d’identifier les erreurs fréquemment. Vous pouvez effectuer la validation manuellement ou utiliser un outil de validation connu tel que le W3C Markup Validator.
Vous pouvez également profiter de la fonction intégrée de minification du code dans le tableau de bord MyKinsta. Cela permet aux clients d’activer la minification automatique de CSS et JavaScript d’un simple clic, ce qui accélérera leurs sites sans aucun effort manuel.
Dans le même temps, pratiquez la minification en supprimant tout ce qui n’est pas essentiel, comme les commentaires ou les espaces blancs. Assurez-vous d’écrire des codes propres et concis pour réduire la taille de votre fichier HTML. Vous pouvez utiliser des outils tels que HTML Minifier et d’autres.
Résumé
De nombreuses ressources sur les meilleures pratiques HTML5 pour 2021 sont disponibles en ligne pour vous aider. Toutefois, n’oubliez pas la règle générale en matière de code : la cohérence. Cet article a fourni des informations de base et vous a aidé à donner le coup d’envoi de ce voyage de développement frontend. Grâce à ce guide, vous deviendrez en un rien de temps un expert du HTML5 sémantiquement correct.
Lorsque vous êtes prêt, allez au-delà de ce que le HTML peut offrir et explorez également certains frameworks HTML open source pour créer des applications web modernes à page unique. Ils offrent une excellente synchronisation entre les données et l’interface utilisateur et fonctionnent de manière transparente avec CSS et JavaScript.
Nous avons manqué des bonnes pratiques HTML que vous utilisez dans votre propre code ? Faites-nous en part dans la section des commentaires !
Laisser un commentaire