Bloc HTML Notion : créer des éléments interactifs (2026)
Le bloc HTML de Notion exécute du vrai HTML, CSS et JavaScript directement dans une page, sans quitter Notion ni passer par un service tiers. Introduit dans Notion 3.6 le 1er juillet 2026, il permet de créer des éléments interactifs — calculateur de ROI, quiz noté, organigramme dynamique — que l’agent IA de Notion peut générer à partir d’une simple description.
J’ai testé cette fonctionnalité dès sa sortie, dans le contexte du buzz vidéo et social de juillet 2026 (chaînes YouTube spécialisées, posts LinkedIn, fil r/Notion « HTML blocks just landed »). Notion comptant désormais plus de 100 millions d’utilisateurs dans le monde selon le blog officiel de Notion, l’arrivée d’un bloc capable d’exécuter du code marque une étape : Notion ne se contente plus d’afficher du contenu, il en fait tourner. Voici comment l’utiliser, ce qu’il permet réellement, et surtout ce qu’il ne permet pas.
Qu’est-ce que le bloc HTML de Notion ?
Le bloc HTML est un bloc natif qui rend du HTML, du CSS et du JavaScript en direct à l’intérieur d’une page Notion. Contrairement à un bloc embed qui affiche une page externe via une iframe, le bloc HTML héberge et exécute votre propre code, sans dépendre d’une URL ni d’un service extérieur.
Concrètement, cela signifie que vous pouvez insérer un mini-outil interactif — un formulaire de calcul, un quiz, un graphique animé — qui vit dans la page et fonctionne pour toute personne y ayant accès. Notion HQ décrit ces blocs comme des « expériences interactives personnalisées » générées par ses agents IA, et met l’accent sur la collaboration : n’importe quel membre de l’équipe peut ensuite les utiliser ou les faire évoluer.
Cette fonctionnalité fait partie de Notion 3.6, la mise à jour la plus importante depuis Notion 3.4. Elle accompagne l’arrivée des agents externes (Claude, Cursor), des labels de locuteurs dans les AI Meeting Notes et de la prise en charge des fichiers Microsoft Office. Le bloc HTML rejoint ainsi la famille des blocs interactifs aux côtés du bloc Tabs introduit en mars 2026.
Ce que le bloc HTML peut contenir
Le bloc HTML accepte les trois briques du web front-end :
- HTML pour la structure de l’élément (champs, boutons, tableaux, texte)
- CSS pour la mise en forme (couleurs, disposition, animations simples)
- JavaScript pour l’interactivité (calculs, logique de quiz, événements au clic)
Cela ouvre la porte à des calculateurs, des graphiques, des tableaux blancs simples, des diagrammes et même de petits mini-jeux, comme le confirment plusieurs guides publiés en juillet 2026. L’élément se comporte comme une véritable mini-application, pas comme une capture statique.
Comment créer un bloc HTML : guide pas à pas
Créer un bloc HTML prend moins d’une minute si vous laissez l’IA écrire le code. Voici la marche à suivre que je recommande.
Étape 1 : Insérer le bloc HTML
Placez le curseur à l’endroit voulu dans votre page, tapez /html, puis sélectionnez l’option bloc HTML dans le menu. Vous obtenez un conteneur vide prêt à recevoir du code ou une consigne pour l’IA.
Étape 2 : Générer l’élément avec Notion AI
Si vous disposez de Notion AI (plan Business ou supérieur), décrivez l’élément souhaité en langage naturel. Par exemple : « Crée un calculateur de ROI qui prend le coût mensuel d’un outil, le temps gagné par semaine et le taux horaire, puis affiche l’économie annuelle. » L’agent écrit le HTML, le CSS et le JavaScript, puis affiche l’élément interactif directement dans la page.
C’est ici que la logique d’agent prend tout son sens : la génération repose sur le même moteur que les Custom Agents de Notion. Vous pouvez aussi partir du contenu existant de la page — transformer un document produit en quiz noté, par exemple.
Étape 3 : Téléverser ou coller votre propre code
Si vous préférez écrire vous-même, deux options complètent la génération par IA : téléverser un fichier HTML depuis votre ordinateur, ou coller directement votre code. Cette méthode convient aux personnes à l’aise avec le front-end qui veulent un contrôle précis sur le rendu.
Étape 4 : Ajuster et itérer
La modification du code en place reste limitée au lancement. Pour corriger un élément, le plus simple est de redemander à l’IA de l’ajuster (« ajoute un champ TVA au calculateur ») ou de téléverser une version révisée du fichier. Gardez en tête que chaque bloc est un instantané de code : il ne se met pas à jour tout seul en fonction de données externes.
Le workflow complet tient en moins d’une minute lorsque Notion AI écrit le code.
Trois cas d’usage concrets
Notion met en avant trois exemples qui résument bien le potentiel du bloc HTML. Je les ai reproduits pour évaluer leur utilité réelle.
| Cas d’usage | Ce que ça remplace | Généré par l’IA |
|---|---|---|
| Calculateur de ROI | Feuille de calcul externe partagée | Oui, à partir d’une description |
| Quiz de formation noté | Formulaire externe (Google Forms, Tally) | Oui, à partir du contenu de la page |
| Organigramme interactif | Schéma statique ou outil tiers | Oui, à partir d’une base « personnes » |
Le calculateur de ROI
Un calculateur personnalisable par secteur ou par pile d’outils permet, en présentation client, d’ajuster les chiffres en direct. L’utilisateur saisit ses paramètres, le résultat se recalcule instantanément. C’est le cas d’usage le plus convaincant : il évite l’aller-retour vers un tableur externe.
Le quiz de formation
Vous pouvez transformer un document sur une nouvelle fonctionnalité en quiz interactif avec score automatique, pour ancrer les connaissances de votre équipe. L’agent lit le contenu de la page et génère les questions. Le score s’affiche à la fin, sans passer par un outil de formulaire tiers.
L’organigramme dynamique
À partir d’une base de données « personnes », le bloc HTML peut produire une visualisation d’organigramme qui aide les nouvelles recrues à se repérer plus vite. C’est une alternative interactive aux schémas statiques que l’on maintenait manuellement.
Trois approches complémentaires : seul le bloc HTML natif exécute votre code et se génère via l’IA, mais il bloque tout appel réseau.
Bloc HTML, bloc embed et widgets tiers : quelles différences ?
La confusion la plus fréquente concerne la distinction entre le bloc HTML natif, le bloc embed et les widgets tiers. Ce sont trois approches différentes pour un même objectif : rendre une page plus interactive.
| Critère | Bloc HTML natif | Bloc embed (iframe) | Widget tiers (Indify, Apption) |
|---|---|---|---|
| Nature | Exécute votre code HTML/CSS/JS | Affiche une URL externe | Affiche un service hébergé ailleurs |
| Dépendance externe | Aucune | URL du contenu intégré | Dépend de la plateforme du widget |
| Appels réseau / API | Bloqués (sandbox) | Gérés par le site intégré | Gérés par le widget |
| Données Notion | Pas d’accès direct | Aucun | Aucun |
| Génération par IA | Oui, via Notion AI | Non | Non |
| Plan requis | Affichage : tous ; génération : Business+ | Tous les plans | Selon la plateforme |
Le bloc embed reste le bon choix pour intégrer un service externe existant — une vidéo YouTube, un tableau Figma, un widget météo d’Indify. Les widgets tiers, que j’ai détaillés dans mon guide sur les widgets Notion, restent pertinents pour tout ce qui nécessite des appels réseau ou une mise à jour en temps réel, puisque le bloc HTML ne peut pas les gérer.
Le bloc HTML natif brille, lui, sur les éléments autonomes : un outil dont toute la logique tient dans le code, sans donnée externe à récupérer.
Les limites à connaître avant de vous lancer
Le bloc HTML est puissant, mais il fonctionne dans un cadre strict qu’il faut comprendre pour éviter les déceptions. Plusieurs guides techniques publiés en juillet 2026 convergent sur les mêmes contraintes.
Un bac à sable sans accès réseau. Le bloc s’exécute dans une sandbox sécurisée qui bloque les appels sortants. Impossible donc de brancher un widget de météo en direct, de charger une librairie depuis un CDN, ou de lire et écrire dans vos données Notion. Le code travaille uniquement avec ce qu’il contient.
Pas de mémoire partagée. L’état éventuel (par exemple les réponses d’un quiz) est stocké localement dans le navigateur, sur une seule machine. Il n’est ni synchronisé entre appareils, ni partagé avec les autres membres de l’équipe.
Pas d’URL propre. Le bloc n’a pas d’adresse indépendante : il vit et meurt avec la page Notion qui l’héberge. Ses droits d’accès suivent ceux de la page. Si vous déposez un bloc dans une page de Teamspace partagée avec 10 personnes, ces 10 personnes y ont accès.
Génération réservée aux plans payants. L’affichage d’un bloc HTML est disponible sur tous les plans, mais sa création par Notion AI exige un forfait Business ou supérieur.
Ces limites expliquent pourquoi le bloc HTML est avant tout un outil interne. Pour un usage public ou orienté visiteurs — par exemple sur un site créé avec Notion —, un embed vers un service dédié reste plus adapté, car le rendu complet du bloc HTML sur les pages publiées n’a pas été confirmé au lancement.
Mon avis : un vrai pas vers le « vibe coding » dans Notion
Le bloc HTML transforme Notion en environnement capable d’exécuter du code, et pas seulement d’afficher du contenu. Pour les équipes qui vivent déjà dans Notion, c’est un gain net : plus besoin de sortir vers un tableur ou un outil de formulaire pour un calculateur ou un quiz. La génération par l’IA abaisse la barrière technique — vous décrivez, l’agent code.
Mon verdict après quelques jours d’usage : la fonctionnalité tient ses promesses sur les éléments autonomes et internes, mais montre vite ses limites dès qu’un besoin réel de données en direct ou de diffusion publique apparaît. Le blocage des appels réseau, cohérent pour la sécurité, ferme la porte à toute une catégorie de cas d’usage que les widgets tiers continuent de couvrir.
L’essentiel à retenir : le bloc HTML n’est pas un remplaçant des embeds ni des widgets, mais un troisième outil complémentaire, taillé pour les mini-applications internes générées à la volée. Si vous suivez de près les nouveautés de la plateforme, je détaille l’ensemble de la mise à jour dans mon récap de Notion 3.4, dont le bloc HTML est la suite logique.