How To Format Html
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
Indent size and character
HTML that lands in your repo after a copy-paste from a CMS, a WYSIWYG editor, or a code generator is almost always ugly: inconsistent indentation, closing tags jammed against content, attributes scattered in random order, and self-closing tags that disagree with the project’s conventions. The browser does not care—it will parse almost anything that looks like HTML—but humans and diff tools care a lot. Consistent formatting keeps reviews fast, makes diffs meaningful, and surfaces structural bugs that messy HTML hides. This guide covers indent size, attribute ordering, self-closing and void elements, how Prettier differs from html-tidy, inline versus block-level rules, and the specific conventions that make HTML readable at scale.
Void elements and self-closing syntax
HTML5 accepts unquoted attribute values for values that contain no whitespace, quotes, ampersands, equals signs, or angle brackets. Quoted values are universally safer and are the norm in every modern style guide. Double quotes are the default. Single quotes work but can collide with JavaScript string content when HTML is embedded in JS templates. Pick double quotes and lock it in your formatter.
Block versus inline elements
Prettier is the modern default: fast, opinionated, minimal configuration, and handles embedded CSS and JavaScript consistently. It formats HTML as part of a project-wide formatter covering many languages. html-tidy is the classic tool: very configurable, good at repairing malformed HTML, but slower and more opinionated in weird directions. js-beautify (with its HTML mode) sits between them with more knobs than Prettier and faster operation than tidy. For new projects Prettier is the path of least resistance; for legacy cleanup where you need to repair broken HTML, html-tidy is better.