> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: a1edf1e7-3dd4-4b23-92b0-90544abc87be
---

# no-html-elements

> Disallow usage of unsupported HTML elements in UI extensions.

The `no-html-elements` rule disallows usage of standard [HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) (`<div>`, `<span>`, `<button>`, etc.) in UI extensions.

## Rule details

UI extensions only support components provided by the [`@hubspot/ui-extensions` package](/apps/developer-platform/add-features/ui-extensions/ui-components/overview). Standard HTML elements are not supported in the UI extensions runtime environment and will fail to render.

This rule detects and reports usage of any standard HTML elements in your extension code. Note that other third-party React component libraries are also not supported in UI extensions, though they are not currently linted by this rule.

## HTML element alternatives

Use the following UI extension components instead of standard HTML elements:

| HTML Element              | UI Extension Component                                                                                                                                                                                                                                                                                                                                   |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<div>`                   | [`<Box>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box)                                                                                                                                                                                                                                                     |
| `<p>`                     | [`<Text>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text)                                                                                                                                                                                                                                                   |
| `<span>`                  | [`<Text inline>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text)                                                                                                                                                                                                                                            |
| `<h1>` - `<h6>`           | [`<Heading>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/heading)                                                                                                                                                                                                                                             |
| `<button>`                | [`<Button>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button)                                                                                                                                                                                                                                               |
| `<input>`                 | [`<Input>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/input), [`<NumberInput>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/number-input), [`<DateInput>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/date-input), etc. |
| `<img>`                   | [`<Image>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image)                                                                                                                                                                                                                                                 |
| `<a>`                     | [`<Link>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link)                                                                                                                                                                                                                                                   |
| `<ul>`, `<ol>`, `<li>`    | [`<List>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/list)                                                                                                                                                                                                                                                   |
| `<table>`, `<tr>`, `<td>` | [`<Table>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/table), [`<TableRow>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/table), [`<TableCell>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/table)                      |

For a complete list of available components, refer to the [UI component documentation](/apps/developer-platform/add-features/ui-extensions/ui-components/overview).

## Examples

### Container elements

Instead of using `<div>`, `<p>`, or `<span>`:

```jsx theme={null}
// Incorrect
function App() {
  return <div>Hello World</div>;
}
```

Use [`<Box>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box):

```jsx theme={null}
import { Box } from '@hubspot/ui-extensions';

function App() {
  return <Box>Hello World</Box>;
}
```

### Text and heading elements

Instead of using `<h1>`, `<p>`, or other text elements:

```jsx theme={null}
// Incorrect
function App() {
  return (
    <div>
      <h1>My Title</h1>
      <p>Some text content</p>
    </div>
  );
}
```

Use [`<Heading>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/heading) and [`<Text>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text):

```jsx theme={null}
import { Box, Heading, Text } from '@hubspot/ui-extensions';

function App() {
  return (
    <Box>
      <Heading>My Title</Heading>
      <Text>Some text content</Text>
    </Box>
  );
}
```

### Interactive elements

Instead of using `<button>`:

```jsx theme={null}
// Incorrect
function App() {
  return <button onClick={() => alert('clicked')}>Click me</button>;
}
```

Use [`<Button>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button):

```jsx theme={null}
import { Button } from '@hubspot/ui-extensions';

const Extension = ({ actions }) => {
  return (
    <Button onClick={() => actions.addAlert({ type: 'success', message: 'Clicked!' })}>
      Click me
    </Button>
  );
};

hubspot.extend(({ actions }) => <Extension actions={actions} />);
```

### Media elements

Instead of using `<img>`:

```jsx theme={null}
// Incorrect
function App() {
  return <img src="logo.png" alt="Logo" />;
}
```

Use [`<Image>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image):

```jsx theme={null}
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="logo.png" alt="Logo" />;
}
```

## Related resources

* [UI extensions SDK overview](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk)
* [UI components overview](/apps/developer-platform/add-features/ui-extensions/ui-components/overview)