Hoppa till innehållet
Gratis verktyg

HTML-formaterare online: snygga till HTML- och CSS-kod

HTML-formateraren, även kallad HTML Beautifier, gör minifierad eller rörig HTML- och CSS-kod indragen och läsbar: En enda rad som body{margin:0;font-family:Arial,sans-serif}… blir till exempel prydligt indragna CSS-regler, med 2 eller 4 blanksteg eller tabbar. Språket identifieras automatiskt. Gratis, utan inloggning, och din kod stannar i webbläsaren.

Byggd av Luca Stanek

Koden klar? Publicera din webbplats med snabbt och pålitligt webbhotell.

Publicera din webbplats

Formaterad kod

Den formaterade koden visas här när du klistrar in något till vänster.

Klistra in din kod till vänster eller ladda ett exempel. Resultatet visas direkt.

Din kod stannar i din webbläsare: den varken laddas upp eller sparas.

Exempelresultat

Vad den här HTML- och CSS-formateraren gör med din kod

Kod från en minifierare eller editor och resultatet med 2 mellanslags indrag.

HTML

Indata:

<nav class="navbar"><ul><li><a href="/">Start</a></li><li class="active"><a href="/tools">Tools</a></li></ul></nav><main><h1>Willkommen</h1><p>Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>, der sich nicht um   Leerzeichen schert.</p><img src="logo.png" alt="Logo"></main>

Resultat:

<nav class="navbar">
  <ul>
    <li><a href="/">Start</a></li>
    <li class="active"><a href="/tools">Tools</a></li>
  </ul>
</nav>
<main>
  <h1>Willkommen</h1>
  <p>
    Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>,
    der sich nicht um Leerzeichen schert.
  </p>
  <img src="logo.png" alt="Logo">
</main>

CSS

Indata:

body{margin:0;font-family:Arial,sans-serif}.btn,.link{color:#fff;background:#0a84ff;padding:8px 16px}.btn:hover{opacity:.8}@media (max-width:600px){.btn{display:block}}

Resultat:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.btn,
.link {
  color: #fff;
  background: #0a84ff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .8;
}

@media (max-width: 600px) {
  .btn {
    display: block;
  }
}

Översikt

Vad är en HTML Formatter?

En HTML-formatterare, även kallad HTML Beautifier, gör HTML- och CSS-kod lättläst: en struktur per rad med konsekvent indrag. Formatteraren identifierar språket automatiskt, gör indrag med 2 eller 4 blanksteg eller tabbar, öppnar filer upp till 2 MB och ändrar bara blanksteg och radbrytningar, förutom om ett sista CSS-semikolon saknas. Den körs gratis i din webbläsare, utan uppladdning.

Formatera HTML

Blockelement står på egna, indragna rader och löptext radbryts vid 100 tecken. Långa taggar kan få ett attribut per rad om du vill.

Formatera och snygga till CSS

Selektorer, deklarationer och klamrar står på egna rader, även inom @media. Långa värdelistor som transition fördelas över flera rader.

Språk identifierat automatiskt

Taggar tyder på HTML, klammerparenteser, @-regler eller egenskaper med kolon på CSS. Du kan också välja HTML eller CSS manuellt.

Varningar med rad och kolumn

Verktyget visar rad och kolumn för taggar och parenteser som inte stängts. Klicka för att markera platsen i inmatningen. Det är ingen validator.

Resultat med syntaxmarkering

Du ser också antalet rader samt antalet element respektive regler och deklarationer. Resultat över 150.000 tecken visas utan färger.

I webbläsaren, utan uppladdning

Din kod varken laddas upp eller sparas. Du kan öppna filer på upp till 2 MB och kopiera eller ladda ned resultatet.

Så fungerar det

Så formaterar du HTML och CSS online

Fem steg, utan registrering eller installation.

Steg 1

Klistra in kod

Klistra in HTML eller CSS i fältet till vänster, öppna en fil (.html, .htm, .xhtml, .css eller .txt, upp till 2 MB) eller ladda exemplet för HTML eller CSS.

Steg 2

Kontrollera språk

Låt språket stå på Automatiskt eller välj HTML eller CSS. Det identifierade språket visas under resultatet.

Steg 3

Välj indrag

Gör indrag med 2 blanksteg, 4 blanksteg eller tabb. För HTML väljer du om långa taggars attribut ska radbrytas eller stå på en rad.

Steg 4

Kontrollera anmärkningar

Varningar och fel anger rad och kolumn. Klicka på länken bredvid för att markera platsen i din inmatning.

Steg 5

Tillämpa resultat

Kopiera den formaterade koden eller ladda ner den som formatted.html eller formatted.css.

Regler

Så formaterar HTML- och CSS-formateraren

Blockelement

div, ul, table och liknande står på egna rader, med indraget innehåll. Korta element som stycken stannar på en rad.

Löptext

Flera mellanslag blir ett, och långa stycken radbryts vid 100 tecken. Mellanslag mellan inline-taggar behålls.

Långa taggar

Om en tagg inte får plats på en rad placeras varje attribut på en egen rad. Det går att stänga av.

Oförändrad

Innehållet i pre och textarea, kommentarer, attributvärden och texter lämnas som de är. style formateras som CSS, medan script på sin höjd får ny indragning.

CSS: Selektorer, deklarationer och klamrar står på egna rader. Ett avslutande semikolon läggs till om det saknas. Begränsningar: Koden valideras inte, JavaScript formateras inte om och SCSS och Less stöds inte.

Upptäck mer

Fler verktyg

Jämför texter online (Diff Checker)

Jämför texter online: Jämför två texter, konfigurationsfiler eller kodversioner, se skillnader rad för rad och ord för ord och kopiera dem som Unified Diff. Körs helt i webbläsaren.

Byggd av Dimitri Heissler

JSON-formaterare

Formatera, minifiera och validera JSON – med syntaxmarkering, felmeddelanden och nedladdning, helt i webbläsaren.

Byggd av Jakub Martyniak

XML-formaterare och validator

Validera, formatera, minimera och reparera XML automatiskt (icke-escapade tecken, saknade taggar, saknad deklaration) – 100 % i webbläsaren, utan uppladdning.

Byggd av Justin Schuessler

Regex-testare

Testa reguljära uttryck direkt mot den inbyggda JavaScript-motorn – med markering av träffar, capture-grupper och ersättningsläge, helt i webbläsaren.

Byggd av Jakub Martyniak

URL-kodare och avkodare

Koda och avkoda URL:er och text online: jämför encodeURIComponent, encodeURI och formulärformatet, med tabell över frågeparametrar och verktyg för UTM-länkar. Körs helt i webbläsaren.

Byggd av Dimitri Heissler

.htaccess-generator och htpasswd-generator

Skapa Apache-.htaccess och .htpasswd online: 301-omdirigeringar, HTTPS, lösenordsskydd med bcrypt, WordPress-regler, felsidor, cachning, GZIP och hotlinkskydd. Körs helt i webbläsaren.

Byggd av Dimitri Heissler

Markdown-redigerare

Skriv Markdown online med liveförhandsvisning: README för GitHub och Discord-meddelanden, tabeller från Excel och export till PDF eller HTML. Helt i webbläsaren.

Byggd av Dimitri Heissler

SQL-formaterare online (formatera och snygga till SQL)

Formatera, snygga till och minimera SQL online – för MySQL, MariaDB och PostgreSQL, med indrag och valfri skiftlägesstil för nyckelord. Körs helt i webbläsaren, utan uppladdning.

Byggd av Luca Stanek

Färgväljare

Konvertera färger direkt mellan HEX, RGB, HSL, HSV och CMYK, hitta närmaste namngivna CSS-färg och kontrollera WCAG-kontrasten mot svart och vitt – helt i webbläsaren.

Byggd av Justin Schuessler

FAQ

Vanliga frågor

Korta svar om att formatera HTML och CSS med det här verktyget.

En HTML-formatterare, även kallad beautifier, gör koden lättläst: en struktur per rad med konsekvent indrag. Praktiskt för minifierad kod, källkod från webbläsaren eller kod från en editor utan formateringsfunktion. Den här formatteraren hanterar HTML och CSS.

Klistra in koden till vänster så visas resultatet direkt till höger. Välj indrag med 2 mellanslag, 4 mellanslag eller tabb och ange om attribut i långa taggar ska radbrytas. Kopiera sedan resultatet eller ladda ned det som formatted.html.

Klistra in CSS-koden: Verktyget känner igen den på klammerparenteser, @-regler eller egenskaper med kolon, men du kan också välja CSS manuellt. Varje regel får separata rader för selektor, deklarationer och klammerparenteser, även inuti @media. Långa värdelistor som transition delas upp på flera rader, och ett saknat avslutande semikolon läggs till. Den nedladdade filen heter formatted.css.

Nej. Bara mellanslag och radbrytningar ändras. Taggar, attribut, värden, texter och kommentarer behålls. Enda undantaget: I CSS läggs ett saknat semikolon till efter den sista deklarationen.

Formateraren ändrar bara blanksteg, indrag och radbrytningar i källkoden så att den blir lättare att läsa. Text formaterar du i HTML med taggar som strong, em eller br. Verktyget varken lägger till eller ändrar sådana taggar.

Innehållet i pre och textarea förblir oförändrat eftersom varje mellanslag räknas där. CSS i style formateras, medan script på sin höjd får ny indragning utan att formateras om.

Nej, den varken validerar eller minifierar. Den formaterar bara HTML och CSS: JavaScript i script formateras inte om, och SCSS och Less stöds inte. Den varnar däremot för taggar som inte stängts, sluttaggar utan öppningstagg och klammerparenteser som saknar motsvarighet, med rad och kolumn för varje fel. Om en kommentar, citerad text eller tagg inte avslutats visas ett felmeddelande i stället för resultatet.

Nej. Allt sker i din webbläsare, utan uppladdning eller lagring. Du kan öppna filer på upp till 2 MB: .html, .htm, .xhtml, .css eller .txt.

Fler frågor?

Kontakta supporten
Bygger du en webbplats just nu?

Din webbplats behöver tillförlitlig hosting

En VPS från ZAP-Hosting gör din webbplats tillgänglig online på ett tillförlitligt sätt.

4,4/5 Trustpilot32.000+ Aktiva servrarSedan 2010
Visa hosting

Ingen konfigurering. Ingen risk. Online på några sekunder.

Flexibel avtalstidAvsluta när som helstOnline på 60 sekunder

Letar du efter fler verktyg? Visa alla utvecklarverktyg