qHTML is a simpler way to write HTML.
Instead of opening and closing tags, you describe elements using
blocks surrounded by braces { }.
Each word you write—such as div, button,
or p—directly represents a real HTML element.
qHTML simply converts this cleaner syntax into standard HTML
that the browser understands.
You use braces to describe what goes inside an element: text, styles, events, or other nested elements. This makes structure easier to see and reduces visual clutter.
A qHTML block starts with an HTML tag name, followed by braces. Inside the braces, you describe the element’s content and behavior.
text { } sets the element’s textstyle { } applies inline CSSonclick { } runs JavaScript when clickedExample qHTML:
The preview shows the exact HTML that qHTML generates and renders. qHTML itself does not add formatting or spacing—it focuses only on structure.
In qHTML, text and markup are written using dedicated blocks.
text { } inserts plain text, while html { }
allows you to inline raw HTML when you need formatting or embedded elements.
Event handlers such as onclick { } are written as JavaScript
blocks, not strings. This keeps behavior readable and avoids escaping issues.
prerequisites: q-html.js, w3.css
q-component
Defines a reusable component blueprint. Supports slots, functions and qhtml. Use q-components to create a
custom HTML element with directly accessible functions. Is not very friendly to legacy CSS frameworks.
Slots can be accessed once rendered, allowing injection of content into q-component slots any time.
q-template
Defines a reusable blueprint just like a q-component but transform into plain HTML at runtime, causing the
q-template's original qhtml structure to be inaccessible. Useful for older frameworks like bootstrap or jQuery.
slot { name }
Declares a named insertion point inside the q-component or q-template. Slots act as placeholders where external content
can be injected later without modifying the component’s internal layout.
prerequisites: q-html.js, w3-tags.js
In qHTML, you can nest multiple tags together and separate them with a comma. This creates a nested structure without having to write each element on its own line.
For example, span,div,a { } creates a
span containing a div, which contains an
a.
Combinators reduce repetition while keeping structure explicit and readable.
Each tag in the comma-separated list becomes the next nested element, in left-to-right order.
Prerequisites: qhtml.js, w3-tags.js
w3-tags allow you to use W3.CSS classes as if they were
HTML elements. Each w3-* class becomes a custom tag that can
be combined with normal HTML tags.
You can freely mix w3-* tags with standard HTML tags using
qHTML combinators. Each comma-separated tag creates a nested structure,
just like normal combinators.
The difference is that w3-* tags do not render directly.
Instead, they collect CSS classes and apply them to the next non-w3 element.
Each comma creates another level of nesting from left to right.
When you use a w3-* tag, w3-tags.js creates a custom element
for that class name. These elements do not remain in the final output.
Instead, all consecutive w3-* tags apply their class names
to the next normal HTML element in the hierarchy.
w3-* tag represents a CSS classw3-* tags stack togetherw3-* tags themselves are removedThis allows you to build complex W3.CSS layouts declaratively, without manually managing class strings.
w3-main,w3-green,div
means:
<div class="w3-main w3-green"></div>
and:
w3-main,w3-green,div,w3-blue,div
means:
<div class="w3-main w3-green"> <div class="w3-blue"></div> </div>
w3-tags let you express layout intent directly in structure, while keeping the final HTML clean and predictable.
prerequisites: qhtml.js, w3-tags.js (or bs-tags.js)
When you use bs-tags (bootstrap tags) or w3-tags (w3.css tags), the w3-* and bs-* HTML tags support a way to pass along a set of classes to all of the direct descendants of a chain of tags.
If you do not terminate a chain of w3-tags or bs-tags by putting a final regular HTML element at the end of the chain, but instead begin a block using the brackets. { }, Everything inside of the brackets will be treated as if it is the last part of the chain, whether that part is a regular HTML element or additional w3-tags (or bs-tags).
You can nest multiple unterminated chains to create complex CSS rules.
w3-green,w3-large {
w3-button,w3-hover-blue {
w3-bar,span { text: "hello" }
w3-bar,span { text: "world" }
}
}
Since there is no terminating HTML element for the first two nested chains, w3-tags will apply both of the chains to each span separately