5546 sujets

Sémantique web et HTML

Erreur ou pas erreur ?

Bonjour à vous,

Je viens vous exposer un petit problème que je viens de rencontrer, pour savoir si vous avez également ce soucis et éventuellement avoir une solution. Aujourd'hui, jeudi 2 mars 2023, j'ai eu une mise à jour de Visual Studio Code. Et soudain, alors qu'avant tout fonctionnait bien, j'ai ceci :

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/styles.css">
    <title>&lt;a>, balise d'ancre hypertexte</title>
</head>


Dans le <title>, j'avais l'habitude d'écrire le premier caractère chevron ouvrant en entité HTML (&lt;) et de taper directement le caractère chevron fermant sans avoir à taper son entité HTML. Et cela fonctionnait bien ! Sauf que depuis aujourd'hui, le caractère chevron fermant est passé en rouge, ce qui signifie logiquement qu'il y a une erreur. Cependant, j'ai vérifié la page web avec le validator HTML de W3C et il n'y a aucune erreur, ni même un avertissement. Chez vous aussi ça vous le fait ? Vous avez une erreur ? Ou bien il ne faut pas en tenir compte ?

Cela ne se voit pas dans le code HTML du forum d'Alsacreation, alors j'ai fait une capture écran de mon Visual Studio Code pour illustrer mon souci :
upload/1677763998-62242-capture-dancran-2023-03-02-14.jpg

Merci pour votre aide
Modifié par ObiJuanKenobi (02 Mar 2023 - 14:33)
Bonjour,

Les caractères <, >, & et " sont des caractères réservés en html : il faut toujours utiliser les entités html correspondantes pour les utiliser dans ton contenu.

Les navigateurs modernes peuvent réussir à corriger ce genre d'erreur, mais il s'agit bien d'une erreur de syntaxe et tu devrais idéalement utiliser l'entité html pour le chevron fermant.
Mais avant, je n'avais aucune erreur (caractère en rouge) ! En plus, c'est un formateur qui m'avait donné cette astuce, c'est-à-dire placer l'entité HTML pour le chevron ouvrant mais pas pour le chevron fermant. Ce n'est qu'aujourd'hui, avec la mise à jour de VSC, que j'ai un caractère rouge. De plus, le Validator de W3C ne donne aucune erreur. Je me demande si ce n'est pas tout simplement qu'un bug de la version.
ObiJuanKenobi a écrit :
En plus, c'est un formateur qui m'avait donné cette astuce, c'est-à-dire placer l'entité HTML pour le chevron ouvrant mais pas pour le chevron fermant.

Je ne veux même pas savoir où l'on apprend ça, c'est vraiment du bricolage... Pour un site statique, il faut utiliser les entités html correspondantes, comme l'a déjà dit Pitet.

Pour un site dynamique la question se pose différemment : on peut enregistrer les caractères > ou < tel quel sachant que le code ou le framework utilisé fera les conversions nécessaires correspondantes avant l'enregistrement en base de données, ou alors à la restitution dans la page (ou les deux). Par exemple, en php, on pourra utiliser les fonctions htmlspecialchars() ou htmlentities() (je ne sais plus trop précisément, le temps où je codais en php remonte à loin).
En effet, ton code est correct d'après le validateur W3C ! Ce dernier est bien plus souple que mes vieilles conventions Smiley cligne
Les spécifications html ont beaucoup évolué, par exemple "ambiguous ampersand" qui permet d'éviter de devoir échapper tous les caractères & si je ne me trompe pas. Pour les chevrons, je préfère toujours utiliser les entités si possible.

L'extension que tu utilises pour valider ton code html dans VSC doit avoir des règles de validation plus strictes que le W3C, à voir dans la doc de l'extension si tu peux configurer les règles.
Modérateur
Bonjour,

Quel est le doctype ?

Parce que quand on voit <meta http-equiv="X-UA-Compatible" content="IE=edge"> dans le code, ça rassure pas ! Smiley cligne

Amicalement,
Le doctype est :
<!DOCTYPE html>

Quand à :
<meta http-equiv="X-UA-Compatible" content="IE=edge">

j'ai toujours utilisé celui-ci, je ne sais pas s'il y en a un autre.

Qu'est-ce qui ne rassure pas ?
Modérateur
Bonjour
ObiJuanKenobi a écrit :
Quand à :
<meta http-equiv="X-UA-Compatible" content="IE=edge">

j'ai toujours utilisé celui-ci, je ne sais pas s'il y en a un autre.

Qu'est-ce qui ne rassure pas ?

Il sert à quoi ?

Amicalement,
Bonsoir,

En fait, cette ligne se met automatiquement, par défaut dans VS Code, quand on crée un fichier et qu'on tape "! touche tab" : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Modérateur
Bonjour,

alain_47 a écrit :
En fait, cette ligne se met automatiquement, par défaut dans VS Code, quand on crée un fichier et qu'on tape "! touche tab"


ObiJuanKenobi a écrit :
Oui, voilà, j'allai le dire aussi.


Mouais. Bah ça sert à rien.

Amicalement,
parsimonhi, au lieu de te contenter de dire que ça sert à rien, au moins explique le pourquoi.
C'est cela qui fait que j'ai une erreur dans mon code avec les entités HTML ?
Parce que quand même, c'est VSC qui l'affiche automatiquement et s'il l'affiche c'est qu'il a une bonne raison, à moins que tu sais mieux que Visual Studio Code ?
Modérateur
Bonjour,

Concernant la question initiale (&lt;a> est-il valide ?), ça m'a l'air de dépendre du doctype (c'est pour ça que j'ai demandé quel était le doctype), et de la date du document qu'on consulte Smiley lol .

Par exemple, dans https://www.w3.org/International/questions/qa-escapes - WHEN ESCAPES CAN BE USEFUL (document de 2010, donc ça date un peu), il est clairement indiqué qu'il faut utiliser &gt;.

Mais de toute façon, c'est une mauvaise pratique de laisser trainer des ">" parce que ça peut probablement dans certains cas tordus créer des failles de sécurité.

Et en plus c'est laid quand il s'agit d'une balise.

Je dirais donc que VS Code a bien raison de râler quand il voit &lt;a>.

Amicalement,
Modérateur
Bonjour,

ObiJuanKenobi a écrit :
parsimonhi, au lieu de te contenter de dire que ça sert à rien, au moins explique le pourquoi.

Le <meta http-equiv="X-UA-Compatible" content="IE=edge"> est une combine de Microsoft qui en gros permettait d'indiquer quelles versions d'IE on supportait. Par le passé, ça ne servait déjà pas à grand chose pour la plupart des développeurs. Et maintenant que Edge fonctionne quasi comme Chrome et que IE a été retiré de la circulation, ça ne sert vraiment quasiment plus. Ça peut peut-être encore servir pour des vieux projets qui n'auraient pas encore été mis à jour, mais certainement pas pour le code que tu fais toi en 2023.

Amicalement,
parsimonhi a écrit :
Concernant la question initiale (&amp;lt;a&gt; est-il valide ?), ça m'a l'air de dépendre du doctype (c'est pour ça que j'ai demandé quel était le doctype), et de la date du document qu'on consulte Smiley lol .

Sauf que j'ai précisé qu'avant la mise à jour de VSC, intervenue il y a 4 ou 5 jours, je n'avais pas le problème du ">" en rouge qui semblait indiquer qu'il y a une erreur de syntaxe et que j'utilise <meta http-equiv="X-UA-Compatible" content="IE=edge"> depuis plusieurs mois.
Modifié par ObiJuanKenobi (08 Mar 2023 - 18:21)
Modérateur
Bonjour,

ObiJuanKenobi a écrit :
OK, c'est plus claire mais en quoi cela concerne mon problème sur les entités HTML ?


Je pensais que tu utilisais peut-être un doctype qui n'était pas celui du html5 (le fait que tu utilises <meta http-equiv="X-UA-Compatible" content="IE=edge"> allait dans ce sens), et que peut-être VS Code en tenait compte lorsqu'il regardait la validité de ton code. Mais ce n'est pas le cas. Ton doctype est bien celui du html5, et <meta http-equiv="X-UA-Compatible" content="IE=edge"> trainait dans ton code parce que VS Code le laisse sans doute "par habitude".

Est-ce que ton code &lt;a> est valide en HTML5 ? Probablement. Est-ce que tu as raison d'utiliser &lt;a> ? Probablement pas ! (voir ma réponse détaillée un peu plus haut).

Amicalement,
Modérateur
Bonjour,

ObiJuanKenobi a écrit :

Sauf que j'ai précisé qu'avant la mise à jour de VSC, intervenue il y a 4 ou 5 jours, je n'avais pas le problème du "&gt;" en rouge qui semblait indiquer qu'il y a une erreur de syntaxe et que j'utilise &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; depuis plusieurs mois.

Le monde est imparfait, et VS Code aussi ! Smiley lol

Amicalement,
Bonsoir,

Oui, cette ligne ne sert à rien.

C'est juste Microsoft qui fait de la pub pour sa Edge Smiley cligne
Modérateur
C'est juste une préférence de VS Code. Cela ne me dérange pas perso car travaillant en React, la plus part du temps, c'est une double fermeture de composants que je n'ai pas vu. Ils en parlent ici

TLDR:
a écrit :
Disabling Editor › Bracket Pair Colorization

"editor.bracketPairColorization.enabled": false
removes the red color from the > symbols.
Prévenir un modérateur
Répondre au sujet
Aller à