q-import { wiki-common.qhtml }
wiki-shell {
sectionKey: "core-syntax"
pathPrefix: ""
pageTitle: "Core Syntax"
pageIntro: "Core syntax is the part that feels most like writing HTML with fewer angle brackets. These examples show how blocks, shorthand, attributes, and text work."
main {
wiki-example-card {
title: "Elements and nesting"
summary: "Put one element inside another by nesting braces. This is the basic shape of QHTML."
note: "Read it top to bottom: parent block, then child blocks."
details {
html {
div {
h2 { text { Product } }
p { text { Lightweight UI syntax. } }
}
}
}
}
wiki-example-card {
title: "Selector chains"
summary: "Comma-separated selectors create nested elements in one line."
note: "Use this when the nesting is simple and you want a compact form."
details {
html {
div,section,h3 { text { Nested } }
}
}
}
wiki-example-card {
title: "Class and id shorthand"
summary: "Use CSS-style shorthand to create ids and classes without writing full attributes."
note: "This works on normal elements and on component instances."
details {
html {
div#main.card {
p { text { Card body } }
}
q-component my-card { div { text { Card } } }
my-card#card-1.primary { }
}
}
}
wiki-example-card {
title: "Attributes"
summary: "Set normal HTML attributes with name/value lines inside an element block."
note: "Think of this as a cleaner attribute list."
details {
html {
a {
href: "https://example.com"
target: "_blank"
text { Open Example }
}
}
}
}
wiki-example-card {
title: "text, html, and style blocks"
summary: "Use text for plain text, html for raw HTML fragments, and style for quick inline CSS."
note: "Choose text unless you really need raw HTML."
details {
html {
p {
style { font-size: 20px; margin: 0; }
text { Plain text content }
}
div { html { <strong>Real HTML fragment</strong> } }
}
}
}
}
}