html docs elm examples HTML to Html

html.elm

import Html
import Html.Attributes as Attributes

--Tags

Html.a [ Attributes.href "http://www-db.stanford.edu/~evtimov/midas/demos.html", Attributes.target "_blank" ] [ text "Open in a new window!" ]

<a href="http://www-db.stanford.edu/~evtimov/midas/demos.html" target="_blank">Hello World!</a>


--Headers

h1 : List (Attribute msg) -> List (Html msg) -> Html msg

Html.h1 [] [ text "Hello there" ]

--Output
<h1>Hello there</h1>


Html.h1 [ Attributes.style "height" "90px" ] [ text "Hello there" ]

--Output
<h1 style="height: 90px">Hello there</h1>

--Same format for whole Html package except for Primitives (see docs: https://package.elm-lang.org/packages/elm/html/latest/Html)



Html.div [ Attributes.class "container" ] [ text "Hello World!" ]

<div class="container">Hello World!</div>


Html.p [ Attributes.class "container" ] [ text "Hello World!" ]

<p class="container">Hello World!</p>


Html.hr [ Attributes.class "container" ] [ text "Hello World!" ]

<hr class="container">Hello World!</hr>


Html.pre [ Attributes.class "container" ] [ text "Hello World!" ]

<pre class="container">Hello World!</pre>


Html.blockquote [ Attributes.class "container" ] [ text "Hello World!" ]

<blockquote class="container">Hello World!</blockquote>


Html.span [ Attributes.class "container" ] [ text "Hello World!" ]

<span class="container">Hello World!</span>


Html.code [ Attributes.class "container" ] [ text "Hello World!" ]

<code class="container">Hello World!</code>


Html.em [ Attributes.class "container" ] [ text "Hello World!" ]

<em class="container">Hello World!</em>


Html.strong [ Attributes.class "container" ] [ text "Hello World!" ]

<strong class="container">Hello World!</strong>

--You can put an attribute in these ones but don't because it makes me feel weird 

i [] [ text "Hello World!" ]

<i>Hello World!</i>


b [] [ text "Hello World!" ]

<b>Hello World!</b>


u [] [ text "Hello World!" ]

<u>Hello World!</u>

--just don't

br [] []

<br />


Html.sub [ Attributes.class "container" ] [ text "Hello World!" ]

<sub class="container">Hello World!</sub>


Html.sup [ Attributes.class "container" ] [ text "Hello World!" ]

<sup class="container">Hello World!</sup>


Html.ol [ Attributes.class "container" ] [ text "Hello World!" ]

<ol class="container">Hello World!</ol>


Html.ul [ Attributes.class "container" ] [ text "Hello World!" ]

<ul class="container">Hello World!</ul>


Html.li [ Attributes.class "container" ] [ text "Hello World!" ]

<li class="container">Hello World!</li>


Html.dl [ Attributes.class "container" ] [ text "Hello World!" ]

<dl class="container">Hello World!</dl>


Html.dt [ Attributes.class "container" ] [ text "Hello World!" ]

<dt class="container">Hello World!</dt>


Html.dd [ Attributes.class "container" ] [ text "Hello World!" ]

<dd class="container">Hello World!</dd>


Html.img [ Attributes.class "container" ] [ text "Hello World!" ]

<img class="container">Hello World!</img>


Html.iframe [ Attributes.class "container" ] [ text "Hello World!" ]

<iframe class="container">Hello World!</iframe>


Html.canvas [ Attributes.class "container" ] [ text "Hello World!" ]

<canvas class="container">Hello World!</canvas>


Html.math [ Attributes.class "container" ] [ text "Hello World!" ]

<math class="container">Hello World!</math>


Html.form [ Attributes.class "container" ] [ text "Hello World!" ]

<form class="container">Hello World!</form>


Html.input [ Attributes.class "container" ] [ text "Hello World!" ]

<input class="container">Hello World!</input>


Html.textarea [ Attributes.class "container" ] [ text "Hello World!" ]

<textarea class="container">Hello World!</textarea>


Html.button [ Attributes.class "container" ] [ text "Hello World!" ]

<button class="container">Hello World!</button>


Html.select [ Attributes.class "container" ] [ text "Hello World!" ]

<select class="container">Hello World!</select>


Html.option [ Attributes.class "container" ] [ text "Hello World!" ]

<option class="container">Hello World!</option>


Html.section [ Attributes.class "container" ] [ text "Hello World!" ]

<section class="container">Hello World!</section>


Html.nav [ Attributes.class "container" ] [ text "Hello World!" ]

<nav class="container">Hello World!</nav>


Html.article [ Attributes.class "container" ] [ text "Hello World!" ]

<article class="container">Hello World!</article>


Html.aside [ Attributes.class "container" ] [ text "Hello World!" ]

<aside class="container">Hello World!</aside>


Html.header [ Attributes.class "container" ] [ text "Hello World!" ]

<header class="container">Hello World!</header>


Html.footer [ Attributes.class "container" ] [ text "Hello World!" ]

<footer class="container">Hello World!</footer>


Html.address [ Attributes.class "container" ] [ text "Hello World!" ]

<address class="container">Hello World!</address>


Html.main_ [ Attributes.class "container" ] [ text "Hello World!" ]

<main_ class="container">Hello World!</main_>


Html.figure [ Attributes.class "container" ] [ text "Hello World!" ]

<figure class="container">Hello World!</figure>


Html.figcaption [ Attributes.class "container" ] [ text "Hello World!" ]

<figcaption class="container">Hello World!</figcaption>


Html.table [ Attributes.class "container" ] [ text "Hello World!" ]

<table class="container">Hello World!</table>


Html.caption [ Attributes.class "container" ] [ text "Hello World!" ]

<caption class="container">Hello World!</caption>


Html.colgroup [ Attributes.class "container" ] [ text "Hello World!" ]

<colgroup class="container">Hello World!</colgroup>


Html.col [ Attributes.class "container" ] [ text "Hello World!" ]

<col class="container">Hello World!</col>


Html.tbody [ Attributes.class "container" ] [ text "Hello World!" ]

<tbody class="container">Hello World!</tbody>


Html.thead [ Attributes.class "container" ] [ text "Hello World!" ]

<thead class="container">Hello World!</thead>


Html.tfoot [ Attributes.class "container" ] [ text "Hello World!" ]

<tfoot class="container">Hello World!</tfoot>


Html.tr [ Attributes.class "container" ] [ text "Hello World!" ]

<tr class="container">Hello World!</tr>


Html.td [ Attributes.class "container" ] [ text "Hello World!" ]

<td class="container">Hello World!</td>


Html.th [ Attributes.class "container" ] [ text "Hello World!" ]

<th class="container">Hello World!</th>


Html.fieldset [ Attributes.class "container" ] [ text "Hello World!" ]

<fieldset class="container">Hello World!</fieldset>


Html.legend [ Attributes.class "container" ] [ text "Hello World!" ]

<legend class="container">Hello World!</legend>


Html.label [ Attributes.class "container" ] [ text "Hello World!" ]

<label class="container">Hello World!</label>


Html.datalist [ Attributes.class "container" ] [ text "Hello World!" ]

<datalist class="container">Hello World!</datalist>


Html.optgroup [ Attributes.class "container" ] [ text "Hello World!" ]

<optgroup class="container">Hello World!</optgroup>


Html.output [ Attributes.class "container" ] [ text "Hello World!" ]

<output class="container">Hello World!</output>


Html.progress [ Attributes.class "container" ] [ text "Hello World!" ]

<progress class="container">Hello World!</progress>


Html.meter [ Attributes.class "container" ] [ text "Hello World!" ]

<meter class="container">Hello World!</meter>


Html.audio [ Attributes.class "container" ] [ text "Hello World!" ]

<audio class="container">Hello World!</audio>


Html.video [ Attributes.class "container" ] [ text "Hello World!" ]

<video class="container">Hello World!</video>


Html.source [ Attributes.class "container" ] [ text "Hello World!" ]

<source class="container">Hello World!</source>


Html.track [ Attributes.class "container" ] [ text "Hello World!" ]

<track class="container">Hello World!</track>


Html.embed [ Attributes.class "container" ] [ text "Hello World!" ]

<embed class="container">Hello World!</embed>


Html.object [ Attributes.class "container" ] [ text "Hello World!" ]

<object class="container">Hello World!</object>


Html.param [ Attributes.class "container" ] [ text "Hello World!" ]

<param class="container">Hello World!</param>


Html.ins [ Attributes.class "container" ] [ text "Hello World!" ]

<ins class="container">Hello World!</ins>


Html.del [ Attributes.class "container" ] [ text "Hello World!" ]

<del class="container">Hello World!</del>


Html.small [ Attributes.class "container" ] [ text "Hello World!" ]

<small class="container">Hello World!</small>


Html.cite [ Attributes.class "container" ] [ text "Hello World!" ]

<cite class="container">Hello World!</cite>


Html.dfn [ Attributes.class "container" ] [ text "Hello World!" ]

<dfn class="container">Hello World!</dfn>


Html.abbr [ Attributes.class "container" ] [ text "Hello World!" ]

<abbr class="container">Hello World!</abbr>


Html.time [ Attributes.class "container" ] [ text "Hello World!" ]

<time class="container">Hello World!</time>


Html.var [ Attributes.class "container" ] [ text "Hello World!" ]

<var class="container">Hello World!</var>


Html.samp [ Attributes.class "container" ] [ text "Hello World!" ]

<samp class="container">Hello World!</samp>


Html.kbd [ Attributes.class "container" ] [ text "Hello World!" ]

<kbd class="container">Hello World!</kbd>


Html.s [ Attributes.class "container" ] [ text "Hello World!" ]

<s class="container">Hello World!</s>


Html.q [ Attributes.class "container" ] [ text "Hello World!" ]

<q class="container">Hello World!</q>


Html.mark [ Attributes.class "container" ] [ text "Hello World!" ]

<mark class="container">Hello World!</mark>


Html.ruby [ Attributes.class "container" ] [ text "Hello World!" ]

<ruby class="container">Hello World!</ruby>


Html.rt [ Attributes.class "container" ] [ text "Hello World!" ]

<rt class="container">Hello World!</rt>


Html.rp [ Attributes.class "container" ] [ text "Hello World!" ]

<rp class="container">Hello World!</rp>


Html.bdi [ Attributes.class "container" ] [ text "Hello World!" ]

<bdi class="container">Hello World!</bdi>


Html.bdo [ Attributes.class "container" ] [ text "Hello World!" ]

<bdo class="container">Hello World!</bdo>


Html.wbr [ Attributes.class "container" ] [ text "Hello World!" ]

<wbr class="container">Hello World!</wbr>


Html.details [ Attributes.class "container" ] [ text "Hello World!" ]

<details class="container">Hello World!</details>


Html.summary [ Attributes.class "container" ] [ text "Hello World!" ]

<summary class="container">Hello World!</summary>


Html.menuitem [ Attributes.class "container" ] [ text "Hello World!" ]

<menuitem class="container">Hello World!</menuitem>


Html.menu [ Attributes.class "container" ] [ text "Hello World!" ]

<menu class="container">Hello World!</menu>



--Attributes

--String

div [Attributes.id "something"] [ text "content" ]

div [Attributes.title "something"] [ text "content" ]

div [Attributes.type_ "something"] [ text "content" ]

div [Attributes.value "something"] [ text "content" ]

div [Attributes.placeholder "something"] [ text "content" ]

div [Attributes.accept "something"] [ text "content" ]

div [Attributes.acceptCharset "something"] [ text "content" ]

div [Attributes.action "something"] [ text "content" ]

div [Attributes.enctype "something"] [ text "content" ]

div [Attributes.list "something"] [ text "content" ]

div [Attributes.method "something"] [ text "content" ]

div [Attributes.name "something"] [ text "content" ]

div [Attributes.pattern "something"] [ text "content" ]

div [Attributes.for "something"] [ text "content" ]

div [Attributes.form "something"] [ text "content" ]

div [Attributes.max "something"] [ text "content" ]

div [Attributes.min "something"] [ text "content" ]

div [Attributes.step "something"] [ text "content" ]

div [Attributes.wrap "something"] [ text "content" ]

div [Attributes.href "something"] [ text "content" ]

div [Attributes.target "something"] [ text "content" ]

div [Attributes.download "something"] [ text "content" ]

div [Attributes.hreflang "something"] [ text "content" ]

div [Attributes.media "something"] [ text "content" ]

div [Attributes.ping "something"] [ text "content" ]

div [Attributes.rel "something"] [ text "content" ]

div [Attributes.usemap "something"] [ text "content" ]

div [Attributes.shape "something"] [ text "content" ]

div [Attributes.coords "something"] [ text "content" ]

div [Attributes.src "something"] [ text "content" ]

div [Attributes.alt "something"] [ text "content" ]

div [Attributes.preload "something"] [ text "content" ]

div [Attributes.poster "something"] [ text "content" ]

div [Attributes.kind "something"] [ text "content" ]

div [Attributes.srclang "something"] [ text "content" ]

div [Attributes.sandbox "something"] [ text "content" ]

div [Attributes.srcdoc "something"] [ text "content" ]

div [Attributes.align "something"] [ text "content" ]

div [Attributes.headers "something"] [ text "content" ]

div [Attributes.scope "something"] [ text "content" ]

div [Attributes.contextmenu "something"] [ text "content" ]

div [Attributes.dir "something"] [ text "content" ]

div [Attributes.draggable "something"] [ text "content" ]

div [Attributes.dropzone "something"] [ text "content" ]

div [Attributes.itemprop "something"] [ text "content" ]

div [Attributes.lang "something"] [ text "content" ]

div [Attributes.cite "something"] [ text "content" ]

div [Attributes.datetime "something"] [ text "content" ]

div [Attributes.pubdate "something"] [ text "content" ]

div [Attributes.manifest "something"] [ text "content" ]

--Bool

div [ Attributes.hidden True ] []

div [ Attributes.checked True ] []

div [ Attributes.selected True ] []

div [ Attributes.autocomplete True ] []

div [ Attributes.autofocus True ] []

div [ Attributes.disabled True ] []

div [ Attributes.multiple True ] []

div [ Attributes.novalidate True ] []

div [ Attributes.readonly True ] []

div [ Attributes.required True ] []

div [ Attributes.ismap True ] []

div [ Attributes.autoplay True ] []

div [ Attributes.controls True ] []

div [ Attributes.loop True ] []

div [ Attributes.default True ] []

div [ Attributes.reversed True ] []

div [ Attributes.contenteditable True ] []

div [ Attributes.spellcheck True ] []


--Int

div [ Attributes.maxlength 42 ] []

div [ Attributes.minlength 42 ] []

div [ Attributes.size 42 ] []

div [ Attributes.cols 42 ] []

div [ Attributes.rows 42 ] []

div [ Attributes.height 42 ] []

div [ Attributes.width 42 ] []

div [ Attributes.start 42 ] []

div [ Attributes.colspan 42 ] []

div [ Attributes.rowspan 42 ] []

div [ Attributes.tabindex 42 ] []



--MIT License, CC0 1.0 Universal or whatever I guess but I'm not liable for how you use this documentation