Staaarter Tools

HTML to YAML

Paste well-formed HTML and get back a YAML tree representation, each element as tag, attributes, and children, and each text run as a text node, useful for inspecting markup structure or feeding it into structured tooling. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-26
conversionhtmlstructured-data

Overview

Introduction

Sometimes you need to look at HTML's actual tree shape, tags, attributes, nesting, and text, rather than the raw markup itself. This tool parses simple, well-formed HTML and re-expresses that tree as YAML, one object per element with its tag, attributes, and children.

It's a lightweight, hand-rolled tokenizer rather than a full browser-grade HTML5 parser, built specifically to run identically on the server and in the browser, since this site's tool functions must work without DOM globals.

What Is HTML to YAML?

An HTML-to-YAML converter scans HTML character by character, recognizing start tags (with their attributes), end tags, self-closing/void elements, comments, declarations, and runs of text, and builds a tree of plain JavaScript objects from them.

Each element node carries its tag name, an attributes map, and a children array; each text run becomes its own {text: ...} node. If the document has multiple top-level siblings, the YAML root is a list of them; a single top-level element serializes directly as one object.

How HTML to YAML Works

The tokenizer walks the input looking for <!-- comments --> (skipped), <!DOCTYPE ...> and similar declarations (skipped), closing tags </name> (matched against the currently open tag, or reported as an error if mismatched), opening tags <name attr="value" ...> (attributes parsed with quoted or unquoted values), and everything else as text.

Void elements (br, img, input, hr, and similar) never look for children or a closing tag. script, style, textarea, and title bodies are captured as raw text up to their matching closing tag instead of being recursively parsed, so embedded < characters in inline scripts don't break tokenization. Named entities (&amp; &lt; &gt; &quot; &apos; &nbsp;) and numeric entities (&#39; &#x27;) are decoded in both text and attribute values.

When To Use HTML to YAML

Use it to inspect a snippet of HTML's actual nesting and attributes at a glance, especially when the raw markup is dense or minified.

It's also useful for turning a small, well-formed HTML fragment into structured YAML for feeding into another tool or for documentation purposes.

Often used alongside SQL to YAML, INI to YAML and YAML Formatter & Prettifier.

Features

Advantages

  • Works without any DOM globals, so it runs identically during server-side rendering and in the browser.
  • Treats script/style/textarea/title content as raw text, avoiding the classic bug where embedded < characters in inline JavaScript break a naive tag scanner.
  • Reports a specific, line-numbered error for mismatched or unclosed tags rather than silently producing a malformed tree.
  • Decodes the common named and numeric HTML entities in both text and attribute values.

Limitations

  • This is not a full browser-grade HTML5 parser: it assumes reasonably well-formed input (properly nested and closed tags) and doesn't implement the HTML5 spec's error-recovery algorithm for malformed markup.
  • Comments and <!DOCTYPE>/other declarations are dropped entirely rather than represented in the tree, since they aren't structural content in the tag/attributes/children/text model this tool uses.
  • Only a handful of named HTML entities (amp, lt, gt, quot, apos, nbsp) are decoded by name; any other named entity is left as literal text, though numeric and hex entities are always decoded.

Examples

A nested element with an attribute

Input

<div class="a"><p>Hi</p></div>

Output

tag: div
attributes:
  class: a
children:
  - tag: p
    attributes: {}
    children:
      - text: Hi

The outer div becomes the root object; its single child p is nested inside children, itself containing one text node.

Best Practices & Notes

Best Practices

  • Make sure input HTML is well-formed (every tag properly closed and nested) before converting; this tool reports mismatches as errors rather than guessing at a recovery.
  • Remember script/style/textarea/title contents come back as a single raw text child, not parsed further, when inspecting those elements.
  • Run the result through YAML Validator afterward if you're feeding it into another tool that expects strictly valid YAML.

Developer Notes

HtmlParser is a single-pass, hand-rolled recursive-descent scanner tracking a position cursor and computing line/column lazily (only when constructing an error) rather than on every character, to keep the common success path simple. RAW_TEXT_ELEMENTS (script/style/textarea/title) are special-cased with an indexOf scan for their literal closing tag instead of being fed through the general tag-parsing loop, since their content isn't HTML.

HTML to YAML Use Cases

  • Inspecting a snippet of HTML's tag/attribute/nesting structure without reading dense raw markup by eye
  • Generating a structured YAML representation of a small HTML fragment for documentation
  • Feeding a parsed HTML tree into another YAML-based tool or test fixture
  • Quickly verifying that a hand-written HTML snippet's tags are properly nested and closed

Common Mistakes

  • Pasting malformed or browser-tolerant-but-technically-invalid HTML (unclosed tags relying on HTML5's error recovery) and expecting it to parse the way a browser would render it, this tool reports a mismatch error instead.
  • Expecting every named HTML entity to decode by name, only a small common set does; anything else stays as literal text (numeric/hex entities always decode, though).
  • Forgetting that comments and <!DOCTYPE> declarations are silently dropped, they don't appear anywhere in the YAML output.

Tips

  • If parsing fails with a mismatched-tag error, check for an unclosed or improperly nested tag right around the reported line.
  • Use YAML Structure Visualizer afterward to get a quick visual read on a deeply nested HTML tree's shape.
  • For a large HTML document, convert one meaningful fragment (a single component's markup) at a time rather than an entire page.

References

Frequently Asked Questions