Comment résoudre la plupart des problèmes d'affichage HTML5

HTML5, la dernière version du langage HTML, se distingue de ses ancêtres par sa capacité à fournir un support natif pour l'audio et la vidéo. Il prend également en charge les formats d'images vectorielles tels que SVG et Canvas.

Les vidéos, les images dynamiques ou encore les bannières HTML5 que vous créez avec Abyssale seraient inutiles sans ce langage. Nous avons donc décidé de vous aider avec le HTML5, qui peut parfois sembler un peu capricieux quand on ne le maîtrise pas.

Dans cet article, nous allons partager avec vous une liste des problèmes d'affichage les plus fréquemment rencontrés avec HTML5. Pour chacun d'entre eux, nous partagerons les clés pour le résoudre, même si vous ne maîtrisez pas le langage.

Principes fondamentaux de HTML5

Nous n'allons pas vous faire un cours sur ce langage. L'idée est plutôt de vous fournir les outils pour détecter et corriger facilement les erreurs HTML5.

Alors quoi de mieux que d'emprunter les antisèches des experts en la matière ? Pas de panique ! Il s'agit simplement d'une liste de balises et d'attributs HTML5 utiles. Elle vous aide à comprendre le code que vous avez sous les yeux et à identifier chaque élément. Pas besoin de l'apprendre par cœur. Il suffit de la sortir lorsqu'un problème se présente.

Nous vous renvoyons donc à html.com et à son article sur les fiches de nettoyage HTML5. Ces cheat sheets vous aideront à résoudre certains des problèmes énumérés ci-dessous.

Problème 1 : Balises HTML5 mal fermées ou imbriquées

Si vous n'utilisez pas de CMS pour créer votre page, il est probable qu'elle présente des problèmes d'affichage. Ces problèmes sont souvent liés à des balises HTML5 qui ne sont pas correctement fermées ou imbriquées. La structure du document est alors incorrecte et l'affichage ne correspond pas à vos attentes.

Voici un exemple de balise mal imbriquée :

Pour que cela fonctionne, la balise de paragraphe doit être fermée avant la balise de division, puisqu'elle a été ouverte après elle.

Voici un autre exemple de balise mal fermée :

Dans ce cas, la balise de division est fermée, alors que la balise de paragraphe ne l'est pas.

Un bon balisage doit prendre la forme suivante :

L'une des premières choses à faire en cas de mauvais affichage est donc de vérifier l'imbrication des balises et de s'assurer qu'elles sont toutes fermées.

Problème 2 : Erreurs de syntaxe

C'est l'un des problèmes les plus simples à corriger, mais l'un des plus longs à identifier lors du codage. Pourtant, les erreurs de syntaxe peuvent empêcher le code HTML5 de fonctionner correctement.

Par exemple, si nous tapons la phrase suivante‍

Tout se passe bien. Cependant, le manque d'espace sur "a href" peut poser des problèmes.

En cas de problème, vérifiez que toute la syntaxe est correcte.

Problème 3 : Liens brisés

Comme expliqué dans l'introduction, HTML5 prend en charge l'audio, la vidéo et les images vectorielles. Par conséquent, si un lien ne fonctionne pas, c'est peut-être parce qu'il est incorrect ou inexistant. Il se peut qu'il n'affiche pas la ressource attendue.

Dans ce cas, copiez l'URL dans votre code HTML et collez-le dans la barre de navigation de votre navigateur web. Si le multimédia ne s'affiche pas, votre lien n'est pas valide. Vous devez le modifier.

Problème 4 : Chemins d'accès incorrects

Vous avez voulu insérer une image avec la balise image, mais rien n'y fait ? Si votre balise est fermée, imbriquée et que vous ne détectez aucune erreur de syntaxe, il faut alors regarder le chemin d'accès à l'image. Celui-ci peut être incorrect, ou le nom du fichier peut être mal orthographié.

Si, malgré vos vérifications, l'image ne s'affiche toujours pas, cela peut être lié aux autorisations d'accès au fichier. Dans ce cas, assurez-vous que le fichier image dispose des autorisations de lecture appropriées afin que le serveur puisse le servir aux visiteurs de la page.

Question 5 : Compatibilité des navigateurs avec HTML5

Les éléments HTML5 peuvent être interprétés différemment d'un navigateur à l'autre. Cela peut entraîner des problèmes d'affichage.

Imaginons le code HTML suivant :

Son but est d'afficher un champ de saisie de date. Cependant, son affichage sera différent entre Google Chrome et une ancienne version d'Internet Explorer, par exemple :

• Sur Chrome, vous verrez un calendrier apparaître lorsque l'utilisateur saisit une date.
• Sur Internet Explorer, l'élément sera simplement affiché comme un champ de texte standard, sans calendrier déroulant. L'utilisateur devra saisir manuellement la date dans le bon format. Il est également possible que le champ de saisie n'apparaisse pas du tout.

Ces problèmes de compatibilité ne peuvent être résolus qu'à l'aide de polyfill ou d'outils javascript. Si vous n'êtes pas familier avec ce langage, vous devrez vous renseigner ou faire appel à un expert en la matière.

Problème 6 : Utilisation incorrecte des attributs HTML5

HTML5 est une évolution du langage HTML. De nouveaux attributs sont apparus et d'autres ont disparu. Peut-être n'arrivez-vous pas à obtenir l'affichage que vous souhaitez à cause de mauvais attributs. Dans ce cas, les antisèches que nous avons partagées avec vous au début de cet article prennent tout leur sens.

Vérifiez que les attributs que vous utilisez sont adaptés à ce que vous voulez créer. Par exemple, vous pouvez vouloir afficher une image et écrire l'attribut suivant :

Mais cela ne fonctionne pas. Pour afficher une image, l'attribut est le suivant :

Oui, nous exagérons un peu avec notre exemple ! Quoique... 😉

Numéro 7 (Bonus) : L'absence de balises sémantiques

C'est un problème difficile à détecter à première vue, car à l'affichage, tout fonctionne. Pourtant, une mauvaise structure sémantique rend votre contenu moins compréhensible, voire inaccessible, pour les moteurs de recherche et les utilisateurs.

Si c'est votre cas, il se peut que vous ne soyez pas directement conscient du problème. Cependant, après quelques mois, vous remarquerez un mauvais référencement et/ou un taux de rebond élevé sur vos pages.

Si vous utilisez la balise HTML5 division dans l'ensemble de votre contenu, vous avez peut-être une explication. Avec cette balise, vous ne hiérarchisez pas les informations que vous partagez sur votre page. Les moteurs de recherche et les utilisateurs ont besoin d'une structure pour bien comprendre votre contenu.

C'est pourquoi il est important d'utiliser des balises sémantiques telles que les suivantes :

Ils aident à définir la structure de votre contenu.

‍

Enfin, la grande majorité des problèmes d'affichage que vous rencontrerez avec HTML5 peuvent être résolus par de simples vérifications. Il n'est même pas nécessaire d'être formé au langage pour cela.

Il est possible que vous rencontriez un certain nombre de problèmes autres que ceux énumérés ici. Mais cette première liste, non exhaustive, vous permettra de vous assurer que l'origine du problème n'est pas le non-respect des fondamentaux du HTML5.

Sur Abyssale, nous mettons à votre disposition une multitude d'outils de création visuelle automatisée. Vous pouvez créer des images, des vidéos et même des bannières HTML5 pour vos campagnes de publicité, d'emailing ou autres.

Pour rester au courant des dernières nouvelles Abyssale et des développements dans le domaine de l'automatisation visuelle, suivez-nous sur Linkedin.