Text styles and semantic tags

Search

Text styles and semantic tags

In Framer, when you create text styles, they are automatically given semantic tags like h1, h2, h3, h4, h5, h6, p, or span.

While these tags are automatically assigned, you can override them for specific instances using the Accessibility panel. This allows you to customize the semantic structure of your site according to your requirements.

It's best to use a clear heading structure. Begin with an h1 title, then organize the content with h2 and h3 headings. This enhances usability, prevents large text blocks, and aids search engines in understanding content hierarchy and significance.

A well-structured content layout boosts SEO and accessibility. Subheadings and headings enhance readability for users with visual impairments and cognitive disabilities. They also improve the experience for website visitors using screen readers, allowing swift navigation and easy access to information.