How to get whitespace between html tags

Question

Using Elm's Html module, the output do not have any whitespace between html tags. But for inline displayed tags, whitespace has a function and makes the browser display empty space between them.

div []
    [ strong [] [ text "Key:" ]
    , span [] [ text "value" ]
    , text "(extra)"
    ]

Results in:

<div><strong>Key:</strong><span>value</span>(extra)</div>

Shown in a browser as: Key:value(extra)

Desired result

The desired html must have some kind of whitespace:

<div>
<strong>Key:</strong>
<span>value</span>
(extra)
</div>

Shown in browser as: Key: value (extra)

Answer 1

You can make a wrapper for Html tags as follows:

type alias HtmlTag msg =
   List (Html.Attribute msg) -> List (Html msg) -> Html msg


interspaced : HtmlTag msg -> HtmlTag msg
interspaced fn =
   \attr content -> fn attr (content |> List.intersperse (text " "))


main : Html msg
main =
    interspaced div []
        [ strong [] [ text "Key:" ]
        , span [] [ text "value" ]
        , text "(extra)"
        ]