h.div(class="myclass", style="color:red;")("content!") # <div class="myclass" style="color:red;">content!</div>

using Cobweb: h, preview body = h.body( h.h1("Here is a title!"), h.p("This is a paragraph."), h.button("Click Me for an alert!", onclick="buttonClicked()"), h.script("const buttonClicked = () => alert('This button was clicked!')"), ) preview(body)

h(tag::Symbol, children...; attrs...) # The dot syntax (getproperty) lets you autocomplete HTML5 tags h.tag # == h(:tag)

h.div("hi") # positional arguments add *children* h.div(style="border:none;") # keyword arguments add *attributes* # These all produce the same result: h.div("hi"; style="border:none;") h.div(style="border:none;", "hi") h.div(style="border:none;")("hi") h.div("hi")(style="border:none;")

# e.g. Strings have no text/html representation, so the added child is `HTML("hi")` h.div("hi") # <div>hi</div> # You can take advantage of Julia structs that already have text/html representations: md_example = h.div(md""" # Here is Some Markdown  - This is easier than writing html by hand. - And it "just works". """) preview(md_example)

node = Cobweb.h.div node.id = "my_id" node # <div id="my_id"></div>

node = Cobweb.h.div push!(node, Cobweb.h.h1("Hello!")) node # <div><h1>Hello!</h1></div> node[1] = "changed" node # <div>changed</div>

Cobweb.@h begin div(class="text-center text-xl", h4("This generates an h4 node!"), p("This is a paragraph"), div("Here is a div.") ) end

Javascript("alert('hello')") # text/javascript --> `alert('hello')` # text/html --> `<script>alert('hello')</script>` CSS("""html { border: none; }""") # text/css --> `html { border: none; }` # text/html --> `<style>html { border: none; }</style>`

using Downloads, Cobweb Cobweb.read(Downloads.download("https://juliacomputing.github.io/Cobweb.jl/"))