maud/docs/content/elements-attributes.md

# Elements and attributes

## Elements with contents: `p {}`

Write an element using curly braces:

```rust
# let _ = maud::
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][#137]
and now causes an error instead.

[#137]: https://github.com/lambda-fairy/maud/pull/137

## Void elements: `br;`

Terminate a void element using a semicolon:

```rust
# let _ = maud::
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][#96]
and should not be used in new code.

[#96]: https://github.com/lambda-fairy/maud/pull/96

## Custom elements and `data` attributes

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

```rust
# let _ = maud::
html! {
    article data-index="12345" {
        h1 { "My blog" }
        tag-cloud { "pinkie pie pony cute" }
    }
}
# ;
```

[custom elements]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
[data attributes]: https://css-tricks.com/a-complete-guide-to-data-attributes/
[ARIA annotations]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Annotations

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

```rust
# let _ = maud::
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.

```rust
# let _ = maud::
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.

[#238]: https://github.com/lambda-fairy/maud/pull/238

## 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:

```rust
# let _ = maud::
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:

```rust
# let _ = maud::
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`.

```rust
# let _ = maud::
html! {
    #main {
        "Main content!"
        .tip { "Storing food in a refrigerator can make it 20% cooler." }
    }
}
# ;
```