Default Bootstrap Navbar in Elm

Nav.elm

module Nav exposing (..)

import Html exposing (Html, div, a, span, i, ul, li, nav, button, text, form, input, header)
import Html.Attributes exposing (class, id, href, placeholder, attribute, type')


navbar : Html msg -> Html msg
navbar links =
    header []
        [ nav [ class "navbar navbar-default" ]
            [ div [ class "container-fluid" ]
                [ div [ class "navbar-header" ]
                    [ mobileToggleButton
                    , navbrand "#" "Brand"
                    ]
                , links
                ]
            ]
        ]


navbrand : String -> String -> Html msg
navbrand url brandName =
    a [ class "navbar-brand", href url ] [ text brandName ]


mobileToggleButton : Html msg
mobileToggleButton =
    button [ type' "button", class "navbar-toggle collapsed", attribute "data-toggle" "collapse", attribute "data-target" "#bs-example-1", attribute "aria-expanded" "false" ]
        [ span [ class "sr-only" ] [ text "Toggle Navigation" ]
        , span [ class "icon-bar" ] []
        , span [ class "icon-bar" ] []
        , span [ class "icon-bar" ] []
        ]


navbarLinks : Html msg
navbarLinks =
    div [ class "collapse navbar-collapse", id "bs-example-navbar-collapse-1" ]
        [ ul
            [ class "nav navbar-nav" ]
            [ li [ class "active" ] [ a [ href "#" ] [ text "Link", span [ class "sr-only" ] [ text "(current)" ] ] ]
            , li [] [ a [ href "#" ] [ text "Link" ] ]
            , li [ class "dropdown" ]
                [ a [ href "#", class "dropdown-toggle", attribute "data-toggle" "dropdown", attribute "role" "button", attribute "aria-haspopup" "true", attribute "aria-expanded" "false" ]
                    [ text "Dropdown", span [ class "caret" ] [] ]
                , ul [ class "dropdown-menu" ]
                    [ li [] [ a [ href "#" ] [ text "Action" ] ]
                    , li [] [ a [ href "#" ] [ text "Another action" ] ]
                    , li [] [ a [ href "#" ] [ text "Something else here" ] ]
                    , li [ attribute "role" "separator", class "divider" ] []
                    , li [] [ a [ href "#" ] [ text "Separated link" ] ]
                    , li [ attribute "role" "separator", class "divider" ] []
                    , li [] [ a [ href "#" ] [ text "One more separated link" ] ]
                    ]
                ]
            ]
        ]

What is this shit? https://gist.github.com/glinesbdev/47c50795bb5a1903fa5c9e9d1f4512f0#file-nav-elm-L48 -- why do you have to put an empty array in an li ?

Again, empty arrays here... https://gist.github.com/glinesbdev/47c50795bb5a1903fa5c9e9d1f4512f0#file-nav-elm-L31

Oh I just found this: http://mbylstra.github.io/html-to-elm/

Is Elm not meant to have HTML directly within it? How do you do templating then?

What the fuck is this? It's like you put Javascript in a blender, drank it, and vomited it onto crusty old HTML that had been baked in the sun.

Knowing nothing about this language, but a bit about statically-typed languages... I still don't know what this does: https://gist.github.com/glinesbdev/47c50795bb5a1903fa5c9e9d1f4512f0#file-nav-elm-L22

The HTML this outputs can be found here: https://gist.github.com/glinesbdev/0c3fc6bcadf42e115b0bcf39b2b06b63