Du code HTML et CSS généré par l’IA : ce qu’on vérifie avant de le coller (leçon 16)

🗓️ Mis à jour le 27 septembre 2026

Pourquoi demander à l’IA d’expliquer son code ?

Réponse directe : Parce que l’explication révèle ce que fait réellement le code : une police chargée depuis un serveur externe, un script de suivi, un formulaire qui envoie des données ailleurs. Un code que l’on ne sait pas expliquer ne devrait pas être publié. L’explication sert aussi à le modifier plus tard.

Consigne à copier :

Écris le HTML et le CSS d'un encadré « Nos horaires » (tableau de 7 jours, style sobre).
Contraintes : HTML et CSS uniquement, AUCUN JavaScript, aucune ressource externe (police, image, script).
Toutes les classes CSS commencent par « ilx-horaires- » pour ne pas toucher au reste du site.
Ensuite, explique en français, ligne par ligne, ce que fait chaque partie du code.

Quelles sont les cinq vérifications avant de coller un code ?

Réponse directe : Un : le code est valide selon le validateur du W3C. Deux : il ne charge aucun script ni ressource externe inconnu. Trois : il ne contient pas de formulaire qui envoie des données ailleurs. Quatre : il reste lisible et utilisable au clavier. Cinq : il s’affiche correctement sur mobile.

Étape 1 — Valider

Coller le code dans le service de validation du W3C (validator.w3.org, onglet « Validate by Direct Input »). Corriger les erreurs signalées, ou les faire corriger par l’IA.

Étape 2 — Chercher les ressources externes

Repérer <script src=, @import, https:// : chaque adresse externe doit être comprise et justifiée.

Étape 3 — Vérifier les formulaires

Un <form action="…"> envoie les données à l’adresse indiquée : elle doit être la vôtre.

Étape 4 — Tester au clavier

Parcourir le bloc avec la touche Tab : les liens et boutons doivent être atteignables et visibles.

Étape 5 — Tester sur mobile

Aperçu mobile de l’éditeur, puis un vrai téléphone : pas de défilement horizontal.

Comment éviter que le CSS généré casse le reste du site ?

Réponse directe : En imposant un préfixe unique à toutes les classes (par exemple « ilx-horaires- ») et en interdisant les règles sur les balises générales comme body, h2 ou p. Un CSS qui redéfinit tous les titres du site change l’apparence de pages que vous n’avez pas touchées.

Un code généré par l’IA peut-il créer une faille de sécurité ?

Réponse directe : Oui, surtout s’il contient du JavaScript, un formulaire ou des ressources externes. L’OWASP, référence de la sécurité web, classe l’injection de code et les composants vulnérables parmi les risques majeurs. Un simple encadré en HTML et CSS, sans script, présente en revanche très peu de risque.

C’est pour cela que la consigne interdit le JavaScript par défaut. La leçon 18 montre comment créer un petit outil interactif en gardant ce risque sous contrôle.

Où coller le code dans WordPress ?

Réponse directe : Dans un bloc « HTML personnalisé » de l’éditeur, pour un élément propre à une page. Le CSS réutilisé sur plusieurs pages va plutôt dans la personnalisation du thème ou une extension dédiée. WordPress filtre certaines balises selon le rôle de l’utilisateur : un script peut être retiré à l’enregistrement.

Pour un site plus complexe, confier ce travail à un spécialiste reste raisonnable : c’est le quotidien d’un expert IA pour le web. La formation accompagnée couvre ces vérifications sur votre propre site.

Questions fréquentes

Peut-on coller sur son site un code écrit par ChatGPT ?

Oui, après vérification : validité, absence de ressources externes inconnues, pas de formulaire vers un tiers, accessibilité et affichage mobile.

Comment vérifier qu’un code HTML est valide ?

Avec le service de validation du W3C (validator.w3.org), en collant le code dans l’onglet de saisie directe.

Pourquoi éviter le JavaScript généré ?

Parce qu’un script peut envoyer des données, charger des ressources ou modifier la page : il demande un niveau de vérification plus élevé que du HTML et du CSS.

Où mettre un code HTML dans WordPress ?

Dans un bloc « HTML personnalisé ». Le CSS commun à plusieurs pages va dans la personnalisation du thème.

Nos sources

Les chiffres cités dans cet article proviennent de sources publiques identifiées, consultées en septembre 2026 :

• W3C — Markup Validation Service
• OWASP Top 10 — les risques de sécurité web les plus critiques
• WordPress.org — Custom HTML block
• MDN Web Docs — Structurer le contenu avec HTML

Transparence — cet article a été produit avec l’assistance de l’intelligence artificielle pour la recherche et le croisement des sources, la structuration et la mise en page. Les données chiffrées proviennent des sources publiques citées ci-dessus et sont vérifiables.

La sélection du sujet, la vérification des faits et la responsabilité éditoriale sont assurées par la rédaction d’info-lux.com. Voir notre charte éditoriale et IA.

• 📁 Dans cet articleIntelligence artificielle & GEO

  
  Du code HTML et CSS généré par l’IA : ce qu’on vérifie avant de le coller (leçon 16)
• 
  Google renvoie des résultats faussés aux outils de suivi de positions : 13,2 % des relevés touchés en Belgique selon une étude, et comment lire son rapport SEO d’octobre
• 
  Créer une page WordPress avec l’IA, bloc par bloc (leçon 15)
• 
  IA et web, la semaine du 5 au 11 octobre 2026 : GPT-6 arrive dans ChatGPT gratuit, Claude interdit les faux réseaux de sources, et WordPress ouvre officiellement la porte aux agents IA
• 
  Exercice : une fiche produit complète avec l’IA — texte, photo et balisage (leçon 14)
• 
  Gemini 4 Argon : pourquoi Google garde son modèle d’IA le plus puissant sous clé