# AML HTML Layout

> Reference for HTMLLayout — a dashboard view type that uses HTML and CSS to compose dashboard blocks into any structure.

:::tip Knowledge Checkpoint
A grasp of this concept will help you understand this documentation better: [HTML Layout](/docs/dashboards/html-layout)
:::

`HTMLLayout` is a value for the `view` parameter in a `Dashboard`. Instead of positioning blocks with pixel coordinates, you write HTML and CSS directly to structure the dashboard, and drop blocks into the markup using the `<h-block>` web component.

```aml
Dashboard sales_overview {
  // ... blocks ...

  view: HTMLLayout {
    content: @html
      
        <h-block name="revenue_chart" />
        <h-block name="region_filter" />
      
    ;;
  }
}
```

## Parameters

Parameter | Description
--- | ---
`content` | The HTML markup for the layout. Written as a `@html ... ;;` string. May contain any valid HTML and inline CSS.

## Placing blocks

Use the `<h-block>` web component to render a block inside the HTML markup. The `name` attribute must match the block identifier declared in the dashboard.

```html
<h-block name="block_id" />
```

Each block is rendered with its default UI (chart, table, filter, text) fully styled. You don't need to specify size or position - the block adapts to the space its container provides.

Every block declared in the dashboard should appear somewhere in the `content` markup. Blocks not referenced by an `<h-block>` element won't be displayed.

## Layout with CSS

Use standard CSS (flexbox, grid, inline styles, `<style>` tags) to arrange containers. There is no `pos()` function and no fixed canvas dimensions.

```aml
view: HTMLLayout {
  content: @html
    <style>
      .dashboard { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
      .charts    { display: flex; flex-direction: column; gap: 12px; }
    </style>
    
      
        <h-block name="region_filter" />
      
      
        <h-block name="revenue_chart" />
        <h-block name="orders_chart" />
      
    
  ;;
}
```

## Full example

For real-world examples, see the [HTML Layout examples](/docs/dashboards/html-layout#examples).

```aml
Dashboard sales_overview {
  title: 'Sales Overview'

  block heading: TextBlock {
    content: @md # Sales Overview ;;
  }

  block revenue_chart: VizBlock { ... }
  block region_filter: CustomControlBlock { ... }

  interactions: [
    FilterInteraction {
      from: 'region_filter'
      to: [ CustomMapping { block: 'revenue_chart' } ]
    }
  ]

  view: HTMLLayout {
    content: @html
      
        <h-block name="heading" />
        <h-block name="region_filter" />
        <h-block name="revenue_chart" />
      
    ;;
  }
}
```

## See also

- [AML Dashboard](/reference/aml/dashboard): full dashboard syntax including blocks, interactions, and settings
- [AML Canvas Layout](/reference/aml/canvas-layout): a single free-form canvas page with pixel-based positioning
- [AML Tab Layout](/reference/aml/tab-layout): tabbed canvas dashboard