All Collections
The Design Editor
HTML tags in Vev (Beta)
HTML tags in Vev (Beta)
Help people using screen readers to better understand your content
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

HTML tags are currently in Beta as part of the Custom attributes feature and can be accessed by following these steps:

  1. From the Dashboard, click on your user name at the bottom of the left panel, or click this link to get there

  2. Navigate to the bottom-right of your profile page and find "Experimental features"

  3. Toggle on Custom attributes to turn the feature on for your user

Note: Features in beta are still being actively worked on, so you might experience unexpected behaviors or errors when using them. If you ever come across this, please send our friendly Support team a message so we can improve the feature. Just click the chat bubble in the bottom-right corner of your screen to send feedback.

In the world of accessibility, semantic HTML structure is essential for ensuring that both search engines and people using screen readers are able to understand the hierarchy of your content. To achieve this you need to use the HTML tags in the way it is intended.

HTML tags are a standardized way to structure content on the web. When working in Vev, all components always have an HTML tag attached to them. However, you can change this tag if you need to use another one.

How to change an HTML tag in Vev:

  1. Select the component you want to change the tag for

  2. Click on the “Properties” tab in the top left

  3. In the HTML dropdown, select the HTML tag you need

In Vev, we currently have the following tags:

  • div: A section of the page or a container of elements

  • button: A button you can click

  • article: Independent content, like a blog post

  • aside: Content that is indirectly related to the surrounding content, like a sidebar

  • figure: Self-contained content, like illustrations or diagrams

  • figcaption: Caption for a figure element

  • main: Main content of the page

    • Important: Make sure you never use more than one main tag per page

  • nav: A set of navigation links

If you find that the tags do not give enough information about a component for it to be easy to understand, you can add a Custom attribute to provide further details.

➡️ Check our these best practice tips for more ways to improve your Vev site's accessibility.

Did this answer your question?