A blog about programming, Web development, Open Source, Linux and DevOps.

Astro Dynamic HTML Tag


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

// 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:

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',
} = Astro.props;
<Element {...props}>Dynamic HTML element content</Element>