HTML Formatter

About HTML Formatter

What it does

HTML Formatter beautifies HTML code. It puts your HTML into a readable, standard layout with one element per line and clear indents. It also checks your HTML as you type: when a tag is never closed, closed in the wrong order or closed twice, it rings the exact spot, gives the line and column, and says how to fix it.

How to use it

Type or paste your HTML into the editor and press Format. Lines that Format changed stay marked until you edit them, and Show before shows your text as it was. Press Example to try it with a sample.

Summarize HTML

The Result pane counts the elements, attributes, headings, links, images and scripts in your HTML. Open Notes to see the headings and things worth fixing next to their lines: images without alt text, repeated ids, a missing language or title.

Customization

Open Options to choose the indent (2 spaces, 4 spaces or a tab), how attributes wrap, how many blank lines to keep, how to indent scripts and styles, and whether to indent inside head and body. The tool remembers your choices.

Common HTML errors

Missing closing tag

Unclosed tags are one of the most common errors in HTML. They happen when a tag is opened but never closed. For example, the following code is invalid, because the <div> tag is not closed:

<div class="card">
  <h2>Order #10482</h2>
  <p>On its way.</p>

Some end tags may be left out in HTML, such as </p>, </li> and </td>. The browser closes those elements for you, so the tool does not report them.

Missing closing quote

Unclosed quotes are another common error. For example, the following code is invalid, because the quote after href= is never closed:

<a href="https://www.example.com>Example</a>

Incorrect nesting

Incorrect nesting happens when tags close in a different order than they opened. The last tag opened must be the first tag closed. For example, the following code is invalid, because <b> closes while <i> is still open:

<p><b><i>Important</b></i></p>

<p><b><i>Important</i></b></p>

About HTML

HTML is the standard markup language for creating web pages. HTML stands for HyperText Markup Language and describes the structure of web pages using markup.

HTML elements are the building blocks of HTML pages. With HTML, images and other objects, such as interactive forms, can be embedded in the page. It creates structured documents by marking the meaning of text: headings, paragraphs, lists, links, quotes and other items. HTML elements are written with tags in angle brackets. Tags such as <img> and <input> put content directly into the page. Other tags such as <p> surround document text and may hold other tags inside them. Browsers do not show the tags, but use them to read the content of the page.

The common tags

The following are the most common HTML tags. You do not need to memorize them, but it helps to know what kind of tags exist. For the full list of HTML tags, see MDN.

• <html> is the root of an HTML document.
• <head> holds metadata about the document.
• <body> holds the visible page content.
• <h1> to <h6> define headings.
• <p> defines a paragraph.
• <a> defines a hyperlink, which links from one page to another.
• <div> defines a division or a section in an HTML document.
• <span> is an inline container that marks up a part of a text.