HTML Construction
Build HTML elements programmatically with the HTML declaration. Nest elements, set classes, IDs, and arbitrary attributes. Use with EMIT in site mode to render full pages.
| Construct | Description |
|---|---|
HTML "tag" OPEN NEST ... CLOSE NEST SET ?el | Build an element. Body can contain EMIT or nested HTML blocks. |
HTML "tag" CLASS "name" OPEN NEST ... CLOSE NEST | Set one or more CSS classes |
HTML "tag" ID "my-id" OPEN NEST ... CLOSE NEST | Set element ID |
HTML "tag" ATTR "key" AS "value" OPEN NEST ... CLOSE NEST | Arbitrary attribute |
Basic element
HTML "h1" OPEN NEST EMIT "Engineering Magic" CLOSE NEST SET ?h
AFTER EMIT ?h
Try it ›
With classes and ID
HTML "div" CLASS "card featured" ID "hero"
OPEN NEST
HTML "h2" CLASS "title" OPEN NEST EMIT "Welcome" CLOSE NEST
AFTER HTML "p" CLASS "subtitle" OPEN NEST EMIT "Built with OQL" CLOSE NEST
CLOSE NEST
SET ?card
AFTER EMIT ?card
With arbitrary attributes
HTML "a" ATTR "href" AS "https://ocalt.com" ATTR "target" AS "_blank"
OPEN NEST
EMIT "Visit Ocalt"
CLOSE NEST
SET ?link
AFTER EMIT ?link
Dynamic list from database
QUERY "products" FROM "shop" LIMIT 5 SET ?rows
AFTER HTML "ul" CLASS "product-list"
OPEN NEST
FOREACH ?rows AS ?row
OPEN NEST
HTML "li" OPEN NEST EMIT ?row(name) & " — $" & ?row(price) CLOSE NEST
CLOSE NEST
CLOSE NEST
SET ?list
AFTER EMIT ?list