Writing html in Clojure with hiccup
Rather than write
<p> </p> pairs of tags in html, we define our content using a syntax called hiccup.
 is used to hold the name of the html tag, represented by a keyword such as
Defining our content in this way makes it easier to generate and transform using Clojure, so you can generate structure and content dynamically too.
For example this simple html code uses open and closing tags to define the scope of where to apply that tag.
<div> <h1>Hello World</h1> <h3>Live reloading in the repl makes web development fun!</h3> </div>
In Clojure, we only have the one tag, which is represented by a keyword that has the same name as the HTML tag. The vector defines the scope of the tag.
Using vectors for scope its trivial to use structured editing to organise and refactor the structure of your web page content.
(defn hello-world  [:div [:h1 (:text @app-state)] [:h3 "Live reloading in the repl makes web development fun!"]])
Using state for dynamic content
We can also use dynamic information from the application state, defined as an atom called
app-state. As this name refers to an atom, we need to use the
@ character or the
deref function to access its values
In this example, the atom contains a Clojure map with a key called
text. We can get the value associated with
text in the map by de-referencing the atom.
[:h1 (get @app-state :text)]
Its quite common to use the short form when the key of a map is the keyword type
[:h1 (:text @app-state)]