Syntax

Hiccup provides a concise syntax for representing HTML using Clojure data structures. This syntax is not only used by the Hiccup library itself, but also many other tools in the Clojure ecosystem.

Basic syntax

Vectors that begin with a keyword represent HTML elements. For example:

[:span]

Produces:

<span></span>

Any value placed after the keyword is treated as the body of the element. This allows elements to be nested. For example:

[:div [:span] [:span]]

<div>
  <span></span>
  <span></span>
</div>

Strings are rendered as plain text. So:

[:span "Hello world"]

<span>Hello world</span>

And adjacent strings are concatenated together.

[:span "foo" "bar"]

<span>foobar</span>

A map can be optionally specified as the second value in the vector. This map represents the attributes of the element. The keys should be keywords, and the values should be strings.

[:span {:class "foo"} "Hello world"]

<span class="foo">Hello world</span>

Syntax sugar

Beyond the basic syntax, Hiccup supplies additional syntax sugar that can make your code more concise.

Objects

Values of types that have no special meaning are converted into strings before being rendered. So for example:

[:span 42]

Is equivalent to:

[:span "42"]

Seqs

Seqs (including lists) are automatically expanded out. This means that an structure like:

[:span '("foo" "bar")]

Is equivalent to:

[:span "foo" "bar"]

This is particularly useful for iteration. For example:

[:ul (for [i (range 3)] [:ul i])]

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

CSS selectors

The # character can be used to concisely specify the id attribute. For example:

[:span#foo "Hello world"]

<span id="foo">Hello world</span>

While the . character can be used to specify the class attribute.

[:span.foo "Hello world"]

<span class="foo">Hello world</span>

These two syntaxes can be combined to produce elements with both an id and one or more classes.

[:span#foo.bar.baz "Hello world"]

<span id="foo" class="bar baz">Hello world</span>