HTML to JSON Converter

How to use the html to json converter

1. Paste your HTML markup into the input area.
2. The converter parses the markup instantly as you type or paste.
3. Review the resulting JSON tree showing every element, attribute and text node.
4. Copy the JSON output for use in your application or API.

How the html to json conversion works

The converter uses a hand-written tokenizer that reads the HTML string character by character. It identifies opening tags, closing tags, attributes, text content, comments and doctype declarations without relying on the browser DOM.

Each parsed piece becomes a JSON object. Elements have a tag property, an attributes object and a children array. Text nodes store their content under a text key. For example, the markup <p class="note">Hi</p> produces a JSON object with type element, tag p, an attributes object containing class note, and a children array holding one text node with the value Hi.

This structure mirrors the logical document tree, making it straightforward to traverse programmatically.

Handling raw text elements

Certain HTML elements like <script> and <style> contain raw text where angle brackets are not treated as tag delimiters. The parser recognizes these elements and reads everything until the matching closing tag as plain text content.

This means JavaScript expressions such as if (a < b) inside a script block are preserved exactly as written rather than being misinterpreted as malformed HTML tags. The raw text is stored in the JSON output under the element's children array as a text node.

Void elements and self-closing tags

HTML defines several void elements that cannot have child content: area, base, br, col, embed, hr, img, input, link, meta, param, source, track and wbr.

The parser treats these elements specially. When it encounters a void element, it creates the node with its attributes but does not look for a closing tag or attempt to nest children inside it. Self-closing syntax like <br /> is also handled correctly for any element.

Entity decoding

HTML uses character entities to represent special characters. The parser decodes common named entities such as &, <, >, " and ' back into their literal characters. Numeric character references in both decimal (A) and hexadecimal (A) formats are also decoded.

This ensures the JSON output contains the actual text content rather than escaped entity strings, which is usually what downstream applications expect when processing converted data.

When to use this format

Converting HTML to JSON is useful when you need to process web markup in environments that work natively with JSON, such as REST APIs, configuration files or data pipelines. Instead of passing raw HTML strings between services, a structured tree allows each consumer to query specific elements or attributes directly.

If you only need to extract tabular data from HTML tables, a dedicated html table to json tool may be more appropriate. For stripping markup entirely, consider html to text. And if your goal is to adapt markup for React components, html to jsx handles the attribute naming differences automatically.

Common edge cases

Real-world HTML is often imperfect. The parser handles several common irregularities gracefully:

• Unclosed tags are left open in the tree rather than causing a failure, and elements whose end tag is optional (li, p, td, tr, dt, dd, option) are ended by the next sibling that opens.
• A stray < that does not start a tag, as in 1 < 2, is kept as text.
• Runs of whitespace in text nodes are collapsed to one space, except inside pre, textarea, script and style, which keep their text exactly.
• Tag and attribute names are lower-cased as in an HTML parser, except inside svg, where names such as viewBox and linearGradient keep their case.
• Attributes without values, such as disabled or checked, are stored with an empty string value.
• Mismatched quotes around attribute values are tolerated where possible.
• Doctype declarations are captured as their own node type rather than being discarded.

However, extremely malformed markup may produce a tree that differs from how a full browser engine would render it, since this tool prioritizes predictable parsing over error recovery heuristics.

Worked examples