HTML Indent Code

Use this tool to indent HTML code correctly. Paste minified HTML, HTML on one line or HTML with incorrect spaces. The tool puts each tag on its own line and moves each child tag one level in from its parent. The colored guides show each nesting level, so you can see the structure of the page immediately.

1. Paste your HTML in the box above, or click Upload file.
2. Select 2 spaces, 4 spaces or Tabs.
3. Examine the result. The line numbers and the guides show each level.
4. Click Copy indented HTML or Download .html.

A full page and a small part of a page both work. You do not have to add <html> or <body> tags.

Input:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

Output (2 spaces):

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

• Indent each child element one level. A <li> is one level in from its <ul>. The <ul> is one level in from its <nav>.
• Put the closing tag at the same level as the opening tag. Then you can find the end of each block quickly.
• Use one indent size in the file. Do not mix 2 spaces, 4 spaces and tabs.
• Keep short inline elements on one line. Tags such as <a>, <b> and <span> can stay inside the line of text.
• Indent <head> and <body> inside <html>. Some teams do not indent these two tags. Both styles are correct if you use one style in all files.

Indentation does not change how the browser shows your page. Browsers ignore the spaces between tags. The tool keeps the spaces inside your text, inside <pre> blocks and next to inline tags, so the page looks the same.

If the HTML has a structure problem, the tool shows the line and the column of the problem. For example:

Line 1, column 17: Unexpected closing tag "span".

This error tells you that a </span> has no <span> before it. Correct the tag at that position. The tool then indents the code again. Correct indentation also shows missing closing tags: when a block does not move back out to its level, a closing tag is missing.

Do you want to indent the text that people see on the page, not the code? Use CSS. Do not use many   characters, because they break on small screens.

/* Indent the first line of each paragraph */
p {
  text-indent: 2em;
}

/* Move a full block to the right */
.note {
  margin-left: 2rem;
}

• You indent with spaces and tabs in one file. The code then looks different in each editor. Select one option in this tool and indent the full file again.
• You add   to indent text. Use text-indent or margin-left in CSS.
• You edit minified HTML manually. Indent it first, edit it, and then minify it again if necessary.
• You ignore an error. The tool does not guess where a missing tag goes. Correct the tag at the line that the error shows.

• Convert rich text to plain text: remove all HTML tags and keep only the text.
• Convert table to Markdown: change an HTML table into a Markdown table.
• Markdown to CSV: change a Markdown table into a CSV file.
• Slug generator: make clean URL slugs for your pages and links.
• Compare URLs: find the differences between two links.
• Screaming snake case converter: make constant names for your scripts and config files.

Your HTML stays in your browser. The tool does not send your code to a server.

Paste your HTML above and get correctly indented code now.