maud

Elements and attributes

Elements with contents: p {}

Write an element using curly braces:

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

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 />.

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

In Rust 2021, the # symbol must be preceded by a space, to avoid conflicts with reserved syntax:

html! {
    // Works on all Rust editions
    input #pinkie;

    // Works on Rust 2018 and older only
    input#pinkie;
}

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