Write direct markup for the browser.

This is the baseline approach: writing traditional HTML markup that the browser parses directly into native DOM elements.

1 · HTML Source

Raw HTML markup written in a standard .html file or template.

<div id="test-content">
  <label>Name</label>
  <p>Test Content</p>
</div>

2 · Browser Output

What the user visually sees when the browser renders this markup:

Name

Test Content

3 · Resulting DOM Tree

The native hierarchy created in memory by the browser's C++ HTML parser:

div#test-content ├─ label → "Name" └─ p → "Test Content"

How it works

Browser Execution: The browser streams HTML characters, tokenizes opening and closing tags, creates native DOM node objects (such as HTMLDivElement, HTMLLabelElement, and HTMLParagraphElement), and appends them into the live document tree.

Next: see how to build this exact same UI in Vanilla JavaScript →

← Back to Documentation Overview