How to Format HTML

HTML (HyperText Markup Language) defines the structure of web pages. As web applications grow, templates can quickly become cluttered with deep nesting, long attribute lists, and irregular spacing. Formatted HTML keeps your DOM structure clean and readable.

In this guide, we'll cover key techniques for formatting HTML templates.

Tag Nesting Indentation

Nesting HTML elements is the core structure of web pages. Indenting child elements (using 2 or 4 spaces) makes nesting relationships clear.

Unformatted HTML:

<div><header><h1>CoShareX</h1><p>Tools</p></header></div>

Formatted HTML:

<div>
  <header>
    <h1>CoShareX</h1>
    <p>Tools</p>
  </header>
</div>

Attribute Wrapping

When an HTML element contains multiple attributes, wrapping them onto new lines makes them easier to read:

<button
  type="submit"
  id="submit-btn"
  className="px-4 py-2 text-white bg-indigo-600 rounded-xl"
  onClick={handleSubmit}
>
  Submit
</button>