Astro Dynamic HTML Tag

Variable

A variable set to an HTML tag name can be used to create a dynamic HTML element:

astro

---
// The dynamic tag variable must be capitalized
// otherwise Astro will render it as a literal HTML tag
const Element = 'div';
---

<Element>Dynamic HTML element content</Element>

Component Prop

Astro component that accepts an HTML tag name as a prop:

astro

---
import type { HTMLTag } from 'astro/types';

export interface Props {
  // Accept any supported HTML/SVG element name
  tag?: HTMLTag;
}

const {
  // Rename the HTML tag prop to capitalize it
  tag: Element = 'div',
  ...props
} = Astro.props;
---

<Element {...props}>Dynamic HTML element content</Element>