HTML Formatter & Minifier

Clean Code & Semantic Formatting for HTML Documents

HyperText Markup Language (HTML5) forms the backbone of the World Wide Web. Over time, web template compilation, CMS editors, and minification tools produce tangled markup with missing indentations, unclosed tags, and inconsistent attribute casing. Beautifying HTML restores structural hierarchy, simplifies debugging, and enforces W3C accessibility compliance.

HTML Formatting Guidelines

1. Hierarchy & Indentation: Indent nested child elements by 2 or 4 spaces; keep sibling tags at identical column indentation.
2. Void / Self-Closing Elements: Elements such as <img />, <br />, <hr />, and <input /> do not require closing tags in HTML5, though XML/XHTML syntax permits trailing slashes.
3. Attribute Ordering: Follow established conventions (e.g., class, id, name, data-*, src/href, accessibility aria-*).
4. DOCTYPE Declaration: Always prepend <!DOCTYPE html> to trigger standard browser rendering mode rather than quirks mode.

Formatting Aspect	Minified / Unformatted HTML	Formatted Semantic HTML
Structure	All tags concatenated on a single line	Distinct lines for block elements; indented child blocks
Attributes	Inconsistent quoting (id=main, class='btn')	Consistent double quotes (id="main" class="btn")
Comments	Stripped or misplaced	Preserved and cleanly aligned above relevant components

---

Semantic HTML5 & Accessibility (WCAG)

A properly formatted HTML document promotes accessibility by making structural landmarks clear:

• <header>, <nav>, <main>, <article>, <aside>, <footer>
• Preserving logical heading hierarchy (<h1> through <h6> without skipping levels)
• Ensuring all image tags retain informative alt attributes

---

Formatting HTML in Code

Node.js (Prettier or js-beautify)

import prettier from 'prettier';

async function formatHtml(htmlString) {
  return await prettier.format(htmlString, {
    parser: 'html',
    printWidth: 100,
    tabWidth: 2,
    useTabs: false,
    htmlWhitespaceSensitivity: 'css',
  });
}

Python (BeautifulSoup4)

from bs4 import BeautifulSoup

def prettify_html(raw_html: str) -> str:
    soup = BeautifulSoup(raw_html, "html.parser")
    return soup.prettify()

---

Semantic HTML5 Standards & Modern Web Best Practices

• Landmark Regions: Structuring documents with <header>, <nav>, <main>, and <footer> allows assistive screen readers to navigate content hierarchically.
• Heading Outline Hierarchy: Avoid skipping heading levels (e.g. jumping from <h1> directly to <h3>) to maintain an accessible document outline.
• Form Association: Ensure every form input is programmatically linked to its descriptor using matching <label for="id"> attributes.