About the HTML to YAML Converter
YAML and HTML both describe hierarchies, one with indentation and one with tags, so a document translates into the other shape without losing anything structural. The output here uses a simple, predictable schema: each element is a list entry with a tag key, an optional attrs map, and either a text value when the element holds nothing but words or a children list when it holds more elements.
That shape is useful in three places. Snapshot tests read far better as YAML than as a single line of minified markup, and a failing diff points at the attribute that changed rather than at column 340. Content pipelines that already speak YAML can consume a converted fragment directly. And when you are trying to understand somebody else deeply nested layout, seeing it as indentation makes the structure obvious in a way that a wall of divs never does.
Scalars are quoted whenever leaving them bare would change their meaning. A class of no, an attribute value of yes, anything that parses as a number, and any string that starts with a YAML indicator character are all wrapped in single quotes, so a round trip through a YAML parser returns the same string you put in. Whitespace between elements is dropped and runs of spaces inside text collapse to one, which keeps the file readable. Attributes can be left out entirely for a pure structure view, and comments are excluded by default because they usually carry build system noise. If you want key value data rather than a tree, HTML to JSON and HTML Table to JSON are better fits.
How to use
- Paste the markup. A single component is easier to read than a whole page.
- Untick Include attributes when you only care about the shape of the tree.
- Press Convert and read the indentation as nesting.
- Use Download to save the tree as a .yaml fixture for your tests.
Common questions
- Can the YAML be converted back into HTML?
- Not by this tool. The schema is designed for reading and diffing, and rebuilding markup from it would need a template step of its own.
- Why are some values in quotes?
- YAML would otherwise read them as booleans, numbers or null. Quoting keeps a class named off, or a value of 007, as the string it was.
- How is text inside an element with children handled?
- It becomes its own list entry with a text key, in document order, so mixed content such as a paragraph containing a link keeps the right sequence.
- Does the converter keep whitespace exactly?
- No. Whitespace only nodes are dropped and internal runs collapse to a single space, which is how a browser renders them anyway.