<a href="<urlparam name='next' default='index.html'/>">Next</a>

<img src="avatar.png" alt="<variable get='username'/>">

<variable set="who" to="<urlparam name='name' default='Guest'/>">
<p>Hello, <variable get="who"/>!</p>

<calc a="<param name='x'/>" b="10" op="+">

<!-- mixed text + two tags (quoted) -->
<a href="page.html?n=<urlparam name='n' default='1'/>-<calc a='1' b='2' op='+'/>">next</a>

<!-- unquoted: exactly one tag -->
<call template=test html=<urlparam name=test>>

<!-- short form: virtual close at end of quoted value -->
<a href="<urlparam name='next' default='index.html'">Next</a>

<!-- call becomes plain text (tags stripped, spaces collapsed) -->
<template name="hi" params="who">Hello <b><param name="who"/></b></template>
<a title="<call template='hi' who='Bob'/>">link</a>  <!-- title is: Hello Bob -->

<!-- never include, non-whitelisted stays verbatim -->
<a href="<b>hi</b>">link</a>  <!-- value keeps <b>hi</b> literally -->

<variable set="title" to="Hello World">
<h1><variable get="title"/></h1>
<p>Title is: <variable get="title"/></p>

<!-- with urlparam -->
<variable set="who" to="<urlparam name='user' default='Stranger'/>">
<p>Hello, <variable get="who"/>!</p>

<!-- page.html?name=Alice  ->  Alice -->
<p>Hi <urlparam name="name" default="Guest"/></p>

<!-- allow only these pages -->
<urlparam name="page" default="home" valid="home?about?contact" separator="?">

<!-- custom separator -->
<urlparam name="color" default="blue" valid="red,green,blue" separator=",">

 <!-- inside an attribute -->
 <a href="<urlparam name='next' default='index.html'/>">Next page</a>

 <!-- with include: page.html includes header -->
 <include src="header.html?name=Bob" type="text/html">
 <!-- inside header.html: Hi <urlparam name="name" default="Guest"/> → Hi Bob -->
 <!-- header without ?name falls back to page.html?name -->

<calc a="hello 123 world 456" b="\d+" c="#" op="replace">  <!-- hello # world # -->
<calc a="a1b22c" b="[0-9]+" op="replace">  <!-- abc (no c = delete) -->
<calc a="a.b.c" b="\." c="-" op="replace">  <!-- a-b-c (escape the dot) -->
<calc a="foo boo" b="o+" c="0" op="replace">  <!-- f0 b0 -->

<calc a="hello123" b="\d+" op="match">          <!-- 1 -->
<calc a="hello" b="\d+" op="match">             <!-- 0 (no match) -->
<calc a="a1b22c333" b="\d+" op="search">       <!-- 1 (first match) -->
<calc a="a1b22c333" b="\d+" c="2" op="search">  <!-- 22 (2nd match) -->
<calc a="a1b22c333" b="\d+" c="9" op="search">  <!-- empty (only 3 matches) -->

<calc a="1" b="6" op="rand">    <!-- dice -->
<calc a="100" b="1" op="rand">  <!-- same as 1 to 100 (auto swapped) -->
<calc b="10" op="rand">          <!-- 0 to 10 (missing a = 0) -->
<calc op="rand">                 <!-- 0 to 100 (both missing) -->

<calc a="hello world" b="0" c="5" op="substr">  <!-- hello -->
<calc a="hello world" b="-5" op="substr">       <!-- world (negative start)-->
<calc a="hello world" b="6" op="substr">        <!-- world (to end) -->
<calc a="abc" b="10" op="substr">               <!-- empty (past end) -->

<!-- default = not empty -->
<if value="<variable get='name'/>">
  Hello <variable get="name"/>!
</if>

<!-- exact match -->
<if value="<urlparam name='page'/>" eq="admin">
  Secret panel
</if>

<!-- number -->
<if value="<variable get='score'/>" gteq="100">
  You win!
</if>

<!-- empty / not empty -->
<if value="<variable get='email'/>" empty>
  Please enter email
</if>
<if value="<variable get='email'/>" not empty>
  Email OK
</if>

<!-- AND: both must match -->
<if value="<variable get='role'/>" eq="editor" not empty>
  ...
</if>

<!-- text-only fallback -->
<if not img>
  .--.
 / o o \
 |  ^  |
  \_-_/
</if>
<if img>
  <img src="logo.png" alt="Logo">
</if>

<!-- fallback for browsers without HTMLB -->
<if not htmlb>
  <p>This page needs an HTMLB browser for the full version.</p>
</if>
<if htmlb>
  <p>Full HTMLB content here.</p>
</if>

<switch value="<urlparam name='lang' default='en'/>">
  <case if="en">Hello!</case>
  <case if="fr">Bonjour!</case>
  <case if="es?pt" separator="?">Hola!</case>
  <case default>Hello (unknown)</case>
</switch>

<!-- with variables -->
<variable set="role" to="<urlparam name='role' default='guest'/>">
<switch value="<variable get='role'/>">
  <case if="admin">Admin panel</case>
  <case if="editor?author" separator="?">Editor tools</case>
  <case default>Guest view</case>
</switch>

<template name="card" params="title, body">
  <table border="1" cellpadding="8">
    <tr><td><b><param name="title"/></b><br><param name="body"/></td></tr>
  </table>
</template>

<call template="card" title="Hello" body="Welcome to HTMLB">
<call template="card" title="About" body="No JS needed">

<!-- param inside an attribute -->
<template name="btn" params="url, label">
  <a href="<param name='url'/>"><param name="label"/></a>
</template>
<call template="btn" url="index.html" label="Home">

<!-- nesting: template can call another -->
<template name="inner" params="x">Value: <param name="x"/></template>
<template name="outer" params="x">Outer <call template="inner" x="<param name='x'/>"></template>
 <call template="outer" x="hi">

<!-- safe default: ?test=<b>hi</b> shows literally -->
<form method="get">
  <urlparam name=test>
  <textarea name="test" value=""><urlparam name=test></textarea>
  <input type="submit"/>
</form>

<!-- opt-in: same value renders as markup -->
<template name="test" params="html">
  <param name="html"/>
  <form method="get">
    <textarea name="test" value=""><param name="html"/></textarea>
    <input type="submit"/>
  </form>
</template>
<call template=test html=<urlparam name=test>>

<template name="escape_html" params="html"><calc a=<param name="html"> b="<" c="&amp;amp;lt;" op="replace" /></template>
<call template="escape_html" html=<urlparam name="test"> />
<!-- ?test=<b>hi</b> prints as text: &lt;b&gt;hi&lt;/b&gt; -->

<div id="main">Original content</div>

<!-- add at end inside -->
<moddoc for="main" insert inside at="end">
  <p>Added at bottom</p>
</moddoc>

<!-- add at start inside -->
<moddoc for="main" insert inside at="start">
  <p>Added at top</p>
</moddoc>

<!-- insert outside -->
<moddoc for="main" insert outside at="start">
  <p>Before the div</p>
</moddoc>

<!-- replace everything inside -->
<moddoc for="main" replace>
  <p>Completely new content</p>
</moddoc>

<!-- plain vs HTMLB -->
<include src="text.txt" />  <!-- verbatim, no HTMLB -->
<include src="text.html" />  <!-- verbatim, no HTMLB even though .html -->
<include src="header.html" type="text/html" />  <!-- HTMLB expanded -->

<!-- urlparam via src query (isolated with fallback) -->
<include src="greeting.html?name=James" type="text/html" />
<!-- inside greeting.html: <urlparam name="name" default="Guest"/> → James -->
<!-- greeting without ?name falls back to parent/main ?name -->

<!-- variable scope (function-like) -->
<variable set="x" to="outer">
<include src="inner.html" type="text/html" />  <!-- inner: <variable set="x" to="inner"> -->
<variable get="x"/>  <!-- still outer (child writes don't leak) -->
<variable set="y" to="1" global>  <!-- with global → persists -->

<!-- old layout pattern (still works) -->
<include src="base.html" type="text/html" />
<moddoc for="content" replace>
  <p>Page-specific content</p>
</moddoc>

<!-- without rmws the newline before the comma shows as a space: "0, 1" -->
<template name="loop" params="i,limit">
  <param name="i"/>
  <if value="<param name='i'/>" lt="<param name='limit'/>">
    <rmws>,
    <call template="loop" i="<calc a='<param name='i'/>' b='1' op='+'/>" limit="<param name='limit'/>">
  </if>
</template>
<call template="loop" i="0" limit="3">  <!-- 0, 1, 2 -->

<style for="h1" color="green" />
<h1>This heading is green</h1>
<h1 color="red">Explicit wins: this one stays red</h1>

<style for="img" width="100" />
<img src="a.png" alt="100 wide">

<style for=".note" align="center" bgcolor="yellow" />
<p class="note">Centered on yellow</p>

<style for="#main" bgcolor="#FFFFE0" />
<div id="main">Warm background</div>

<!-- unknown elements (footer header nav section ...) get a
     style scope when a rule matches, closed by </footer> -->
<style for="footer" align="center" />
<footer>Centered footer</footer>

<!-- one rule for several targets: any match applies -->
<style for="h1, h2, .note" color="green" />
<h1>Green</h1>
<h2>Green too</h2>
<p class="note">Green as well</p>

<p>You are using: <user what="agent"/></p>

<p>Today is <user what="datetime" format="%Y-%m-%d"/></p>
<p>The time is <user what="datetime" format="%H:%M"/></p>
<p>Stamp: <user what="datetime"/></p>  <!-- default format -->

<!-- case does not matter -->
<p><user what="DateTime" format="%d.%m.%Y"/></p>

<!-- inside an attribute -->
<a href="log.html?agent=<user what='agent'/>">Log my visit</a>

<!-- with if: show a message in the morning -->
<if value="<user what='datetime' format='%H'/>" lt="12">
  <p>Good morning!</p>
</if>

<template name="greeting" params="name, count">
  <p>Hello, <param name="name"/>!</p>
  <p>Name length: <calc a="<param name='name'/>" op="len"></p>
  <p>Visits: <param name="count"/></p>
</template>

<variable set="who" to="<urlparam name='user' default='Guest'/>">
<variable set="n" to="<calc a='<variable get="n"/>' b='1' op='+'>">

<call template="greeting" name="<variable get='who'/>" count="<variable get='n'/>">

<switch value="<variable get='who'/>">
  <case if="Admin"><p>Admin panel here</p></case>
  <case default><p>Guest view</p></case>
</switch>

<if value="<variable get='who'/>" not empty>
  <p>Welcome back!</p>
</if>