How are semantic HTML tags assigned to Framer layers?

Definition: In Framer, a semantic HTML tag gives a text layer or frame a structural role in the published page, such as a heading, paragraph, navigation region, or footer. Framer assigns tags through text styles and lets you override tags for specific instances in the Accessibility panel.

Key facts

• Framer's SEO guide says a page should have a clear main heading and that you can manually adjust semantic tags for headers and images. Framer's SEO features guide documents this under “Semantic text and elements.”
• Text styles are automatically assigned tags such as headings, paragraphs, or spans. The Framer documentation on text styles and semantic tags says specific instances can be overridden in the Accessibility panel.
• A frame can receive a structural tag from the Accessibility section. Framer's navigation and footer guide shows nav for a layer containing navigation links and footer for the footer layer.
• Framer's HTML tags guide describes article, aside, and main as semantic page regions, and section as a logical block.

How does Framer assign tags to text layers?

Framer's text styles documentation says that creating a text style automatically assigns a semantic tag such as h1, h2, p, or span. The visual properties of the style and the HTML role therefore belong to the same reusable style definition. The separate “Using text styles” guide says to create one from Assets, choose Text, and choose an appropriate heading level or paragraph type.

The same documentation describes a per-instance override. Select the specific text instance, open the Accessibility panel, and change its tag when the default semantic role does not fit the content. A heading level expresses the document hierarchy, so Framer's guidance starts with an h1 for the main title and uses h2 and h3 for supporting headings.

Text style: heading or paragraph type
Instance override: Accessibility panel

How do you assign a structural tag to a frame?

Framer's navigation and footer guide applies tags directly to frames. For a navigation area, select the layer containing the navigation links, open Accessibility in the Properties panel, then use the Tag dropdown and select nav. For a footer, select the layer serving as the footer and choose footer in the same control.

Properties panel > Accessibility > Tag > nav
Properties panel > Accessibility > Tag > footer

The guide describes the result as a navigation section or footer with meaningful structure for screen readers and search engines. The control belongs to the selected layer, so the layer's content and its assigned role should correspond.

Which tags fit page elements?

Framer's HTML tags guide gives the following roles. Use main for the page's primary content, excluding navigation or repetitive elements. Use article for a self-contained blog post, case study, or product description. Use aside for a sidebar, related links, or a callout that is separate from the main flow. Use section for a logical block such as services or feature highlights, and footer for secondary navigation, copyright information, or a sign-up form.

The same guide reserves button for actions such as submitting a form or toggling a menu, and describes nav as the wrapper for navigation links in headers, footers, or sidebars. A div remains a general container for styling or JavaScript functionality. These choices describe the content's function and structure, so a text size or visual treatment alone does not decide the tag.

Related terms

• Semantic HTML
• HTML heading structure
• ARIA and the accessibility tree
• Image alternative text

FAQ

Does changing a text style change the HTML tag?

Framer says text styles are automatically assigned semantic tags, and changes to a style are reflected wherever that style is used. A specific instance can be overridden through the Accessibility panel.

Where is the control for a navigation or footer tag?

Select the frame, open Accessibility in the Properties panel, and use the Tag dropdown. Framer's guide gives nav for navigation links and footer for the footer.

Should a large text layer always be a heading?

No. Choose a heading level when the text represents a heading in the page structure. Framer's guidance separates heading hierarchy from the visual presentation by recommending a clear h1, followed by h2 and h3 headings where appropriate.

Sources

1. Framer, "Guide to Framer SEO optimization features", 15 September 2026
2. Framer, "Text styles and semantic tags", 15 September 2026
3. Framer, "How to use semantic tags for navigation and footers", 15 September 2026
4. Framer, "Understanding HTML Tags", 15 September 2026

---

Check how a page reads to answer engines. Open the GEO score analyzer