---
id: template
title: Template
---

The package `zio.http.template._` contains lightweight helpers for generating statically typed, safe html similiar in spirit to `scalatags`. 

## Html and DOM

### Html from string

One possible way is to create an instance of `Html` directly from a `String` value, with the obvious drawback of not having checks
from the compiler:

```scala
import zio.http.template._

val divHtml1: Html = Html.fromString("""<div class="container1 container2"><a href="http://zio.dev">ZIO Homepage</a></div>""")
```

### Html from constructors

In order to improve on type safety one could use `Html` with `Dom` constructor functions, with the drawback that the resulting
code is much more verbose:

```scala
import zio.http.template._

val divHtml2: Html = Html.fromDomElement(
  Dom.element(
    "div", 
    Dom.attr("class", "container1 container2"), 
    Dom.element(
      "a", 
      Dom.attr("href", "http://zio.dev"), 
      Dom.text("ZIO Homepage")
    )
  )
)
```

Please note that both values `divHtml1` and `divHtml2` produce identical html output.

### Html from Tag API

Practically one would very likely not use one of the above mentioned versions but instead use the `Tag API`. That API lets one use not only html 
elements like `div` or `a` but also html attributes like `hrefAttr` or `styleAttr` as scala functions. By convention values of html attributes 
are suffixed `attr` to easily distinguish those from html elements: 

```scala
import zio.http.template._

val divHtml3: Html = div(
  classAttr := "container1 container2",
  a(hrefAttr := "http://zio.dev", "ZIO Homepage")
)
```

Also `divHtml3` produces identical html output as `divHtml1` and `divHtml2`. 

Html elements like `div` or `a` are represented as values of `PartialElement` which have an `apply` method for nesting html elements, 
html attributes and text values. Html attributes are represented as values of `PartialAttribute` which provides an operator `:=` for "assigning" 
attribute values. Besides `:=` attributes also have an `apply` method that provides an alternative syntax e.g. instead
of `a(hrefAttr := "http://zio.dev", "ZIO Homepage")` one can use `a(hrefAttr("http://zio.dev"), "ZIO Homepage")`. 

### Html composition

One can compose values of `Html` sequentially using the operator `++` to produce a larger `Html`: 

```scala
import zio.http.template._

val fullHtml: Html = divHtml1 ++ divHtml2 ++ divHtml3
```

## Html response

One can create a successful http response in routing code from a given value of `Html` with `Response.html`.