# HTML Output

`AST.html()` turns the result of `Parse()` into an HTML string; this page covers the output structure and classes, and how it divides work with the JSON AST.

## Usage

```javascript
const html = MDParser.Parse(markdown).html();
container.innerHTML = html;
```

`html()` needs no DOM, so it produces HTML in Node.js and Workers; once the HTML is in the document, call `Refresh()` to render charts and math. See [Dependencies and Refresh](/runtime-dependencies).

## Output Structure

| Node | HTML |
|---|---|
| Paragraph | `<span class="md-line">` |
| Heading | `<span class="md-h1">` to `<span class="md-h6">` |
| Blank lines | `<br>` |
| Bold | `<span class="md-bold">`; other inline styles use `<em>`, `<del>`, `<mark>`, `<sub>`, `<sup>` |
| Blockquote / alert | `<blockquote class="md-quote">`; alerts add `md-alert md-alert-{tag}` and `md-alert-title` |
| Lists | `<ul class="md-list">` / `<ol class="md-list">`; task items are `<li class="md-task">` |
| Tables | `<div class="md-table-wrap"><table class="md-table">` |
| Code blocks | `<pre class="prettyprint" name="{lang}">`, one `<li>` per line, with a `<button class="copy">` |
| mermaid / math / chartjs | `md-mermaid` / `md-latex` / `md-chart` wrappers holding a fallback code block |
| Links | `<a class="md-link" target="_blank" rel="noopener">`; images and videos are `md-img`, YouTube/Vimeo add `md-embed` |
| Footnotes | `md-footnote-ref` and `md-footnotes` |

See [Theming](/theming) for the full styling.

## HTML vs JSON AST

| Need | Use |
|---|---|
| Display on a web page or with SSR | `html()` |
| Hand to native renderers such as iOS or Flutter | `JSON.stringify(ast)`; you build the renderer |
| Inspect or rewrite content before output | Work on the `AST` array, then call `html()` |

```demo
<div id="out" class="nanomd"></div>
<script>
  const ast = MDParser.Parse("# Title\n\n> [!NOTE]\n> Edited before output.");
  ast[0].children.push({ type: "text", value: " (edited)" });
  document.getElementById("out").innerHTML = ast.html();
  console.log(ast.html());
</script>
```