maud/docs/content/elements-attributes.md

Elements and attributes

Elements: p

Write an element using curly braces: p { ... }.

Terminate a void element using a semicolon: br;. Note that the result will be rendered with HTML syntax – <br> not <br />.

html! {
    h1 { "Poem" }
    p {
        "Rock, you are a rock."
        br;
        "Gray, you are gray,"
        br;
        "Like a rock, which you are."
        br;
        "Rock."
    }
}

Maud also supports ending a void element with a slash: br /. This syntax is deprecated and should not be used in new code.

Before version 0.18, Maud allowed the curly braces to be omitted. This syntax was removed and now causes an error instead.

Custom elements

Maud also supports custom elements.

html! {
    blog-post {
        title { "My blog" }
    }
}

Non-empty attributes: title="yay"

Add attributes using the syntax: attr="value". You can attach any number of attributes to an element. The values must be quoted: they are parsed as string literals.

html! {
    ul {
        li {
            a href="about:blank" { "Apple Bloom" }
        }
        li class="lower-middle" {
            "Sweetie Belle"
        }
        li dir="rtl" {
            "Scootaloo "
            small { "(also a chicken)" }
        }
    }
}

Empty attributes: checked?

Declare an empty attribute using a ? suffix: checked?.

html! {
    form {
        input type="checkbox" name="cupcakes" checked?;
        " "
        label for="cupcakes" { "Do you like cupcakes?" }
    }
}

Classes and IDs: .foo #bar

Add classes and IDs to an element using .foo and #bar syntax. You can chain multiple classes and IDs together, and mix and match them with other attributes:

html! {
    input#cannon.big.scary.bright-red type="button" value="Launch Party Cannon";
}

Implicit div elements

If the element name is omitted, but there is a class or ID, then it is assumed to be a div.

html! {
    #main {
        "Main content!"
    }
}