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:
Select the component you want to change the tag for
Click on the “Properties” tab in the top left
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.