Ich baue Werkzeuge für meinen Lebensunterhalt, und die einzige häufigste Sache, die ich mache, bevor ich irgendjemanden lese's Frontend läuft ihr HTML durch einen Formatierer Servervorlagen spucken Markup auf eine Zeile aus Bündler kollabieren Sie ein Ein Schnipsel, den jemand in Slack einfügt, kommt mit drei Ebenen des Nestings, die in eine Wand aus Winkelklammern abgeflacht sind Ich kann nicht debuggen, was ich nicht lesen kann, also ist der erste Zug immer derselbe: Einfügen, Schlagen Sie verschönern, und lassen Sie die Struktur sich offenbaren Diese Anleitung ist die, die ich meinem jüngeren Ich übergeben hätte, der früher Markup von Hand neu indiziert hat und es die Hälfte der Zeit falsch gemacht hat.
tl; dr: Ein HTML-Formatierer gibt Markup neu ein, so dass Sie seine Struktur lesen können, und minimiert es wieder nach unten, so dass es klein ausgeliefert wird Verwenden Sie verschönern, während Sie bauen und debuggen, minifizieren für die Produktion Die HTML-Formatierer Auf Toolz.dev tut beides in Ihrem Browser, behält Ihr Skript, Ihren Stil und Ihr Pre-Content-Byte-for-Byte bei und lädt niemals etwas hoch.
Was ist ein HTML-Formatierer?
Ein HTML-Formatierer ist ein Tool, das Ihr Markup in seinen Tag-Baum analysiert und mit konsistenter Einrückung, einer Ebene pro Verschachtelungstiefe, zurückgibt. Das ist die Verschönerungsrichtung. Umgekehrt, minifizieren, wird der unbedeutende Leerraum zwischen den Tags entfernt, sodass die Datei so klein wie möglich ist, ohne zu ändern, wie ein Browser sie rendert. Die meisten guten Formatierer, einschließlich des auf Toolz.dev, tun beides über dieselbe Eingabe.
Das Wort & quot; insignificant" leistet in diesem Satz echte Arbeit In HTML kommt es auf einige Leerzeichen an und auf andere nicht. Die Zeilenumbrüche und zwei Leerzeichen, die Sie zwischen ein Schließen setzen </li> und der nächste <li> Ändern Sie nichts an der gerenderten Seite, sodass es einem Formatierer freisteht, sie hinzuzufügen, zu entfernen oder zu normalisieren. Aber die Leerzeichen innerhalb einer <pre> Block oder das einzelne Leerzeichen zwischen zwei Inline <a> Elemente, sind ein Teil dessen, was der Benutzer sieht Ein Formatierer, der diesen Unterschied nicht versteht, wird Ihr Layout gerne durchbrechen Dies ist die Grenze zwischen einem Formatierer, der hilft, und einem, dem Sie misstrauen lernen.
Wenn Sie angewendet haben Prettier In Ihrem Editor kennen Sie bereits das Gefühl: Sie kümmern sich nicht mehr um die Einrückung, weil ein Tool dies garantiert Ein browserbasierter Formatierer gibt Ihnen die gleiche Garantie für einmalige Snippets, generierte Ausgaben und Markups, die Sie nicht steuern, ohne ein Projekt einzurichten.
Warum endet HTML überhaupt chaotisch?
Es hilft zu wissen, woher das Chaos kommt, denn es sagt einem, was ein Formatierer überleben muss.
Die erste Quelle ist das Server-Rendering Eine PHP-Vorlage, eine Rails-Ansicht oder eine Blade-Datei sendet HTML mit dem Leerraum aus, den die Template-Engine zu produzieren gefühlt hat, und nach der Minifizierung läuft Middleware oft eine einzelne Zeile mit einer Länge von Tausenden von Zeichen Wenn etwas im Browser falsch aussieht und Sie & quot; Quelle anzeigen, " erhalten.
Die zweite Quelle ist copy and paste Sie schnappen sich eine Komponente aus einem Design-System, ein Fragment aus einem CMS, oder eine E-Mail-Vorlage, die Ihnen jemand geschickt hat, und sie trägt den Abstand, den die Quelle verwendet: gemischte Tabs und Leerzeichen, inkonsistente Verschachtelung, nachgestellte Leerzeichen Ich verbringe einen Großteil meiner Woche innerhalb von WordPress und der kopflosen CMS-Ausgabe, und CMS-generiertes Markup ist mit die schlechtesten, weil es aus Fragmenten zusammengesetzt wird, die jeweils unterschiedlich formatiert wurden.
Die dritte Quelle ist generiertes Markup Build-Tools, WYSIWYG-Editoren und Exportfunktionen produzieren HTML, das nie für das Lesen durch einen Menschen gedacht war Es ist richtig, aber es ist undurchsichtig Ein Formatierer verwandelt es wieder in etwas, das Sie prüfen können.
Der rote Faden ist, dass es keine dieser Quellen interessiert, ob man das Ergebnis lesen kann Das ist deine Aufgabe, und ein Formatierer ist der schnellste Weg, dies zu tun.
Wie formatiere ich HTML online?
Der Workflow auf Toolz.dev dauert etwa zehn Sekunden:
- Öffne das HTML-Formatierer und fügen Sie Ihr Markup in das Eingabefeld ein Es spielt keine Rolle, ob es auf eine Zeile minifiziert, uneinheitlich eingerückt oder ein blankes Fragment ist.
- Wählen Sie Beautify, um es zu erweitern, oder Minify, um es zu komprimieren.
- Wählen Sie zum Verschönern Ihre Einrückung aus: 2 Leerzeichen, 4 Leerzeichen oder Registerkarten. Zwei Leerzeichen ist die übliche Webvorgabe.
- Optional ticken Sie auf & quot; Kommentare entfernen" um HTML-Kommentare aus der Ausgabe zu entfernen.
- Kopieren Sie das Ergebnis oder laden Sie es als herunter
.htmlAkte
Alles läuft clientseitig Der Parser ist JavaScript in Ihrem Browser, das Markup berührt also nie einen Server Das ist wichtiger als die Leute annehmen, worauf ich zurückkommen werde.
Was ist der Unterschied zwischen Verschönern und Minieren?
Hierbei handelt es sich um entgegengesetzte Operationen, die sich einen Parser teilen, und zu wissen, wann man für jeden davon greifen muss, ist der größte Teil der Fähigkeit.
Verschönern ist für Menschen Es fügt Zeilenumbrüche und Einrückungen hinzu, so dass die Verschachtelung sichtbar ist, was Sie beim Bearbeiten, Debuggen, Diffundieren zweier Versionen oder beim Überprüfen einer Zuganforderung wünschen Wenn ich einen Layout-Bug jage, verschönere ich zuerst, damit ich sehen kann, welches Element nicht geschlossen oder eine Ebene zu tief verschachtelt ist.
Minifizieren ist für Maschinen Es entfernt den Leerraum, den ein Browser ignoriert, so dass die Datei kleiner und schneller zu übertragen ist Sie minifizieren HTML aus dem gleichen Grund Sie CSS oder JavaScript minifizieren: Bytes über die Drahtkostenzeit, und auf einer großen Seite summiert sich der Leerraum Wenn Sie sich bereits auf die HTML-Minifire Für die Produktionskomprimierung ist der Formatierer das Werkzeug, mit dem Sie diese Ausgabe erneut lesen, wenn etwas kaputt geht.
So vergleichen sich die beiden Richtungen bei den Entscheidungen, die tatsächlich unterschiedlich sind:
| Aspekt | verschönern | minimieren |
|---|---|---|
| Tor | Lesbarkeit | Kleinste Datei |
| Leerraum zwischen Tags | Hinzugefügt und normalisiert | abgezogen |
| Ausgangsgröße | Größer | Kleiner |
| Wann zu verwenden | Bearbeiten, Debuggen, Rezension | Produktion, Transfer |
| Einrückung | 2 Leerzeichen, 4 Leerzeichen oder Registerkarten | keine |
| Ergebnis rendert | ident | ident |
Die letzte Zeile ist die wichtige Keine der beiden Operationen ändert das Aussehen der Seite Nur der Leerraum, den ein Browser als unbedeutende Änderungen behandelt, wenn ein Formatierer jemals Ihre gerenderte Ausgabe verändert, ist das ein Fehler im Formatierer, keine Eigenschaft der Formatierung.
Wird die Formatierung meinen JavaScript, CSS oder vorformatierten Text beeinträchtigen?
Das ist die Frage, die ein Spielzeug von einem Werkzeug trennt, und das ist der Grund, warum ich wählerisch bin, welchen Formatierer ich verwende.
Bestimmte Elemente enthalten Inhalte, bei denen Leerzeichen und Zeichen von Bedeutung sind und nicht berührt werden dürfen Die WHATWG HTML-Standard Klassifiziert script und style Als Rohtextelemente und textarea und title Als eskapierbare Rohtextelemente In ihrem Inneren muss ein Formatierer den Inhalt als undurchsichtig behandeln, versucht er, das JavaScript in einem script Tag, es kann den Inhalt eines Template-Literals verschieben, einen regulären Ausdruck ändern oder eine Zeile innerhalb einer mehrzeiligen Zeichenfolge verschieben, und jetzt verhält sich Ihr Code anders Das ist keine Formatierungsänderung, das ist ein Fehler, den der Formatierer eingeführt hat.
der pre Element ist ein verwandter Fall Sein ganzer Zweck ist es, Leerraum zu erhalten, so wird sein Textinhalt genau so angezeigt, wie geschrieben Ein Formatierer, der im Inneren wieder einblendet <pre> Ändert die Seite sichtbar.
Der Toolz.dev-Formatierer erledigt all dies durch Behandeln script, style, pre, textarea, und title Als Rohinhalt: es macht das HTML um sich herum neu einblendet aber ihren inneren Text wörtlich kopiert Dein Code und vorformatierter Text kommen Byte für Byte identisch raus, als ich das beim Aufbau getestet habe, war die Akzeptanzleiste einfach: a <script> enthaltend if(a<b){x=1} Unberührt überleben muss, und das tut es Wenn Sie mit Markup arbeiten, das Inline-Skripte oder - Stile enthält, ist dies die Eigenschaft, die Sie überprüfen müssen, bevor Sie einem Formatierer vertrauen.
Kann ein Formatierer mit defektem oder unvollständigem HTML umgehen?
Echtes HTML ist selten so gut geformt, wie XML ist, und ein Formatierer, der Perfektion verlangt, ist nutzlos Browser sind bekanntermaßen tolerant: die HTML-Parsing-Algorithmus Definiert genau, wie mit ausgelassenen End-Tags und falsch verschachtelten Elementen umgegangen wird, weshalb eine Seite mit einem fehlenden </li> Macht trotzdem gut Ein guter Formatierer leiht sich die gleiche Toleranz.
Der häufigste Fall sind optionale End-Tags. Mit HTML können Sie das schließende Tag bei Elementen wie weglassen li, p, td, tr, und option„, weil die Spezifikation ein offenes Zeichen sagt li Wird implizit geschlossen, wenn die nächste li Beginnt. So <ul><li>a<li>b</ul> Gültig ist, und der Toolz.dev-Formatierer wendet diese impliziten Schließungsregeln an, um zu produzieren <li>a</li> und <li>b</li> Auf eigenen Zeilen, genau so, wie ein Browser den Baum bauen würde A <p> Automatisch geschlossen wird, wenn sich ein Blockelement darin öffnet, weil ein Absatz keinen Blockinhalt enthalten kann.
Der zweite Fall ist wirklich gebrochenes Markup: ein Tag geöffnet und nie geschlossen, oder ein verirrtes schließendes Tag ohne übereinstimmendes Öffnen Der Formatierer schließt alles, was am Ende des Dokuments baumelnd bleibt, und meldet es als Warnung, sodass Sie wissen, dass die Eingabe unvollständig war und nicht stillschweigend ratet Diese Warnungen sind oft der schnellste Weg, um den genauen Fehler zu finden, den Sie behoben haben.
Vergleichen Sie dieses Verhalten mit einem strengen Formatierer und mit dem Verzicht auf Handarbeit:
| heraufkommen | Ausgelassene End-Tags | Nicht geschlossene Tags | rasen |
|---|---|---|---|
| Toleranter Formatierer (Toolz.dev) | Wendet implizit-nahe Regeln an | Automatisch schließt und warnt | augenblick |
| Strenger Formatierer im XML-Stil | Oft Fehler raus | Fehler aus | Sofort, wenn es funktioniert |
| Manuelle Einrückung | Du trackst es selbst | Leicht zu übersehen | Langsam und fehleranfällig |
Früher war ich in dieser unteren Reihe, habe von Hand nachgebogen und ein nicht geschlossenes Exemplar verpasst div Dreimal von zehn. Das tolerante Tool gewinnt, weil echter Markup chaotisch ist und Sie möchten, dass das Chaos aufgetaucht und nicht abgelehnt wird.
Wann sollte ich einen Formatierer im Vergleich zu meinem Editor verwenden?
Wenn Sie die Datei besitzen und sie sich in Ihrem Projekt befindet, ist Ihr Editor plus Prettier oder ein gleichwertiges Gerät das richtige Zuhause für die Formatierung, da sie auf Speicherplatz läuft und im gesamten Team konsistent bleibt. Ich schlage nicht vor, dass Sie das ersetzen.
Ein Browser-basierter Formatierer verdient sich seinen Platz in den Lücken, die der Workflow hinterlässt Du fügst ein Fragment aus einem Bugreport ein und musst es gerade lesen Du befindest dich auf einem Rechner, der nicht deine Dev-Box ist Du betrachtest die CMS-Ausgabe, eine E-Mail-Vorlage, oder generiertes Markup, das nie in einem Repo gelebt hat Du möchtest einen einzelnen Snippet minifizieren, ohne einen Build-Schritt zu verkabeln In all diesen Fällen ist das Öffnen eines Tabs schneller als das Konfigurieren eines Projekts, und das Ergebnis ist dasselbe.
Dazu kommt noch der Sichtschutzwinkel, der keine Kleinigkeit ist Weil der Toolz.dev Parser komplett in Ihrem Browser läuft, Markup, das interne URLs, unveröffentlichte Kopie, in eine Vorlage eingebettete API-Antworten enthält, oder ein Customer' s Daten Ihr Gerät nie verlassen Viele Online-Formatierer POSTEN Ihre Eingabe auf einen Server, um die Arbeit zu erledigen Für alles aus einer Arbeitscodebasis ist das eine Datenbelichtung, die Sie nicht übernehmen müssen Mir ist das so wichtig, dass es eine Designregel für jedes Tool auf der Seite ist, über die ich mehr in der geschrieben habe Webentwickler-Toolkit und der Leitfaden zum Datenschutz in Online-Toolsdrohen
Ein praktischer Workflow, der mir Stunden gespart hat
Hier ist die Schleife, die ich tatsächlich laufe, wenn sich ein Layout schlecht benimmt Verschönern Sie das Markup, damit die Verschachtelung sichtbar ist Scannen Sie die Einrückung nach dem Level, der falsch aussieht, denn ein verirrter zusätzlicher Einrücker bedeutet fast immer ein Tag, der sich nie geschlossen hat Lesen Sie die Warnungen des Formaters, die häufig das genaue nicht geschlossene Element in der Quelle beheben Wenn das Fragment für die Produktion bestimmt ist, minifizieren Sie es auf dem Rückweg. Der ganze Zyklus ist eine Minute, und die meiste Zeit dieser Minute lese ich, ohne gegen das Werkzeug zu kämpfen.
Die gleiche Schleife funktioniert für Content-Audits Wenn ich Markup auf Barrierefreiheit oder SEO überprüfe, verschönere ich zuerst, damit ich die Überschriftenstruktur und die Orientierungspunktelemente auf einen Blick sehen kann, dann ziehe ich bestimmte Teile in andere Tools: Konvertieren eines Chunk in Markdown für die Dokumentation mit dem HTML zum Markdown Konverter, oder eine Vergleichstabelle mit dem zu erzeugen Markdown-Tabellengenerator. Formatierung ist der Schritt, der die Struktur lesbar genug macht, um damit zu arbeiten Wenn Sie möchten, dass die breitere Routine, in die diese Tools passen, die Entwicklerproduktivitätstools Führer legt es aus.
Häufig gestellte Fragen
Wie formatiere ich HTML online?
Fügen Sie Ihr HTML in das Eingabefeld ein, wählen Sie Verschönern, wählen Sie eine Einrückungsbreite aus und klicken Sie auf Format. Das Tool analysiert den Tag-Baum und setzt ihn erneut ein. Anschließend können Sie das Ergebnis kopieren oder herunterladen. Alle Verarbeitung findet in Ihrem Browser statt, sodass nichts hochgeladen wird.
Was ist der Unterschied zwischen Verschönerung und Minifizierung von HTML?
Verschönern fügt Zeilenumbrüche und Einrückungen hinzu, sodass die Verschachtelung leicht zu lesen ist, was ideal zum Bearbeiten und Debuggen ist. Durch Minifizieren wird der unbedeutende Leerraum zwischen den Tags entfernt, um eine kleinere Datei für die Produktion zu erzeugen. Beide behalten das gleiche gerenderte Ergebnis; nur der Leerraum ändert sich.
Ändert sich durch die Formatierung das Aussehen meiner Seite?
Nein. Der Formatierer ändert nur den Leerraum zwischen Tags, nicht die Elemente, Attribute oder den Text. Inhalte, bei denen der Leerraum von Bedeutung ist, wie z. B. Pre-, Textbereich und Inline-Text, bleiben erhalten, sodass eine Seite vor und nach der Formatierung denselben wiedergibt.
Formatiert der Formatierer mein JavaScript und CSS neu?
Nr. Inhalte innerhalb von Skript - und Style-Tags werden als Rohtext behandelt und wörtlich kopiert Das Tool macht das HTML um sie herum neu einblendend, berührt aber nie den Code selbst, sodass Template-Literale, reguläre Ausdrücke und CSS-Werte Byte für Byte identisch bleiben.
Kann es mit defektem oder unvollständigem HTML umgehen?
Ja, im Rahmen des Zumutbaren Der Parser ist tolerant: Er wendet die gleichen implizit schließenden Regeln an, die Browser für Tags wie li, p und td verwenden, und er schließt automatisch Tags, die am Ende des Dokuments offen gelassen wurden Wenn dies der Fall ist, zeigt er eine Warnung an, sodass Sie wissen, dass das Markup unvollständig war.
Ist es sicher HTML zu formatieren, das sensible Daten enthält?
Ja. Der Parser läuft in Ihrem Browser komplett in JavaScript Keine Netzwerkanfrage trägt Ihr Markup, nichts wird gespeichert, und das Tool funktioniert offline, sobald es geladen ist HTML, das interne Links, API-Antworten oder unveröffentlichte Kopien enthält, verlässt Ihren Computer nie.
Welche Einrückungsmöglichkeiten stehen zur Verfügung?
Die Beautify-Ausgabe unterstützt 2 Leerzeichen, 4 Leerzeichen oder Registerkarten. Zwei Leerzeichen sind die übliche Standardeinstellung für Webprojekte, vier Leerzeichen passen zu Teams, die eine breitere Einrückung bevorzugen, und auf Registerkarten kann jeder Entwickler seine eigene Anzeigebreite im Editor festlegen.
Wie unterscheidet sich ein HTML-Formatierer von einem HTML-Minifier?
Ein Formatierer hat beide Richtungen in einem Werkzeug: Verschönern, um Markup zum Lesen zu erweitern, und Minifizieren, um es für den Versand zu kollabieren Ein dedizierter Minifier komprimiert nur, Wenn Sie hauptsächlich Produktionskomprimierung benötigen, konzentriert sich der HTML-Minifier darauf; wenn Sie zwischen Lesen und Versand wechseln, deckt der Formatierer beides ab.
Formatieren Sie Ihr Markup mit dem kostenlosen HTML-Formatierer. Es läuft vollständig in Ihrem Browser, hält Ihre Skripte und vorformatierten Inhalte intakt und lädt niemals ein Byte hoch.
