Convert HTML markup to Pug (Jade) template syntax with proper indentation and attribute formatting.
HTML to Pug Converter rewrites an HTML fragment or document as Pug source. Element nesting becomes indentation, closing tags disappear, and HTML attributes are expressed in Pug's attribute notation. Text nodes stay with their corresponding elements, producing template source that can be edited or pasted into a Pug file. The most consequential surprise is that indentation is executable structure in Pug, not cosmetic formatting. Preserve the leading spaces when copying the result, and inspect whitespace-sensitive content before using it.
A concrete input and expected output from the current implementation.
Input
<section> <h1>Notes</h1> <p>Two items</p> </section>
Expected output
section h1 Notes p Two items
The section becomes the outer Pug tag. Its h1 and p children are indented one level, and their short text nodes follow their tag names on the same lines.
Each HTML element produces a Pug tag line, while descendants are placed on deeper indented lines. Because Pug derives parent-child relationships from indentation, HTML end tags have no direct counterpart in the converted result. Sibling elements remain at the same indentation level, as the h1 and p do in the example.
Tag content and attributes are translated into Pug forms instead of being preserved as angle-bracket markup. Simple text can follow its tag on the same line. IDs, classes, and other attributes can use Pug shorthand or parenthesized attribute notation. The returned value is editable Pug template source, not rendered HTML or a browser preview.
Often, straightforward elements, attributes, and text preserve the intended structure. Exact output is not guaranteed for every fragment, especially when rendering depends on whitespace, unusual attribute values, embedded code, or another template language mixed into the HTML. Compare the rendered result when exact markup or spacing matters.
Pug uses indentation to mark containment, so a closing tag would be redundant. An indented line belongs to the nearest less-indented tag above it, while returning to an earlier indentation level ends that element's child block. Changing indentation after conversion can therefore change the resulting document structure.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.