Custom Attributes

What are Custom Attributes?

Custom Attributes (also known as Data Attributes) are additional fields placed within HTML elements and used to store various types of data. These attributes can be accessed via scripts written in code, allowing developers to control visual logic on a website.

Custom attributes are useful in projects where you need to:

  • Pass data into JavaScript scripts
  • Customize the behavior of elements (e.g., data filters, ARIA labels, etc.)
  • Control animations, sliders, pop-ups, and timers
  • Filter and sort content
  • Integrate with external libraries and services
  • Improve SEO and accessibility (for example, using ARIA attributes)

Example:

Suppose you need to create a cost calculator for a website development project. The user will select the type of website (Landing Page or Multi-page Site) and the type of service (Design and/or Layout).

  1. You need to build the calculator and assign a specific attribute and value to each option.
  2. Then, using code, you can access the necessary attributes and define the logic for calculating the price.

Other examples of use include:

  • Quizzes
  • Sliders
  • Timers

How to Add a Custom Attribute

In Taptop, you can add custom attributes to elements directly in the visual editor — for each selected element on the canvas.

  1. Select the desired element on the canvas or in the layers panel, then go to Settings on the right-hand panel.
  2. Find the Custom Attributes section and click the “+” button to add a new attribute.

  1. Enter the attribute name in the Name field (this is required).

  • Allowed characters: Latin letters, digits, “_”, and “-”.
  • The name must start with a letter.

Examples: data-filter, aria-label, disabled.

Important: You cannot use the following types of attributes:

  • attributes already editable in the settings of corresponding widgets or in the style panel соответствующих виджетов или на панели стилей
  • system attributes: id, action, method, data-do
  • event handlers: onclick, onmouseover, etc.;
  • internally reserved prefixes: mosaic*, taptop*, tt *.

  1. Enter a Value (optional). In some cases, attributes work without a value — for example, autofocus or disabled.

5. Click Add Attribute.

Done! The attribute has been added to the element.

Управление атрибутами

  • Чтобы отредактировать атрибут, просто кликните по нему в списке.
  • Чтобы удалить атрибут, нажмите на кнопку «–» рядом с ним.

Usage Examples

Example 1: Accessibility Control (Screen Reader Access)

Goal: Improve website accessibility for users with visual impairments.

Solution: Add ARIA attributes.

How to set it up:

  1. Select the element — for example, an icon or a button without visible text.
  2. Add an attribute:
  • Name: aria-label
  • Value: Open menu


A screen reader will be able to read the purpose of the button, even if it's not visible on the screen.

Example 2: Autofocus on Input Field When Page Loads

Goal: Automatically set focus on a form field right after the page loads.

Solution: Use the autofocus attribute.

How to set it up:

  1. Select the input field.
  2. Add an attribute:
  • Name: autofocus
  • Value: leave it empty

When the page loads, the cursor will automatically be placed in this field.

Advantages of Custom Attributes

  • Custom attributes offer powerful functionality for managing visual logic on a website.
  • They make it significantly easier for developers to write custom functionality and modify features for their projects.