Using the correct HTML tags in Vev is essential for both accessibility and SEO. Semantic HTML structure helps search engines understand your content hierarchy and allows people using screen readers to navigate your content effectively.
In Vev, every component automatically has an HTML tag assigned to it. You can change this tag to ensure that the structure of your page is clear and meaningful.
How to change an HTML tag in Vev:
Select the element you want to change the tag for
Click on the “Properties” tab at the top right
In the HTML dropdown, select the HTML tag you need
Available HTML Tags in Vev
Vev supports a set of common HTML tags. Below are the tags you can use, along with when to use each one:
<div>— A general container for grouping elements.<button>— An interactive button that users can click.<article>— A standalone piece of content, such as a blog post or news article.<aside>— Content that is indirectly related to the main content, such as a sidebar.<figure>— A self-contained piece of content, such as an image, illustration, or diagram.<figcaption>— A caption that describes a figure element.<main>— The primary content of the page.⚠️ Important: Use only one
<main>tag per page.
<nav>— A section of navigation links.<form>— A container for interactive form elements (e.g., input fields, checkboxes).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.
Using Custom Attributes with HTML Tags
If the available HTML tags are not descriptive enough, you can add Custom Attributes to provide more context. Custom attributes improve clarity for both accessibility tools and developers.
Best Practices for HTML Tags in Vev
When working with HTML tags in Vev, follow these guidelines:
Use semantic HTML whenever possible (e.g.,
<article>for blog posts,<nav>for menus).Avoid misusing tags for styling purposes; instead, style elements using CSS or Vev’s design tools.
Maintain a clear hierarchy by using headings (H1, H2, H3) consistently.
Ensure only one
<main>tag exists per page.Add custom attributes when native tags are not descriptive enough.