Elements

{@div .chart data=sales type="bar" /}
.
<div class="chart" data="sales" type="bar"></div>

[Sales]{@chart-view type=bar /}
.
<chart-view type="bar">Sales</chart-view>

{@call-out .important}
Body
{/call-out}
.
<call-out class="important"><p>Body</p>
</call-out>

What HTML puts in a child element is written as one.

{@details}
[Show the proof]{@summary /}
Body
{/details}
.
<details><summary>Show the proof</summary>
<p>Body</p>
</details>

A leaf can interrupt a paragraph, since a line ending in /} can't be prose.

{@figure}
![chart](c.png)
[Sales by month]{@figcaption /}
{/figure}
.
<figure><p><img src="c.png" alt="chart" /></p>
<figcaption>Sales by month</figcaption>
</figure>

An opening line can't: there it is text, and so its closing line has nothing to close.

para
{@div}
x
{/div}
.
<p>para
{@div}
x
{/div}</p>
.
{/div}

{@div}
{@div}
x
{/div}
y
{/div}
.
<div><div><p>x</p>
</div>
<p>y</p>
</div>

A closing line with another name closes nothing.

{@div}
x
{/aside}
{/div}
.
<div><p>x
{/aside}</p>
</div>
.
{/aside}

A closing line is read at its element's own level, before a list inside takes the line.

{@aside}
- a
  {/aside}
b
.
<aside><ul>
<li>a</li>
</ul>
</aside>
<p>b</p>

{@div}
{@div}
x
{/div}
y
.
<div><div><p>x</p>
</div>
<p>y</p>
</div>
.
{@div}

{@dl}
[Term]{@dt /}
[What it means]{@dd /}
{/dl}
.
<dl><dt>Term</dt>
<dd>What it means</dd>
</dl>

A leaf's shape in the middle of a line is text, and reported.

x [y]{@div /} z
.
<p>x [y]{@div /} z</p>
.
{@div /}

An opening line ends at its line ending, even inside an expression.

{@div title=${
x}}
.
<p>{@div title=<code class="language-js expression">
x</code>}</p>

- a
[x]{@sum-mary /}
.
<ul>
<li>a</li>
</ul>
<sum-mary>x</sum-mary>
.
[x]{@sum-mary /}

{@call-out}
| a |
| - |
{/call-out}
.
<call-out><table>
<thead>
<tr>
<th>a</th>
</tr>
</thead>
</table>
</call-out>
.
{/call-out}