Formater ou minifier du HTML
HTML Beautifier & Minifier
Met en forme ou minifie du HTML en préservant les éléments en ligne, avec réduction facultative des espaces.
Réindente du HTML pour qu'une page qu'on vous a remise devienne lisible, ou le minifie quand les octets comptent. L'analyseur lexical implémente les états raw text et RCDATA du WHATWG, ce qui empêche un `</div>` situé dans une chaîne de script d'être lu comme une balise et de saccager tout ce qui suit.
HTML en entrée
Déposez un fichier .html
Lu dans cet onglet seulement. Rien n’est envoyé.
HTML formaté
Éléments
20
Nœuds de texte
13
Commentaires
1
Profondeur maximale
5
Jusqu’où cela va
- · Un tokeniseur écrit à la main lit
<script>et<style>comme du texte brut, et<textarea>et<title>comme du RCDATA, si bien qu’un</div>à l’intérieur d’une chaîne n’est pas pris pour une balise. - · Rien de ce qui se trouve dans
<pre>ni<textarea>n’est modifié d’un seul caractère ;<script>et<style>sont seulement réindentés ligne à ligne. Le code qu’ils contiennent n’est pas réécrit. - · Les éléments vides comme
<br>,<img>et les éléments dont la balise fermante peut être omise —<li>,<p>,<td>— sont traités comme le dit la spécification. Les balises fermantes manquantes ne sont pas ajoutées à votre place. - · La minification ne retire que les commentaires, les blancs et les guillemets inutiles. Elle ne supprime pas les balises fermantes facultatives et ne réordonne pas les attributs.
- · Les balises qui ne correspondent pas et les attributs en double sont signalés avec une ligne et une colonne, et le document est tout de même lu aussi loin que possible — ce que fait un navigateur.
Le CSS qu’il contient peut être nettoyé à part avec Formater ou minifier du CSS, et les scripts avec Formater ou minifier du JavaScript.
Comment s’en servir
Collez une page ou un fragment
Un document entier avec un doctype, ou un morceau copié d'un gabarit. Les deux marchent ; un fragment n'a simplement pas d'élément `html` à l'intérieur duquel indenter.
Réglez la mise en forme
Largeur d'indentation, normalisation ou non des attributs vers des guillemets doubles, largeur de ligne à laquelle une longue liste d'attributs passe à la ligne, et indentation ou non du contenu de `html`, `head` et `body` — bien des pages écrites à la main les laissent au ras de la marge.
Lisez la liste des problèmes
Les balises mal appariées et les attributs en double sont listés avec une ligne et une colonne. Le document est tout de même formaté — le navigateur le rendrait aussi —, mais chaque entrée est une chose qui mérite d'être corrigée.
Ou minifiez pour le réseau
Les commentaires, les espaces et les guillemets d'attributs inutiles sortent. Les commentaires conditionnels et les commentaires `<!--!` sont gardés, et les chiffres avant/après montrent ce que cela a rapporté.
Questions fréquentes
Mon bloc `<pre>` est-il à l'abri ?
Oui. Rien à l'intérieur de `<pre>` ou de `<textarea>` n'est changé, pas d'un seul caractère, dans les deux modes — là, les espaces sont du contenu. `<script>` et `<style>` sont réindentés ligne par ligne, mais leur contenu n'est jamais réécrit.
Ajoute-t-il les balises fermantes que j'ai omises ?
Non. Il les comprend — `<li>`, `<p>` et `<td>` se ferment implicitement, et les éléments vides comme `<br>` et `<img>` n'ont jamais eu de balise fermante —, si bien que l'arbre est construit correctement. Mais écrire des balises que vous n'avez pas écrites est une modification, pas un formatage.
Peut-il formater un fichier de gabarit — Jinja, ERB, Handlebars ?
Seulement dans la mesure où la syntaxe du gabarit ressemble à du texte. Les blocs `{% if %}` ne sont pas compris comme une structure : l'indentation à l'intérieur sera donc fausse partout où une balise s'ouvre dans une branche et se ferme dans une autre. Formatez plutôt la sortie rendue.
La minification change-t-elle l'apparence de la page ?
Les espaces entre éléments en ligne sont significatifs en HTML, et les réduire est le seul réglage ici qui puisse déplacer un pixel — `<span>a</span> <span>b</span>` n'est pas la même chose que les deux spans collés. Désactivez Réduire les espaces si votre mise en page en dépend.
À alimenter depuis
HTML vers Markdown
HTML to Markdown
Convertit du HTML collé ou une page enregistrée en Markdown propre — titres, listes imbriquées, tableaux GFM, blocs de code — en jetant scripts et feuilles de style.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Formater ou minifier du JavaScript
JavaScript Beautifier & Minifier
Retire commentaires et espaces d’un JavaScript ou d’un TypeScript sans rien renommer, et réindente un bundle minifié pour qu’il redevienne lisible.
Testeur XPath
XPath Tester
Évalue une expression XPath ou un sélecteur CSS sur du XML ou du HTML et liste tous les nœuds trouvés.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Encodeur d’entités HTML
HTML Entity Encoder
Échappe et déséchappe les entités HTML, avec sortie nommée, décimale ou hexadécimale.
HTML vers Markdown
HTML to Markdown
Convertit du HTML collé ou une page enregistrée en Markdown propre — titres, listes imbriquées, tableaux GFM, blocs de code — en jetant scripts et feuilles de style.
Formater ou minifier du JavaScript
JavaScript Beautifier & Minifier
Retire commentaires et espaces d’un JavaScript ou d’un TypeScript sans rien renommer, et réindente un bundle minifié pour qu’il redevienne lisible.
Encodeur et décodeur Base64
Base64 Encoder & Decoder
Encode et décode en Base64 et en Base64URL, pour du texte comme pour des fichiers, avec un traitement correct de l’UTF-8.
curl vers code
curl to Code
Traduit une commande curl en fetch, axios, requests Python, Go, PHP ou PowerShell.