Set HTML tag

`element.setTag(tag)`

Set the HTML tag of an element.

For example, you can change a Webflow list element to use the <ul> or <ol> HTML tags. The valid tag values depend on the element type. Webflow List, Div Block, and Heading elements are supported.

Syntax

1 element.setTag(tag: BlockElementTag | HeadingTag | ListTag): Promise<null>

You can also use this method to set the CMS binding of a Heading element:

1 // Heading elements only — binds the tag to a CMS field
2 element.setTag(binding: BindingInput): Promise<null>

Parameters

The valid values for tag depend on the element type:

Element type	Parameter type	Valid tag values
`Block`, `Section`, `VFlex`, `HFlex`, `Container`, `Row`, `Column`, `BlockContainer`, `RichText`, `Slot`, `NavbarContainer`, `TabsContent`	`BlockElementTag`	`div`, `header`, `footer`, `nav`, `main`, `section`, `article`, `aside`, `address`, `figure`
`Heading`	`HeadingTag`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`
`List`	`ListTag`	`ul`, `ol`

Returns

Promise<null>

A Promise that resolves when the tag has changed.

Example

1 const el = await webflow.getSelectedElement();
2 
3 // Change a Section element to use a nav tag
4 if (el?.type === 'Section') {
5   await el.setTag('nav');
6 }
7 
8 // Change a Heading element from h1 to h2 and change its CMS binding
9 if (el?.type === 'Heading') {
10   await el.setTag('h2');
11   // Bind to a CMS field
12   await el.setTag({
13     sourceType: 'cms',
14     collectionId: 'col_abc',
15     fieldId: 'field_xyz',
16   });
17 }
18 
19 // Change a List element from unordered to ordered
20 if (el?.type === 'List') {
21   await el.setTag('ol');
22 }

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

1	// Heading elements only — binds the tag to a CMS field
2	element.setTag(binding: BindingInput): Promise<null>

1	const el = await webflow.getSelectedElement();
2
3	// Change a Section element to use a nav tag
4	if (el?.type === 'Section') {
5	await el.setTag('nav');
6	}
7
8	// Change a Heading element from h1 to h2 and change its CMS binding
9	if (el?.type === 'Heading') {
10	await el.setTag('h2');
11	// Bind to a CMS field
12	await el.setTag({
13	sourceType: 'cms',
14	collectionId: 'col_abc',
15	fieldId: 'field_xyz',
16	});
17	}
18
19	// Change a List element from unordered to ordered
20	if (el?.type === 'List') {
21	await el.setTag('ol');
22	}