# Best Practices for Conditional Markup

Using the `<aura:if>` tag is the preferred approach to conditionally display markup but there are alternatives. Consider the performance cost and code maintainability when you design components. The best design choice depends on your use case.

## Conditionally Create Elements with `<aura:if>`

Let’s look at a simple example that shows an error message when an error occurs.

```nolang
<aura:if isTrue="{!v.isError}">
    <div>{!v.errorMessage}</div>
</aura:if>
```

The `<div>` component and its contents are only created and rendered if the value of the `isTrue` expression evaluates to `true`. If the value of the `isTrue` expression changes and evaluates to `false`, all the components inside the `<aura:if>` tag are destroyed. The components are created again if the `isTrue` expression changes again and evaluates to `true`.

The general guideline is to use `<aura:if>` because it helps your components load faster initially by deferring the creation and rendering of the enclosed element tree until the condition is fulfilled.

## Toggle Visibility Using CSS

You can use CSS to toggle visibility of markup by calling `$A.util.toggleClass(cmp, 'class')` in JavaScript code.

Elements in markup are created and rendered up front, but they’re hidden. For an example, see [Dynamically Showing or Hiding Markup](/docs/platform/aura-platform/guide/js-cb-show-hide-markup.md).

The conditional markup is created and rendered even if it’s not used, so `<aura:if>` is preferred.

## Dynamically Create Components in JavaScript

You can dynamically create components in JavaScript code. However, writing code is usually harder to maintain and debug than using markup. Again, using `<aura:if>` is preferred but the best design choice depends on your use case.

**See Also**

- [Conditional Expressions](/docs/platform/aura-platform/guide/expr-conditional.md)
- [Dynamically Creating Components](/docs/platform/aura-platform/guide/js-cb-dynamic-cmp-async.md)