maud/docs/content/elements-attributes.md

Elements and attributes

Elements with contents: p {}

Write an element using curly braces:

html! {
    h1 { "Poem" }
    p {
        strong { "Rock," }
        " you are a rock."
    }
}

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

Void elements: br;

Terminate a void element using a semicolon:

html! {
    link rel="stylesheet" href="poetry.css";
    p {
        "Rock, you are a rock."
        br;
        "Gray, you are gray,"
        br;
        "Like a rock, which you are."
        br;
        "Rock."
    }
}

The result will be rendered with HTML syntax – <br> not <br />.

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

Custom elements and data attributes

Maud also supports elements and attributes with hyphens in them. This includes custom elements, data attributes, and ARIA annotations.

html! {
    article data-index="12345" {
        h1 { "My blog" }
        tag-cloud { "pinkie pie pony cute" }
    }
}

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 by omitting the value.

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

Before version 0.22.2, Maud required a ? suffix on empty attributes: checked?. This is no longer necessary (#238), but still supported for backward compatibility.

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";
}

The classes and IDs can be quoted. This is useful for names with numbers or symbols which otherwise wouldn't parse:

html! {
    div."col-sm-2" { "Bootstrap column!" }
}

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!"
        .tip { "Storing food in a refrigerator can make it 20% cooler." }
    }
}