Éditeur HTML en temps réel

Des trois onglets source au document du navigateur

Coloration syntaxique, numéros de ligne, repérage des parenthèses, repliage et complétion aident à parcourir un petit fichier, sans prouver son fonctionnement. Copier le fichier actif ne prend que l’onglet choisi ; copier le HTML complet compose le document. L’import local accepte des fichiers dans la limite de 2 MiB. Les images voisines demandent toujours des adresses accessibles : importer HTML ne récupère pas son dossier entier.

Placez la structure dans HTML, la présentation dans CSS et le comportement navigateur dans JavaScript. Un fragment comme <main><h1>Notes</h1></main> reçoit une enveloppe documentaire. Un HTML complet conserve son en-tête et son corps ; le CSS de l’onglet est ajouté dans l’en-tête et le JavaScript vers la fin du corps. Les styles et scripts déjà intégrés au fichier importé restent présents. Les recopier dans un autre onglet peut donc exécuter deux fois le même comportement.

Éditer, visualiser et tester constituent trois étapes distinctes. Rédigez ou mettez en forme le code, observez son rendu, puis essayez une interaction et lisez les éléments de diagnostic. Exécuter utilise le brouillon actuel. Sans exécution automatique, l’aperçu peut encore afficher un ancien état pendant vos modifications. L’automatisme convient aux essais CSS de confiance ; l’exécution volontaire est préférable pour un gestionnaire inachevé ou un effet de bord. Le formatage ne concerne que l’onglet actif et améliore la lecture, pas la justesse.

Choisissez le modèle pour le motif dont vous avez besoin. Blank HTML5 et Semantic Article aident à structurer un document ; Responsive Landing, CSS Grid Dashboard et Flexbox Pricing isolent des choix de disposition. Interactive Card et JavaScript Counter montrent les événements. CSS Animation comprend une règle de réduction des mouvements. Accessible Form relie les libellés au retour d’état. Ces modèles sont des points de départ, pas des certifications après modification.

Distinguer largeur responsive et zoom de l’aperçu

Le mode ajusté suit le panneau ; les modes fixes utilisent 390, 768 et 1280 pixels CSS. Il s’agit de largeurs de mise en page, non de téléphones simulés. Le zoom modifie la taille visible dans l’espace de travail. Il facilite l’examen d’une composition large, mais la réduire visuellement ne prouve pas qu’elle tient dans un viewport étroit. Commencez à 100%, comparez les trois modes, puis examinez vos propres seuils avec les outils du navigateur.

Une règle à 720 pixels peut produire trois colonnes à 768 et une à 390 sans révéler un défaut à 721. Essayez des titres longs, un état vide et un message de validation plutôt que le seul modèle bien rangé. Un enfant de largeur fixe, une URL insécable ou trop de marges internes peuvent déborder malgré une grille responsive. Retirez une contrainte à la fois et relancez.

Le changement de largeur répond à une question de disposition. Il ne teste ni le tactile, ni le clavier virtuel, ni la densité de pixels, ni les performances du téléphone, ni un autre moteur. Vérifiez aussi l’export au clavier, avec du texte agrandi et sur les appareils visés. Le plein écran agrandit l’espace de travail ; un onglet d’aperçu facilite la lecture. Aucune de ces actions ne publie la page.

Suivre une panne avec Console et Vérifications

Dans un document complet, vérifiez <!doctype html>, langue, UTF-8, viewport responsive et titre pertinent. Adaptez la langue au texte au lieu de conserver celle du modèle anglais. Les contrôles signalent aussi sauts de niveaux de titre, types de bouton absents et événements intégrés. Vider la console efface les anciens messages sans modifier le source : faites-le avant une action ciblée.

Si un bouton ne répond pas, confirmez d’abord l’autorisation des scripts et l’exécution du brouillon actuel. Après une nouvelle exécution, cherchez la première erreur. Un querySelector qui renvoie null indique souvent un sélecteur différent de l’identifiant ou un élément absent. Journalisez une petite valeur près de la branche en cause, pas un objet confidentiel complet. La console bornée recueille messages courants, erreurs et promesses rejetées ; elle n’est ni un débogueur à points d’arrêt ni une trace exhaustive.

Les vérifications examinent le document composé : informations documentaires manquantes, identifiants dupliqués, images sans attribut alt, contrôles sans nom, actions anonymes et liens suspects. Une erreur demande une lecture du contexte, un conseil peut signaler une décision de conception. alt="" convient parfois à une décoration, mais une image informative a besoin d’un texte utile. Plusieurs H1 ne deviennent pas invalides simplement parce qu’un titre principal clair est recommandé.

Le guide W3C sur les libellés de formulaire explique l’intérêt d’un libellé visible associé au contrôle. Un texte indicatif qui disparaît à la saisie ne le remplace pas. Après correction, parcourez le formulaire au clavier et observez focus et retours. Ces vérifications ne démontrent ni contraste, ni ordre de lecture pertinent, ni utilisabilité avec un lecteur d’écran, ni conformité HTML complète. Complétez-les par validation et tests d’accessibilité centrés sur une tâche.

Examinez le poids des ressources avant de peaufiner la mise en page. Pour des ressources externes de confiance, ouvrez les outils réseau complets du navigateur avant de recharger l’exemple. Comparez un chargement sans fichiers en cache avec un second chargement. Regardez les requêtes en échec, les octets transférés, les images et bibliothèques les plus lourdes, ainsi que l’origine des requêtes suivantes. La référence réseau de Chrome distingue le volume transféré de la taille décompressée des ressources. Un petit fichier HTML peut dépendre de plusieurs mégaoctets d’images ou de scripts. Retirez une ressource inutile ou réduisez une image surdimensionnée, puis refaites le même essai. Un aperçu rapide grâce au cache ne démontre pas une bonne performance sur une connexion lente.

Observez l’apparition du contenu et ses déplacements. Les conseils sur le CSS bloquant le rendu expliquent pourquoi une feuille nécessaire peut retarder le premier affichage mis en forme ; le téléchargement n’est pas le seul coût. Utilisez les outils de performance du navigateur pour examiner le chargement et les longues exécutions JavaScript : Console et Vérifications ne sont pas des profileurs. Si un titre se déplace à l’arrivée d’une image, d’une police ou d’un contenu intégré, suivez les conseils sur les décalages de mise en page. Réservez l’espace prévu avec des valeurs justes pour width/height ou aspect-ratio, puis retestez pendant le chargement. Transmettez aussi les dépendances et les conditions d’essai. Ce cas réduit ne reproduit ni le cache et les réponses du futur serveur, ni les performances de tous les appareils.

Résoudre les ressources externes en connaissance de cause

Ressources accepte des URL HTTP ou HTTPS de feuilles de style et de scripts prêts pour le navigateur, ainsi qu’une URL de base. Saisissez une adresse par ligne. Avec https://example.org/demo/, images/logo.png désigne ce sous-répertoire ; /images/logo.png part de la racine de l’origine. Le standard HTML décrit cette résolution. Une base fixe une règle d’adresse, pas un répertoire de téléversement, et ne rend pas vos fichiers locaux accessibles en ligne.

Si une police ou une image manque après import, examinez l’adresse avant de réécrire les styles. Elle peut dépendre d’un autre répertoire, d’une connexion, du blocage réseau ou d’une restriction de l’hôte. Autoriser le réseau permet la tentative, pas la réussite. L’exécution des scripts reste un choix distinct : une ressource JavaScript externe demande aussi l’autorisation d’exécution.

Un fichier CDN déjà utilisable dans un navigateur peut suffire pour un essai ciblé. Un nom de paquet npm, JSX, TypeScript, Sass ou PHP n’est pas rendu exécutable ici. Il n’y a ni installation de paquets, compilation, base de données ni relais d’API privée. Les projets de framework et les applications authentifiées nécessitent un environnement adapté, puis des tests sous les politiques réelles du futur site.

Que protège la frontière de l’aperçu ?

Les règles WHATWG du bac à sable décrivent une origine isolée pour l’iframe sans permission de même origine. L’aperçu n’accorde pas cette permission. Scripts et réseau sont initialement désactivés et restent deux autorisations distinctes ; l’import désactive également l’exécution automatique. Pour une lecture statique, laissez les deux fermés. Pour un compteur de confiance, autorisez les scripts sans les requêtes externes.

L’isolation limite l’accès, elle ne juge pas le code. Une boucle peut consommer des ressources, un script afficher un faux écran de connexion et une ressource autorisée envoyer des requêtes à son hôte. Ne saisissez aucun identifiant dans le contenu de l’aperçu. Les limites de console atténuent les rafales ordinaires de messages, sans garantir qu’un code hostile ne bloquera jamais l’onglet.

L’onglet d’aperçu séparé conserve l’iframe et les autorisations choisies. Le HTML complet téléchargé est différent : il contient code et ressources sans les restrictions d’exécution de l’espace de travail. Son ouverture directe peut lancer des scripts. Relisez-le avant ouverture et transmission, surtout s’il provient d’une source inconnue.

Conserver le bon fichier pour la suite

Le projet JSON conserve titre, onglets séparés, URL de base et listes de ressources. Le HTML complet est le document composé, pas une archive hors ligne des images et bibliothèques distantes. Le réimporter place l’ensemble dans HTML sans retrouver la séparation d’origine. Gardez JSON pour poursuivre l’édition et HTML pour qu’un lecteur ouvre le résultat.

Pour le diagnostic, préférez le HTML non minifié. La version minifiée retire des commentaires et compacte le code pris en charge ; comparez son résultat et conservez l’original. Les brouillons appartiennent au profil local, sans sauvegarde cloud ni historique de versions. Le stockage peut être refusé ou effacé. En cas de brouillon endommagé, préservez ce qui vous importe avant une réinitialisation ; enregistrer ou réinitialiser volontairement peut remplacer le contenu stocké.

Partager place un projet compressé dans le fragment de l’URL, avec code et réglages de ressources. Ce n’est ni un secret à accès contrôlé ni une page de production hébergée. Les destinataires peuvent inspecter et retransmettre le lien. Si le projet dépasse la limite de partage, téléchargez JSON. L’import concerne HTML/HTM et le JSON pris en charge dans la limite de taille, pas un dossier complet de ressources.

Pourquoi la structure documentaire reste importante

Le récit du CERN sur la naissance du Web renvoie au travail de Tim Berners-Lee en 1989 sur le partage d’informations reliées. Cette logique documentaire aide encore : les titres expriment des rapports, les liens ont une destination pertinente, les formulaires une finalité. Une collection de boîtes attrayantes peut malgré tout former un document peu compréhensible.

Pour un exemple de documentation, définissez ce que le lecteur doit découvrir avant de choisir une disposition. Préférez un bouton natif pour une action et un lien pour naviguer. Expliquez les colonnes d’un tableau plutôt que sa seule couleur. Ces choix rendent le petit exemple plus clair et plus facile à reprendre ailleurs.

Une transmission utile précise code, dernière largeur testée, navigateur, autorisations et résultat attendu. Elle distingue un compteur qui répond ici d’une application prête à être hébergée. L’essai rapide conserve ainsi sa valeur sans prétendre démontrer le serveur, la sécurité en production ou chaque combinaison d’appareils.