Want it done for you? Paste your code in the HTML formatter.
A layout that most teams use
<nav class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
- Indent every level of nesting. Two spaces is the most common choice, and four or a tab are fine if the whole project uses the same.
- Put each block element on its own line, and keep short content, such as a list item with a link, on one line.
- Lowercase tag and attribute names. HTML does not care, but everybody expects it. SVG is the exception, where names such as viewBox are case sensitive.
- Quote attribute values with double quotes, always.
- Close every element that has a closing tag, even where HTML allows you to leave it out.
- Wrap long tags with one attribute per line when a start tag gets longer than your line width.
Whitespace in HTML
This is where HTML differs from most languages. The browser reduces any run of spaces and line breaks to a single space, and that space is visible between inline elements:
<a href="/a">One</a><a href="/b">Two</a> <!-- shows OneTwo --> <a href="/a">One</a> <a href="/b">Two</a> <!-- shows One Two -->
- Between block elements whitespace does not show, so you can format freely.
- Between inline elements a space or a line break shows as a space. A formatter that moves an inline element to a new line can add a gap that was not there. A good one keeps inline elements in the text flow.
- In pre and textarea every space and line break counts, so never reformat their content.
- Inline-block layouts such as a row of buttons can change when whitespace between the items changes. Check them after you format.
Inline and block elements
| Kind | Examples | Formatting |
|---|---|---|
| Block | div, p, ul, li, table, section, h1 to h6, form | Own line, content indented |
| Inline | a, span, strong, em, code, img, button, label | Stays in the text flow |
| Raw content | pre, textarea, script, style | Content kept as written |
Attributes
- Use a consistent order, for example id, class, then data and aria attributes, and then the rest.
- Write boolean attributes in the short form: disabled, checked, required.
- Do not repeat an attribute in the same tag. Browsers use only the first one.
- Keep class names in one line with single spaces between them.
Void elements
Tags like br, img, input, meta and link have no closing tag. You can write them as <br> or <br />. Both are valid in HTML. Pick one style for the project. In XHTML and in SVG, the self-closing form is required.
Common mistakes
- A block element, such as a div, inside a p. The browser closes the paragraph before the div, so the result is not what the code looks like.
- An unclosed element, which makes everything after it nested inside it.
- A closing tag that does not match, such as </div> for a span.
- A missing doctype, which sends browsers into quirks mode.
- Two elements with the same id on a page.
Tools that keep HTML tidy
- In your editor: a format command, such as Shift+Alt+F in Visual Studio Code on Windows, and format on save.
- Prettier formats HTML from the command line:
npx prettier --write "**/*.html". - HTMLHint and html-validate check your files against rules, and the W3C validator checks them against the HTML standard.
- An EditorConfig file keeps indentation the same in every editor on a team.
- Online: the HTML formatter for a quick tidy, and the HTML beautifier for compressed pages.
When you publish
Keep the readable file as your source. When you publish, you can minify a copy with the HTML minifier, as the HTML minification guide explains. The code inside your pages has its own tools: the CSS formatter and the JavaScript formatter.