Understanding HTML formatting
The shape of the web's source code.
HTML is forgiving in the parser. The formatter chooses for you the part it leaves up to taste.
HTML is not XML.
HTML5 tolerates lots of small sins — unclosed tags (<li> is auto-closed by the next<li>), unquoted attributes, missinghtml / body elements. The formatter normalises all of this to canonical form, inferring closing tags where the parser would and adding quotes around attributes for readability.
Whitespace mostly doesn't matter — except where it does.
Most HTML elements collapse runs of whitespace to a single space. The exceptions are <pre>, <textarea>, and elements with white-space: pre in CSS — there every space and newline is significant. Beautifying or minifying touches these as little as possible; the minifier in particular preserves their content byte-for-byte.
Self-closing tags and void elements.
Some elements never have children: <img>, <br>, <input>, <meta>, <link>. They're called void elements and don't take a closing tag. XHTML wrote them as <br/> with a slash; HTML5 accepts both forms. Prettier (which powers this formatter) emits the slash-less form, matching modern HTML5 conventions.
Beautify vs. minify.
Beautify expands HTML into the most readable form: one element per line where reasonable, two-space indentation, attributes wrapped onto multiple lines once a line gets too long. Minify does the opposite: collapses every run of whitespace, strips comments, removes unnecessary quotes — shrinking the wire payload at the cost of human readability.