OcaltQL HTML & CSS

OcaltQL can build HTML documents natively using the HTML verb, without string concatenation. Elements nest the same way blocks do, using OPEN and CLOSE.

Building a document

NEW HTML SET ?var opens a tree. Each HTML "tag" declares an element. ATTR "name" WITH "value" sets an attribute, chainable with AND. TEXT "..." sets the element's text content directly, without needing a child nest. Nesting with OPEN...CLOSE adds child elements.

Example
NEW HTML SET ?html
OPEN
HTML "head"
        OPEN
         HTML "link" ATTR "rel" WITH "stylesheet" AND ATTR "href" WITH "/style.css"
         CLOSE
HTML "body"
        OPEN
         HTML "h1" ATTR "style" WITH "font-size:32px;" AND ATTR "class" WITH "hero" TEXT "Hello "
                 OPEN
                 HTML "b" TEXT "World!" ATTR "style" WITH "font-style:oblique;"
                CLOSE
         CLOSE
CLOSE
AFTER EMIT ?html

NEW HTML vs NEW HTML NODE

NEW HTML creates a full document. When emitted, it is automatically wrapped in <!DOCTYPE html> and a root <html> tag. NEW HTML NODE creates a detached fragment instead — no wrapper, no document context — meant to be built separately and inserted into a document later.

Void elements

Self-closing tags like link, img, br, input, meta, and hr never receive a closing tag, with or without a following OPEN block.

HTML TEXT NODE

A standalone text run can sit as its own sibling among child elements using HTML TEXT NODE "...". This is different from the TEXT "..." attribute on a tag — that sets the text of the element itself, while HTML TEXT NODE is its own node in the child order, useful when text needs to appear before, between, or after multiple child elements.

Example
NEW HTML SET ?html
OPEN
HTML "p"
        OPEN
        HTML TEXT NODE "Hello "
        AFTER HTML "b" TEXT "World"
        AFTER HTML TEXT NODE " — Engineering Magic"
        CLOSE
CLOSE
AFTER EMIT ?html

Detached nodes & appending

A node tree can be built separately from any document using NEW HTML NODE, then attached into an existing tree later with HTML APPEND. This is useful for building reusable fragments or appending content conditionally.

HTML APPEND ... TO

Appends a node or fragment to the root of an existing tree.

Example
NEW HTML SET ?html
OPEN
HTML "div" ATTR "id" WITH "container"
CLOSE
AFTER NEW HTML NODE SET ?newlycreatednode
OPEN
HTML "div" TEXT "container appended later"
CLOSE
AFTER HTML APPEND ?newlycreatednode TO ?html
AFTER EMIT ?html

HTML APPEND ... INTO ... WHERE ID / TAG

Targets a specific node anywhere in the tree and appends as its child — by id attribute or by tag name. The first matching node in document order is used.

Targeting by ID
NEW HTML SET ?html
OPEN
HTML "body"
        OPEN
        HTML "div" ATTR "id" WITH "container"
        CLOSE
CLOSE
AFTER NEW HTML NODE SET ?newlycreatednode
OPEN
HTML "p" TEXT "container appended later"
CLOSE
AFTER HTML APPEND ?newlycreatednode INTO ?html WHERE ID "container"
AFTER EMIT ?html
Targeting by tag
NEW HTML SET ?html
OPEN
HTML "body"
        OPEN
        HTML "h1" TEXT "Existing heading"
        CLOSE
CLOSE
AFTER NEW HTML NODE SET ?footer
OPEN
HTML "footer" TEXT "appended to body tag"
CLOSE
AFTER HTML APPEND ?footer INTO ?html WHERE TAG "body"
AFTER EMIT ?html

Detached nodes can be built conditionally inside an IF block, stored, and only appended when needed — letting a document assemble dynamically without rebuilding the whole tree each time.

HTML REVERSE

HTML REVERSE parses a raw HTML string — such as the result of a FETCH — into the same native node structure that NEW HTML produces. The result can be emitted, appended to, or have content appended into it, exactly like a tree built by hand. If the parsed content contains a root <html> tag, the result behaves as a full document; otherwise it behaves as a fragment.

Example — fetch, modify, re-emit
FETCH "https://example.com" SET ?sitedata
AFTER HTML REVERSE ?sitedata SET ?oqlversion
AFTER NEW HTML NODE SET ?banner
OPEN
HTML "h1" TEXT "Injected by OcaltQL"
CLOSE
AFTER HTML APPEND ?banner INTO ?oqlversion WHERE TAG "body"
AFTER EMIT ?oqlversion

This fetches a real page, converts it into a fully native, appendable OcaltQL structure, injects a new element directly into its body, and re-emits the modified document — all without ever leaving OcaltQL syntax.

CSS

Stylesheets are added the same way as any other element — no separate syntax. A style tag holds inline CSS as its TEXT content. A link tag references an external stylesheet through its href attribute, exactly as shown in the void elements section above.

Inline stylesheet — HTML "style"

Example
NEW HTML SET ?html
OPEN
HTML "head"
        OPEN
        HTML "style" TEXT "body { background: #0a0a0a; color: #fff; } .hero { font-size: 32px; }"
        CLOSE
HTML "body"
        OPEN
        HTML "h1" ATTR "class" WITH "hero" TEXT "Engineering Magic"
        CLOSE
CLOSE
AFTER EMIT ?html

External stylesheet — HTML "link"

Example
NEW HTML SET ?html
OPEN
HTML "head"
        OPEN
        HTML "link" ATTR "rel" WITH "stylesheet" AND ATTR "href" WITH "/style.css"
        CLOSE
CLOSE
AFTER EMIT ?html

EMIT

Emitting an HTML value serializes the entire tree to a string, exactly as it would appear in a browser. This output can be returned directly from the API or written as a file to a subdomain's site folder.

OcaltQL Javascript & Ajax →