---
title: 'Literals and Expressions'
---

## Literals

If expressions resolve to types that implement `Display`, they will be converted to strings and
inserted into the DOM as a [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text) node.

All display text must be enclosed by `{}` blocks because the `html!` macro parses text as a Rust
expression. This is the greatest deviation from the HTML specification that the `html!` macro makes.

```rust
use yew::html;

let text = "lorem ipsum";
html!{
    <>
        <div>{text}</div>
        <div>{"dolor sit"}</div>
        <span>{42}</span>
    </>
}
```

## Expressions

You can insert expressions in your HTML using `{}` blocks, as long as they resolve to `Html`

```rust
use yew::html;

html! {
  <div>
    {
      if show_link {
        html! {
          <a href="https://example.com">{"Link"}</a>
        }
      } else {
        html! {}
      }
    }
  </div>
}
```

It often makes sense to extract these expressions into separate functions or closures to make your
code more readable. This can also help to reduce code duplication by moving common elements of your
UI into composable functions.

```rust
use yew::{html, Html};

let show_link = true;
let maybe_display_link = move || -> Html {
  if show_link {
    html! {
      <a href="https://example.com">{"Link"}</a>
    }
  } else {
    html! {}
  }
};

html! {
     <div>{maybe_display_link()}</div>
}
```
