Language

Self-closing blocks

Blocks with no body: [name!], elements with no content, components.

Writing one

A block with no body ends with !. It needs no [end]:

[br!]
[hr !]
[img = src: "logo.svg", alt: "Logo" !]

<br>
<hr>
<img src="logo.svg" alt="Logo">

The space before ! is optional: [hr!] and [hr !] are the same.

Elements with no content

Some HTML elements never have content. Write them self-closing; the HTML gets no closing tag:

[meta = charset: "utf-8" !]
[link = rel: "icon", href: "icon.svg" !]
[input = type: "email", required: true !]

<meta charset="utf-8">
<link rel="icon" href="icon.svg">
<input type="email" required>

These are br, hr, img, input, meta, link, source, track, wbr, area, base, col and embed.

Empty elements

Any other element can be self-closing too. It becomes an empty element, with its closing tag:

[div = class: "spacer" !]
[span = class: "dot" !]
[textarea = name: "note" !]

<div class="spacer"></div>
<span class="dot"></span>
<textarea name="note"></textarea>

Components

A self-closing component has no body, so its [slot] shows its fallback:

[div = class: "card"][slot]No content yet[end][end]

[import = Card: "./Card.arcm" !]
[Card!]
[Card]Hello[end]

<div class="card">No content yet</div>
<div class="card">Hello</div>

Always self-closing

[import] and [doctype!] never take a body. [import] without ! stops the build:

✗ [import] must be self-closing: [import = Name: "./file.arcm" !]