Node HTML n8n : extraire le contenu d'une page avec des sélecteurs CSS

Vous avez récupéré une page avec HTTP Request et il vous faut juste le prix, le titre, ou la liste des liens qu'elle contient. Écrire une regex sur du HTML est une mauvaise idée, et sortir un node Code pour trois lignes de Cheerio en est une autre. Le node HTML de n8n (n8n-nodes-base.html) fait exactement ça : il prend une chaîne HTML, applique des sélecteurs CSS, et sort du JSON propre — plus deux opérations bonus pour produire du HTML au lieu d'en consommer.

Trois opérations, deux directions

Le node HTML expose trois opérations dans le champ Operation :

• Extract HTML Content : le cœur du node. Vous donnez une chaîne HTML et une liste de sélecteurs CSS, il renvoie les valeurs correspondantes en JSON.
• Convert to HTML Table : transforme les items d'entrée en un tableau HTML (<table>), avec des options de mise en forme.
• Generate HTML Template : un éditeur de gabarit HTML où vous injectez vos données avec des expressions n8n.

Une opération pour lire du HTML, deux pour en écrire. Ce guide couvre les trois, en insistant sur la première : elle concentre l'essentiel des usages et l'essentiel des pièges.

Extract HTML Content : la donnée doit déjà être là

Comme le node XML, le node HTML ne va chercher aucune URL. Il attend que le HTML soit déjà présent dans l'item, et le paramètre Source Data dit où :

• JSON : le HTML est une chaîne dans un champ de l'item. Vous nommez ce champ dans JSON Property. En pratique c'est data, le champ que remplit un node HTTP Request configuré avec l'option Response → Response Format : Text. Sans ce réglage, n8n peut tenter d'interpréter la réponse et le node HTML ne recevra pas la chaîne attendue.
• Binary : le HTML est un fichier binaire attaché à l'item (téléchargement, pièce jointe, lecture disque). Vous nommez alors le champ binaire dans Input Binary Field.

Se tromper de source est l'erreur de configuration la plus courante : un node qui « ne renvoie rien » alors que le sélecteur est juste pointe souvent vers un champ vide.

Extraction Values : une ligne par valeur à extraire

Le paramètre Extraction Values est une collection : une ligne par donnée à récupérer, et chaque ligne comporte :

• Key : le nom du champ de sortie. C'est vous qui le choisissez — titre, prix, liens.
• CSS Selector : le sélecteur, en syntaxe CSS standard (h1, .price, #main .product-title, meta[property="og:title"], article a).
• Return Value : ce qu'on extrait des éléments qui matchent —
  • Text : le texte seul, balises retirées ; l'option Skip Selectors permet d'exclure des sous-éléments (une liste de sélecteurs séparés par des virgules) pour se débarrasser d'un <span> de mention légale collé dans le titre ;
  • HTML : le HTML interne de l'élément, quand vous voulez garder la structure ou la re-parser ;
  • Attribute : la valeur d'un attribut, dont le nom se saisit dans le champ Attribute qui apparaît alors (href, src, datetime, content) ;
  • Value : la valeur d'un champ de formulaire (input, select, textarea).
• Return Array : voir ci-dessous.

Return Array : la case qui change la forme de la sortie

Par défaut, un sélecteur qui matche vingt éléments ne renvoie que le premier, sous forme de chaîne : le comportement voulu pour un titre ou un prix, un piège pour tout le reste. Activez Return Array sur la ligne concernée et la clé contient alors un tableau de toutes les correspondances. Décidez de cette cardinalité en écrivant le sélecteur, pas le jour où le workflow casse. Le tableau reste dans un seul item n8n : pour traiter chaque élément séparément, enchaînez un node Split Out sur la clé, comme détaillé dans notre guide Split Out et Aggregate.

Les options : Trim Values et Clean Up Text

Deux options seulement, mais elles évitent beaucoup de nettoyage manuel. Trim Values retire espaces et retours à la ligne en début et fin de valeur ; il est rare d'avoir une raison de le désactiver. Clean Up Text va plus loin : il condense les espaces multiples et les blancs internes, ce qui rend exploitable un texte indenté sur dix lignes dans le source — utile avant un Number() sur un prix ou avant d'envoyer le texte à un modèle de langage.

Exemple : titre, prix et liens d'une page produit

Un HTTP Request en GET sur l'URL, Response Format Text, puis un node HTML en Extract HTML Content, Source Data JSON, JSON Property data, et trois lignes d'extraction :

Key	CSS Selector	Return Value	Return Array
titre	h1.product-title	Text	non
prix	meta[itemprop="price"]	Attribute → content	non
liens	.related a	Attribute → href	oui

La sortie ressemble à ceci :

{
  "titre": "T-shirt coton bio",
  "prix": "24.90",
  "liens": ["/produits/mug-emaille", "/produits/tote-bag", "/produits/casquette"]
}

Notez le choix du sélecteur pour le prix : viser une balise meta ou un attribut data-* plutôt que le texte visible évite d'avoir à nettoyer « 24,90 € TTC » et résiste mieux aux refontes. Ensuite, un node Edit Fields convertit les types et normalise les URL relatives, et le pipeline part vers une base ou une feuille de calcul.

Le piège numéro un : le JavaScript n'est pas exécuté

Le node HTML analyse une chaîne statique : il ne charge rien, ne rend rien, n'exécute aucun script. Sur une application React, Vue ou Angular, le HTML servi par le serveur n'est souvent qu'un <div id="root"></div> : vos sélecteurs matchent zéro élément et le node renvoie des champs vides sans erreur — bien plus déroutant qu'un échec franc. Le diagnostic prend dix secondes : ouvrez la sortie du node HTTP Request et cherchez votre valeur dans le champ data. Si le texte n'y est pas, aucun sélecteur ne le fera apparaître. Les issues sont connues :

• Passer par un navigateur headless qui rend la page avant de vous en donner le HTML — Browserless ou Playwright, montage détaillé dans notre guide du navigateur headless avec n8n. Le node HTML reprend ensuite son travail normalement.
• Utiliser une API de rendu et d'extraction comme Firecrawl, qui renvoie directement du Markdown ou du JSON structuré.
• Chercher l'API interne que le front appelle : l'onglet Réseau du navigateur révèle souvent un endpoint JSON bien plus stable que n'importe quel sélecteur.

Le panorama complet des stratégies, volet légal compris, est dans notre guide du scraping avec n8n.

Écrire des sélecteurs qui résistent au temps

Un extracteur basé sur des sélecteurs est fragile par construction : il encode une hypothèse sur la structure du document, et cette structure change sans préavis. Le problème est étudié de longue date sous le nom de wrapper induction. La synthèse d'Emilio Ferrara, Pasquale De Meo, Giacomo Fiumara et Robert Baumgartner, « Web data extraction, applications and techniques: A survey » (Knowledge-Based Systems, 2014), rappelle que la maintenance des extracteurs face à l'évolution des sites est le coût dominant de ces systèmes, bien avant leur écriture initiale (voir sur Google Scholar). Aditya Parameswaran, Nilesh Dalvi, Hector Garcia-Molina et Rajeev Rastogi ont formalisé la question dans « Optimal Schemes for Robust Web Extraction » (PVLDB, 2011) : parmi tous les chemins d'extraction qui désignent la même donnée, certains sont mesurablement plus robustes aux modifications du DOM, et les auteurs donnent des algorithmes pour construire le plus robuste (voir sur Google Scholar).

Traduit en pratique dans n8n :

• Préférez la sémantique aux classes générées : meta[property="og:title"], [itemprop="price"], time[datetime] survivent aux refontes ; .css-1x7k2p9 disparaît au prochain build.
• Sélecteur le plus court qui reste non ambigu : chaque niveau de descendance ajouté est une occasion de casser.
• Vérifiez plutôt que d'espérer : un node IF qui teste {{ $json.prix ? true : false }} et déclenche une alerte transforme une extraction silencieusement vide en incident visible, au lieu d'une base qui se remplit de champs null.
• Cas tordus : quand un sélecteur ne suffit pas (deux variantes de gabarit, déduplication, URL à rendre absolues), un node Code en aval reste plus lisible qu'une chaîne de sélecteurs acrobatique.

Produire du HTML : table et template

Convert to HTML Table prend les items d'entrée et rend un tableau HTML. Ses options couvrent la présentation : Capitalize Headers met les en-têtes en majuscules, Caption ajoute un titre au tableau, Custom Styling active une mise en forme personnalisée, et Table Attributes, Header Attributes, Row Attributes, Cell Attributes injectent des attributs HTML sur les <table>, <th>, <tr> et <td>. C'est la façon la plus rapide de transformer un résultat de requête en rapport lisible dans un email.

Generate HTML Template ouvre un éditeur où vous écrivez un gabarit complet : HTML, styles dans une balise <style>, scripts si nécessaire, et expressions n8n entre doubles accolades pour injecter vos données. La sortie est une chaîne HTML à passer au corps d'un email — voir notre guide envoyer des emails en SMTP avec n8n. Rappel utile : les clients de messagerie n'exécutent pas de JavaScript et ne supportent qu'un sous-ensemble de CSS ; restez sur des styles en ligne et une structure simple.

Les frictions restantes

• Encodage : une page en ISO-8859-1 récupérée en texte peut arriver avec des accents cassés. Le node HTML n'y peut rien, le problème est en amont : vérifiez le charset réel de la réponse et, au besoin, faites transiter la page en binaire pour contrôler l'encodage à la conversion.
• Entités HTML : &,   et compagnie peuvent subsister selon le mode de retour. Un remplacement dans un Edit Fields règle le cas.
• HTML malformé : une page dont les balises ne ferment pas peut produire une arborescence différente de celle qu'affiche l'inspecteur du navigateur. En cas de doute, testez le sélecteur sur le HTML brut, pas sur le DOM rendu.

Pour aller plus loin

Le node HTML est une brique volontairement modeste : une chaîne en entrée, des sélecteurs, du JSON en sortie. Bien utilisé — bonne source, Return Array décidé consciemment, sélecteurs sémantiques, contrôle de non-vide en aval — il remplace la plupart des nodes Code de scraping. Si votre objectif final est de rendre ces contenus interrogeables par une IA, le Pack Assistant RAG (119 €) fournit la chaîne d'ingestion et de recherche à brancher derrière l'extraction. Et si les pages surveillées alimentent surtout des réponses à envoyer par email, le Pack Inbox IA (79 €) couvre le tri, la rédaction et l'envoi côté messagerie.