Declarative syntax to express {HT|X|...}ML/DOM-like structures in your source code are a big win if that's a significant percentage of the boilerplate code you have to write.

E.g.:

Literal HTML

``` <div class="active">Hello!</div> ```

Procedural JS

``` let elt = document.createElement('div'); elt.setAttribute("class", "active"); elt.innerText = "Hello!"; ```

Rust literals + HTML macro

``` html! { div(class: "active") { "Hello!" } } ```

Modern Lisp (Clojure, Fennel, et. al.)

``` [:div {:class "active"} "Hello!"] ```

Dunno about you, but when I'm comparing my template source code to the materialized DOM in my browser dev tools, the latter is a _lot_ simpler for me to reason about.