Structuring content with semantic tags
In this Framer tutorial, you will learn Structuring content with semantic tags. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
What are semantic tags and why are they important for my Framer site?
Semantic tags are bits of code that tell the browser what a piece of content is, not just how it looks. For example, instead of just making text big and bold, a semantic tag specifies that the text is a heading or a paragraph. These tags help search engines and screen readers understand the structure of your content without needing to see the design, making your site more accessible and easier to find.
How do I properly structure headings and text in Framer for accessibility and SEO?
In Framer, you can assign semantic tags to any text by applying a text style in the properties panel. If you’re not using a text style, you can scroll down to the accessibility section of the properties panel and choose the appropriate tag. Each page should have one H1 (the main page title), H2s for section headers, and H3s for subsections. Make sure body copy is tagged as a paragraph (P tag) so browsers, screen readers, and search engines recognize it as core content.
How can I use semantic frame tags in Framer to organize my page layout?
To assign a semantic tag in Framer, select the frame and navigate to the Accessibility panel in the properties panel on the right. In the “Tags” dropdown, you can choose from options like header, main, section, and footer. The header is typically for your logo and navigation, main contains the unique, core content of the page, section effectively organizes main content into related topics, and footer is for secondary information like copyright details or social links. Assigning these appropriate tags helps screen readers and search engines properly understand your page’s high-level organization and structure.
Lesson details
