Éditeur HTML en ligne
Tapez d’un côté, voyez de l’autre
Cet éditeur HTML en ligne associe deux volets de code à un aperçu en direct. Vous écrivez le balisage et le CSS, voyez le résultat apparaître pendant la saisie et le testez en largeur téléphone, tablette et ordinateur. Rien de ce que vous tapez ne quitte le navigateur.
- GratuitPrix
- DeuxVolets
- AucuneInscription
- AucuneEnvois
Éditeur HTML en ligne
HTML et CSS d’un côté, un aperçu en direct de l’autre
Prêt. Tapez dans l’un des volets et l’aperçu se redessine un instant plus tard.
Ce que fait un éditeur HTML en ligne
Un éditeur HTML en ligne vous permet d’écrire une page web et de la voir tout de suite. Vous tapez le HTML dans un volet et le CSS dans l’autre. Un instant plus tard, l’éditeur redessine la page. Ainsi, vous n’enregistrez jamais un fichier, ne changez pas de fenêtre et ne rechargez pas juste pour vérifier une modification.
Les volets sont à gauche et l’aperçu à droite. Sur un écran étroit, ils s’empilent. Au-dessus, une rangée de boutons règle la largeur de la vue, pour voir la même page comme l’afficherait un téléphone, une tablette ou un ordinateur.
Rien à installer. Vous ouvrez un onglet au lieu d’un éditeur de code, puis vous le fermez une fois la mise en page réglée. De plus, tout le brouillon reste dans ce navigateur. Une page non publiée ou la maquette d’un client n’atteint jamais notre serveur, car il n’y a aucune étape serveur.
Sous le résultat, l’éditeur affiche un rapport qui lit votre travail. Il compte les éléments et les règles CSS. Il nomme les règles qui ne ciblent rien et liste les manques d’accessibilité qu’il repère. Enfin, il liste tout ce qu’il a bloqué. Ainsi, une page qui a l’air correcte mais se lit mal ressort ici, et non lors d’une relecture plus tard.
Comment l’aperçu reste séparé de cette page
L’aperçu n’est pas collé dans cette page. À la place, l’éditeur le dessine dans un shadow root, qui fonctionne comme un jardin clos dans le navigateur.
Un shadow root sépare les styles dans les deux sens, comme le décrit la spécification HTML. Votre règle h1 n’atteint donc pas le titre au-dessus, et notre feuille de style ne peut pas écraser la carte que vous construisez.
Grâce à ce mur, l’éditeur reste honnête. Vous voyez votre balisage sous vos règles, sans rien de nous mélangé dedans.
L’éditeur transforme aussi votre texte en vrais éléments. Par conséquent, le navigateur met en page votre page comme il le ferait pour un fichier enregistré. Cela compte pour une grille ou une rangée flex, car une fausse vue cache souvent l’endroit où une rangée passe à la ligne.
Pourquoi les scripts ne tournent pas ici
L’éditeur coupe les scripts. C’est un choix, pas un manque. Il retire les balises script, supprime onclick et tout autre attribut d’événement, et refuse les liens javascript:.
Deux raisons expliquent cela. D’abord, une page qui exécute votre script peut agir pour la personne qui vous a envoyé l’extrait. Ensuite, un éditeur qui exécute du code ne peut pas promettre que rien ne quitte votre navigateur.
Donc le rapport liste chaque gestionnaire et chaque balise script retirés. Par conséquent, vous ne vous demandez jamais pourquoi un bouton n’a rien fait.
Si vous cherchez un bac à sable JavaScript, ce n’est pas la bonne page. Construisez plutôt ici la structure et les styles, puis branchez le comportement dans votre propre éditeur de code.
Les liens et les formulaires sont inactifs pour la même raison. Un clic dans l’aperçu pourrait éloigner l’onglet de votre travail, donc l’éditeur affiche une courte note à la place.
Tester une mise en page sur trois largeurs
L’éditeur utilise une largeur, pas un nom d’appareil. Les préréglages couvrent 375 pixels pour un téléphone, 768 pour une tablette et 1280 pour un ordinateur. De plus, le champ personnalisé accepte toute largeur de 200 à 2560.
Vos media queries répondent à cette largeur. L’éditeur transforme chaque règle @media qui ne regarde que la largeur en container query sur la boîte d’aperçu. Ainsi, un point de rupture à 600 pixels s’applique quand la vue fait 600 pixels, même si cette page est plus large.
La largeur personnalisée est souvent la plus utile. Entre environ 320 et 900 pixels, presque toutes les grilles cassent quelque part, et ce point tombe sur un nombre bizarre qu’aucun préréglage ne couvre.
Une page large tient quand même sur votre écran. L’éditeur la réduit à la place disponible, mais garde la vraie largeur de mise en page. Donc le texte paraît petit à 1280, mais il passe à la ligne exactement comme sur un ordinateur.
Ce que liste le rapport
Le rapport transforme l’éditeur en outil de relecture rapide. Il lit le balisage et la feuille de style après chaque nouveau dessin, puis note ce qu’il a trouvé.
D’abord les chiffres : combien d’éléments compte la page et combien de règles CSS. Ensuite vient la liste des règles qui ne ciblent rien. Une faute de frappe dans un nom de classe échoue en silence, car le navigateur ignore simplement la règle. Donc le rapport vous donne le sélecteur.
Après cela viennent les notes d’accessibilité. Une image sans texte alternatif, un champ sans label, un lien qui ne contient qu’une image et un titre qui saute du niveau deux au niveau quatre ont chacun leur ligne.
Puis viennent les balises qu’un navigateur réparerait de lui-même, comme un div jamais fermé ou une balise fermante sans balise ouvrante. Enfin, la liste des blocages cite chaque script, gestionnaire d’événement, image distante, police web et @import arrêtés. Ainsi, un logo manquant arrive avec une raison, pas avec un mystère.
Sur cette page
- L’outil
- Ce que fait un éditeur HTML en ligne
- Comment utiliser l’éditeur HTML en ligne
- Pourquoi utiliser cet éditeur HTML en ligne
- Des habitudes qui rendent l’éditeur utile
- Six façons dont un aperçu en direct vous trompe
- Questions sur l’éditeur HTML en ligne
- Des outils qui vont avec celui-ci
Continuer
Tutoriel vidéo : Éditeur HTML en ligne
Une courte vidéo montre chaque étape. Ensuite, choisissez votre langue ci-dessous et activez les sous-titres si vous le souhaitez.
Comment utiliser l’éditeur HTML en ligne
Quatre étapes, et aucune ne demande de compte.
- 1
Écrire le balisage
Tapez dans le volet HTML, ou choisissez un exemple pour partir d’un code qui marche. L’éditeur redessine la page un instant après votre dernière frappe.
- 2
Le mettre en forme dans le second volet
Ensuite, écrivez des règles dans le volet CSS. Les deux volets alimentent la même vue, donc un changement dans l’un ou l’autre apparaît au même endroit.
- 3
Choisir une largeur
Puis passez par 375, 768 et 1280 pixels, ou tapez votre propre largeur. Ainsi, vous repérez le retour à la ligne qui n’arrive qu’à 420 pixels avant tout le monde.
- 4
Lire le rapport, puis exporter
Enfin, corrigez les règles mortes et les notes d’accessibilité. Ensuite, copiez chaque volet ou téléchargez un seul fichier HTML qui contient les deux.
Pourquoi utiliser cet éditeur HTML en ligne
Cinq raisons, et chacune vous évite un aller-retour.
L’aperçu ne peut pas toucher cette page
L’éditeur dessine votre page dans un shadow root, donc une règle égarée ne peut pas changer le style de la page autour. Même un sélecteur universel reste inoffensif.
Rien ne se charge depuis un autre serveur
Un extrait copié d’une page inconnue ne peut pas appeler chez lui pendant que vous le regardez. Par conséquent, vous ouvrez la maquette d’un client sans craindre les traqueurs.
Un rapport, pas un aperçu vide
Quand la page a l’air fausse, l’éditeur dit souvent pourquoi. Par exemple, il liste une image manquante comme bloquée, au lieu de vous laisser une boîte vide.
Vraies largeurs, vraies media queries
L’éditeur met en page votre page à la largeur choisie, donc vos points de rupture s’appliquent vraiment. Une mise en page qui tient à 375 et 768 tiendra sans doute sur les écrans que ces nombres représentent.
Un seul fichier en sortie
Le téléchargement regroupe le balisage et la feuille de style dans un seul fichier HTML. Vous pouvez donc le passer à un collègue ou l’ouvrir hors ligne, sans étape de build entre les deux.
Des habitudes qui rendent l’éditeur utile
Six habitudes qui font d’un brouillon un vrai flux de travail.
- Partir d’un exemple Chargez la grille de cartes, le formulaire ou l’article, puis coupez. Un squelette qui marche vaut mieux qu’un volet vide quand vous n’avez besoin que d’un composant.
- Écrire d’abord le balisage Le HTML simple se lit déjà bien dans un navigateur, donc la structure apparaît avant toute règle. Ensuite, le CSS n’a plus qu’à arranger ce qui est déjà là.
- Donner une raison à chaque règle Supprimez une règle dès qu’elle ne cible rien. Le rapport nomme ces règles, et une feuille de style sans règles mortes est bien plus simple à maintenir.
- Vérifier d’abord la largeur étroite Commencez à 375 pixels, puis élargissez. Une mise en page qui marche en étroit s’étire en général bien, alors que l’inverse est rarement vrai.
- Nommer les classes selon leur rôle Écrivez card-foot plutôt que grey-small. Un nom de classe passe dans la refonte suivante, et un nom lié à une couleur ou à une taille vieillit mal.
- Vider la liste des alt avant l’export Remplissez chaque texte alternatif que le rapport demande. Ainsi, le balisage quitte la page en meilleur état qu’à son arrivée.
Six façons dont un aperçu en direct vous trompe
Chacune semble correcte dans le volet et vous surprend plus tard.
Faire confiance à un aperçu qui n’est pas la vraie page
Un extrait qui fonctionne seul peut casser dans un modèle, et tout aperçu a cette limite. Collez-le donc dans le vrai site et vérifiez-le là-bas avant de le publier.
Laisser des scripts en espérant qu’ils tournent
Cet éditeur retire exprès les balises script et les gestionnaires d’événement. Par conséquent, un bouton qui ne fait rien ici n’est pas un bug, et le rapport cite ce qu’il a retiré.
Oublier que les fichiers distants ne chargent jamais
Un logo, une police d’icônes ou un fond venu d’un autre serveur n’apparaîtra pas. Utilisez donc une data URI pendant la construction, ou acceptez le trou et ajoutez le vrai fichier plus tard.
Styler un élément qui n’existe pas
Une règle pour une classe que votre balisage n’utilise jamais ne change rien. La page reste muette à ce sujet, donc le rapport est le seul endroit où l’erreur apparaît.
Tester seulement la plus grande largeur
Un test sur ordinateur seul rate beaucoup de lecteurs, puisque beaucoup naviguent sur téléphone. C’est pourquoi la rangée de préréglages commence par la largeur téléphone.
Fermer l’onglet avec la seule copie
Le brouillon vit dans ce navigateur seulement, et effacer les données du site le supprime. Téléchargez donc le fichier une fois la mise en page réglée.
Questions sur l’éditeur HTML en ligne
Cet éditeur HTML en ligne est-il gratuit ?
Oui. Il n’y a ni compte, ni limite, ni offre payante. Ouvrez-le aussi souvent que vous voulez.
Qu’est-ce qu’un éditeur HTML en ligne ?
C’est une page où vous écrivez du HTML et du CSS et voyez le résultat pendant la saisie. En bref, l’éditeur transforme votre navigateur en résultat, et vous cessez de changer de fenêtre pour voir l’effet d’une modification.
Est-ce qu’il exécute mon JavaScript ?
Non. Les balises script, les attributs d’événement et les liens javascript: sont tous retirés, et le rapport cite chacun d’eux. Ainsi, un extrait venu d’un inconnu ne peut pas agir pendant que vous le lisez.
L’aperçu peut-il casser cette page ?
Non. Il est dessiné dans un shadow root, donc une règle à vous n’atteint pas la page, et une règle à nous n’atteint pas votre balisage.
Puis-je charger une image d’un autre site ?
Non. L’éditeur bloque les requêtes vers d’autres serveurs, et le rapport le signale. Toutefois, une data URI fonctionne, car elle voyage dans le balisage lui-même.
Quelles largeurs puis-je tester ?
Les préréglages couvrent 375, 768 et 1280 pixels, et le champ personnalisé accepte toute largeur de 200 à 2560. Vous pouvez donc rester pile sur le nombre où votre grille casse.
Mes media queries fonctionnent-elles ?
Oui, celles de largeur. L’éditeur transforme chacune en container query sur la boîte d’aperçu, elle s’applique donc à la largeur choisie dans l’éditeur. Les autres, comme print ou hover, gardent leur sens habituel.
Que vérifie le rapport ?
Il compte les éléments et les règles CSS, et liste les règles qui ne ciblent rien. Il liste aussi les manques d’accessibilité, les balises qu’un navigateur réparerait et tout ce qu’il a bloqué.
Mon balisage est-il enregistré quelque part ?
Seulement dans ce navigateur, comme brouillon. Quand vous revenez, l’éditeur le recharge. Effacer les données du site le supprime, alors téléchargez le fichier pour le garder.
Puis-je coller un balisage que je n’ai pas écrit ?
Oui. L’éditeur retire les parties qui pourraient agir pour quelqu’un d’autre avant de dessiner quoi que ce soit. Par conséquent, un extrait inconnu se regarde ici sans risque.
Puis-je coller une page entière ?
Oui. Un document complet fonctionne. L’éditeur garde les blocs style du head et affiche le contenu du body dans l’éditeur.
Me dira-t-il si mon HTML est invalide ?
Il signale une balise jamais fermée et une balise fermante sans balise ouvrante. Un navigateur répare les deux en silence, donc la page seule les cacherait.
Gère-t-il grid et flexbox ?
Oui. L’éditeur dessine une vraie boîte dans un vrai navigateur, donc les deux modes de mise en page se comportent comme en production.
Puis-je copier le code à la fin ?
Oui. Chaque volet a son propre bouton copier. De plus, le téléchargement regroupe les deux volets dans un seul fichier HTML.
Que deviennent les scripts dans le téléchargement ?
Le fichier garde votre balisage et vos styles. Cependant, les balises script deviennent de courts commentaires et les attributs d’événement disparaissent, donc le fichier correspond à ce que vous avez vu.
Puis-je annuler une modification ?
Oui. Chaque volet est une zone de texte normale, donc l’annulation de votre navigateur y fonctionne. Pour repartir de zéro, choisissez un exemple et chargez-le à nouveau.
Formate-t-il ou minifie-t-il le code ?
Non, et c’est voulu. Chaque volet garde les espaces que vous avez tapés. Une fois le balisage terminé, passez-le plutôt au minificateur.
Fonctionne-t-il sur un téléphone ?
Oui. Les volets s’empilent sur un écran étroit, et l’éditeur garde la page à sa propre largeur. Vous pouvez donc corriger un retour à la ligne loin de votre bureau.
À qui appartient le balisage que j’écris ?
À vous. Aucun crédit à donner et aucune revendication de notre part, vous pouvez donc l’utiliser dans un travail payé.
Faut-il un compte ou une extension ?
Non. La page fonctionne seule, sans inscription et sans rien à installer.
Des outils qui vont avec celui-ci
Quatre pages vers lesquelles le même travail mène souvent.
Testez un sélecteur sur un balisage collé et voyez ce qu’il attrape. Un sélecteur qui ne cible rien passe facilement inaperçu à l’œil, donc cette page le nomme.
Ouvrir l’outil →Une fois la mise en page fixée, retirez les commentaires et les espaces en trop. Ainsi, le fichier livré porte la structure, pas les notes qui l’ont précédée.
Ouvrir l’outil →Avant d’envoyer un balisage par e-mail, vérifiez-le comme un client mail le lit. Un client mail retire bien plus qu’un aperçu web.
Ouvrir l’outil →Quand une page a besoin d’une icône ou d’un petit schéma, dessinez-le et nettoyez-le là-bas. Puis collez le code SVG propre directement dans le volet HTML.
Ouvrir l’outil →
Écrivez le balisage et regardez-le prendre forme
Écrivez le HTML, mettez-le en forme dans le volet voisin, passez par les trois largeurs et lisez le rapport. Rien ne se charge depuis un autre serveur, aucun script ne s’exécute et tout le brouillon reste dans votre navigateur.