L’IA est excellente pour générer du HTML, mais le résultat par défaut est souvent un enchevêtrement de <div> imbriquées et de classes utilitaires qui se transforment en arborescences de conteneurs profondes. Quelques règles dans le prompt résolvent ce problème.
Demander du HTML sémantique
Indiquez au modèle d’utiliser de vraies balises : <h1>–<h3> pour les titres, <p> pour le texte, <button> ou <a class="button"> pour les appels à l’action, <ul> pour les listes. Les balises natives correspondent à des widgets natifs.
Limiter l’imbrication
Ajoutez : « Gardez le DOM peu profond — un conteneur par section, pas d’imbrication superflue. » Cela réduit directement le nombre de couches de conteneurs que vous obtenez après conversion.
Préférer les styles en ligne ou un seul bloc de style
Demandez des styles en ligne ou un seul bloc <style> plutôt qu’un framework externe. Le convertisseur lit les styles calculés, donc un CSS autonome se transfère mieux.
Un prompt de départ
« Générez une section HTML responsive pour [sujet]. Utilisez des balises sémantiques (h2, p, button, ul), gardez le DOM peu profond avec un conteneur par bloc, mettez tout le CSS dans un seul bloc de style, et utilisez les classes d’icônes Font Awesome pour les icônes (comme <i class=”fas fa-check”>, pas de SVG en ligne ni de Base64). Pas de scripts ni de polices externes. »
Collez le résultat dans le convertisseur, passez en mode Composants natifs, et vérifiez la carte de structure — vous devriez voir beaucoup moins de conteneurs et principalement des lignes vertes « conversion directe ».