How do I set a semantic HTML tag in Webflow?

Choose the tag that matches the job

A semantic tag tells the browser what a region of the page is. Webflow's semantic tags article lists Header, Footer, Nav, Main, Section, Article, Aside, Address, and Figure. A Div has no meaning of that kind. The tag does not change how the region looks. It changes what assistive technology can report, and it gives the page a structure you can read in the Navigator.

Use Main for the primary content of the page. Webflow says Main should not hold repeated content such as navigation links, the site logo, or a search form. Use Header for an introductory region, often at the top. Use Footer for the closing region. Use Nav for a set of navigation links. The navbar element already has its own tag, and you cannot assign a different HTML5 tag to it.

Use Section to group content that shares a theme. Use Article for a piece that stands alone, such as a post. Use Aside for a sidebar or a callout that sits beside the main content. Use Address for contact details of the page author or the site owner. Use Figure for a photo, diagram, or other illustration that stands on its own.

Set the tag in the Settings panel

Select the element on the canvas. Open the Settings panel. Click the Tag dropdown and choose the tag that fits that element. The Navigator then shows the tag name. An element with the Div tag shows as Div. An element with the Section tag shows as Section.

Some elements already have a meaning, so this dropdown is not how you change them. Webflow says you cannot define HTML5 tags for the navbar, for headings from H1 to H6, or for lists. Change a heading level on the heading itself. The heading levels guide covers that setting. A region tag does not replace the heading order inside the region.

To add a new section, add a Box and set its tag to Section. Webflow's semantic tags article gives that as the way to add a section. A Box can also use Div, Header, Footer, Nav, Main, Article, Aside, Address, or Figure. An older Div block that is already on the page can still receive a tag from the same Settings dropdown. You do not have to rebuild the page to name the regions.

Example: on a services page, set the block that holds the service copy to Main, and set the closing links to Footer. Use Section for each band of services inside Main. Leave the navbar on its own element. Do not wrap that navbar in Main, because Main should not contain the navigation.

Do not style the tag by accident

You can style every element that uses a tag with a tag selector, such as All Sections or All Headers. Select the element, open the Style panel, click the selector field, and choose the tag. Webflow's HTML tags article says a class on the element overrides that tag style.

New tag selectors start empty, so the site looks the same until you change one. Styling All Divs changes every element that uses the div tag, including a Box set to Div. Check the other pages after you change a tag style. The same article warns that these selectors can make wide changes if you are not tracking which elements use the tag.

The tag itself still does not add padding, color, or a new font. If the region looks different after you only changed the tag, a tag selector already had styles. Open All Sections or All Headers and read the styles before you add a class to chase the difference.

Read the Navigator before you publish

Open the Navigator and read the region names from top to bottom. You want one Main for the primary content, a Header and a Footer where those regions exist, and Sections inside the content rather than a long stack of unnamed Divs. Preview the page. The layout should match what you had before the tag change.

Publish when the structure reads clearly and the design is unchanged. If a heading level was skipped, fix that on the heading, not by renaming a Div to Article. Headings and region tags answer different questions. One says what the text is. The other says what the block is.

Naming these regions on an existing site is ordinary structure work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.