HTML tags in Vev

Help people using screen readers to better understand your content

Diego Muralles avatar
Written by Diego Muralles
Updated this week

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?