How to use semantic tags for navigation and footers
Learn how to apply semantic HTML tags to navigation bars and footers in Framer to improve accessibility and site structure.
Semantic HTML tags help search engines and assistive technologies better understand your content. In Framer, you can apply these tags directly to frames to create a more accessible and well-structured website.
Applying the nav tag
Use the nav tag to identify sections that contain primary navigation links.
Select the layer that contains your navigation links.
In the Properties panel, open the “Accessibility” section.
Click the “Tag” dropdown and select nav.
This designates the selected frame as a navigation section, improving clarity for screen readers and search engines.
Applying the footer tag
Use the footer tag to mark the footer section of your page.
Select the layer that serves as your footer.
In the Properties panel, open the “Accessibility” section.
Click the “Tag” dropdown and select footer.
This marks the frame as a footer, adding meaningful structure to your page.
Using semantic tags improves accessibility and SEO by making it easier for assistive technologies and search engines to interpret your site’s layout and purpose.
Updated