Ressources · Intégration n8n

Nœud HTML n8nConfigurer HTML dans n8n.

Le nœud HTML n8n fabrique du balisage et sait aussi le relire. Il transforme les données d'un workflow en page, et il ressort des valeurs propres d'une page existante. Trois opérations couvrent tout, rien à connecter côté compte, et il tourne sur chaque item qui lui arrive.

Tester le nœud HTML sur n8nVoir les 3 opérations

Avis vérifiés sur Trustpilot · Agence IA, automatisation & growth

Pourquoi automatiser

À quoi sert le nœud HTML n8n dans un workflow ?

Livré avec n8n, ce nœud couvre les deux sens du balisage. Dans un sens il écrit une page à partir des données déjà présentes dans le workflow. Dans l'autre il lit du HTML, arrivé soit comme texte dans un champ JSON, soit comme fichier binaire .html, et en ressort les valeurs que tu désignes. Une liste déroulante Operation, trois choix, et le panneau change selon celui que tu prends.

Le nœud est apparu en n8n 0.213.0, à la place de l'ancien nœud HTML Extract. Ça explique la forme du panneau : l'extraction existait d'abord, le rendu de template et la conversion en tableau sont venus se ranger dans le même nœud ensuite. Le catalogue le donne en version 1. Un workflow ancien peut donc afficher un panneau plus court, et un nœud ne change jamais de version tout seul.

Surveiller une page publique. Une exécution planifiée récupère la page avec HTTP Request, passe la réponse à Extract HTML Content, et nomme une clé par sélecteur CSS : un tarif, un intitulé, une mention de disponibilité. En sortie, un item plat, prêt pour la comparaison, sans une ligne de code au milieu.

Envoyer un récapitulatif lisible. Generate HTML template reprend les champs de chaque item et les pose dans un balisage que tu maîtrises, expressions comprises. Le document part ensuite dans le corps d'un message Gmail. Quand la mise en page n'a pas besoin d'être soignée, Convert to HTML Table fait le même travail sans écrire une ligne de balisage : il imprime les items en tableau et laisse les attributs faire le style.

Lire une pièce jointe. Un rapport arrive au format .html, le champ binaire entre dans Extract HTML Content avec Source Data sur binary, deux sélecteurs suffisent à sortir les chiffres utiles. Derrière, Edit Fields (Set) remet les noms de champs dans le format attendu, et l'alerte tombe dans Slack.

Les limites se résument vite. Le nœud ne télécharge rien : la page doit être récupérée avant. Il n'exécute pas le JavaScript, les balises script sont recopiées telles quelles dans le rendu, ce qui veut aussi dire qu'une page construite dans le navigateur ne donnera rien à un sélecteur. Et un template nourri avec des valeurs non vérifiées ouvre une faille de cross-site scripting, donc regarde ce que tu injectes avant de rendre. Pour le reste de l'outil, le tour complet est dans Avis n8n.

Actions

Quelle opération du nœud HTML prendre ?

Le nœud HTML expose 3 opérations. Pour chacune : le nœud tel que tu le configures dans n8n, les champs obligatoires, et nos notes de terrain.

01

Generate HTML template

generateHtmlTemplate

Ce que tu vois dans n8n

Notes & cas d'usage

Tu écris le balisage une fois, l'opération le rend pour chaque item qui passe. Résultat : un document fini, pas une collection de champs. Du HTML standard, du CSS dans une balise style et des expressions entourées de {{}} cohabitent dans le même template.

Paramètres clés

  • HTML Template : le balisage à rendre. Les valeurs viennent du nœud précédent via une expression du type {{ $json.total }}. Ce qui se trouve dans une balise script reste dans la sortie, mais n8n ne l'exécute pas.
Cas d'usage
un compte rendu mis en forme, envoyé comme corps de mail. Nettoie ce que tu injectes : une valeur non vérifiée crée une faille de cross-site scripting.
02

Extract HTML Content

extractHtmlContent

Ce que tu vois dans n8n

Notes & cas d'usage

Donne une page et une liste de sélecteurs à cette opération, elle rend un champ par sélecteur sur l'item sortant.

Paramètres clés

  • Input Binary Field : requis, le nom du champ binaire qui contient le fichier à extraire.
  • Source Data : binary pour un fichier, json pour du HTML rangé dans une propriété.
  • Extraction Values : une entrée par valeur, avec une Key, un CSS Selector du genre .price et un Return Value parmi text, html, attribute et value. Attribute désigne celui à lire, Skip Selectors écarte des morceaux de page, Return Array sépare les correspondances.
  • Trim Values et Clean Up Text : suppriment espaces et retours à la ligne autour des valeurs.
Cas d'usage
sortir le tarif et l'intitulé d'une page de listing.
03

Convert to HTML Table

convertToHtmlTable

Ce que tu vois dans n8n

Notes & cas d'usage

Rien à remplir ici. L'opération attend les données d'un autre nœud et imprime les items en tableau, une colonne par champ. Tout le réglage passe par ses options.

Paramètres clés

  • Capitalize Headers : activé, les en-têtes du tableau passent en capitales.
  • Custom Styling : activé, ton propre style s'applique à la place de celui par défaut.
  • Caption : une légende ajoutée au tableau.
  • Table Attributes, Header Attributes, Row Attributes et Cell Attributes : les attributs posés sur le tableau, ses en-têtes, ses lignes et ses cellules, un attribut de style par exemple.
Cas d'usage
un point quotidien dont les colonnes bougent souvent, là où un template écrit à la main demanderait une retouche chaque semaine.
Besoin d'aide

Besoin d'aide pour automatiser HTML avec n8n ?

L'équipe te répond directement.

Chaque message est lu par une personne.

FAQ

Les questions qui reviennent sur le nœud HTML

01Le nœud HTML est-il gratuit sur n8n Cloud et en auto-hébergé ?
Oui. C'est un nœud core, livré avec n8n : rien à installer, aucun coût supplémentaire côté n8n. Il se comporte pareil sur n8n Cloud, l'offre hébergée par n8n, et sur une instance que tu héberges toi-même avec Docker ou npm, en Community Edition sous licence Sustainable Use. Un workflow construit d'un côté tourne à l'identique de l'autre. La seule différence tient à la version de n8n installée, qui décide des options affichées dans le panneau du nœud. Rien à acheter, donc, et rien à ajouter depuis un catalogue externe : l'opération apparaît dès que tu poses le nœud sur la toile.
02Quels identifiants faut-il pour utiliser le nœud HTML ?
Aucun. Pas de credential à créer, pas de sélecteur Authentication dans le panneau, puisque le nœud travaille sur des données déjà présentes dans le workflow au lieu d'appeler un service. Rien à configurer côté compte, donc. Ce dont il a besoin, en revanche, c'est d'une entrée : il s'exécute sur chaque item qui lui arrive et n'ouvre pas un workflow tout seul. Un déclencheur doit le précéder, qu'il s'agisse d'un Schedule Trigger, d'un Webhook ou du trigger de l'outil que tu automatises.
03Quelles sont les limites du nœud HTML n8n ?
Il part de balisage déjà là. Récupérer la page, c'est le travail d'un autre nœud, le plus souvent HTTP Request. Il n'exécute pas non plus le JavaScript : les balises script d'un template sont recopiées telles quelles dans la sortie, et une page qui construit son contenu dans le navigateur ne donnera rien à un sélecteur CSS. Générer un template à partir d'une entrée non vérifiée reste une faille de cross-site scripting. Enfin le catalogue donne la version 1 du nœud, et un workflow plus ancien peut afficher un panneau plus pauvre.
04Nœud HTML ou nœud Code pour analyser une page ?
Prends le nœud HTML dès que le besoin se raconte comme une liste de sélecteurs CSS, ce qui couvre la majorité des cas. Tu nommes une clé, tu nommes un sélecteur, tu choisis text, html, attribute ou value, et c'est réglé : aucun script à maintenir, un panneau qu'un collègue relit sans toi. Passe à autre chose quand l'extraction dépend d'une logique plutôt que d'une structure, par exemple parcourir un arbre ou réparer un document cassé. Même logique au rendu : Convert to HTML Table pour un tableau simple, Generate HTML template quand la mise en page compte.
05n8n ou Make pour manipuler du HTML ?
Ça dépend de l'endroit où tes données ont le droit de vivre. Make, ex-Integromat, est une plateforme d'automatisation hébergée, sans option d'auto-hébergement, facturée à l'opération : pratique pour une équipe qui ne veut rien administrer. n8n s'auto-héberge avec Docker ou npm, donc les pages que tu analyses et les documents que tu génères restent sur ta machine, et le coût suit l'instance plutôt que le volume. Les deux dessinent la logique visuellement. Tranche sur l'hébergement, la maîtrise des données, le modèle de coût et la lecture du workflow.
Hack'celeration Lab

Reçois nos tips intégration chaque semaine.

Pas de spam. Désinscription à tout moment.

Même plateforme

Autres docs utiles sur ce stack.

Voir toutes les intégrations