# Alpine.js Documentation - Directives

Alpine directives are attributes that you can add to HTML elements to give them special behavior.

## [x-html](/directives/html)

`x-html` sets the "innerHTML" property of an element to the result of a given expression.

> ⚠️ Only use on trusted content and never on user-provided content. ⚠️
> Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.

Here's a basic example of using `x-html` to display a user's username.

```
<div x-data="{ username: '<strong>calebporzio</strong>' }">


nUsername: <span x-html="username"></span>


n</div>
```

Username:

Now the `<span>` tag's inner HTML will be set to "**calebporzio**".

Code highlighting provided by [Torchlight](https://torchlight.dev/)