Skip to main content

Add Multiple Values to an Attribute

Element attributes are properties that you can add to an element, such as a section or table. There are many different attributes you can use, and you add them in the Element attributes panel (see Style with Attributes). When you add an element attribute, you also have to set its value. Typically, they have one value, but you can add multiple values when needed.

For example, if you want to use the role attribute to assign a class name to a section and also make it collapsible, you would need to add two values. In this case, "accordion" to make it collapsible and then another value for the class name.

To add multiple values:

  1. Use the Element attributes panel to add an attribute to an element.

  2. Enter the values in the field next to the attribute. Separate the values like this:

    • Use a semi-colon to separate values. For example, here, the role attribute is given two role values: accordion and subsection. A semi-colon is used to separate the values.

      role="accordion;subsection;"
      Role attribute has the value: accordion;subsection;

    • Use a colon to separate "keys" from values. "Keys" are properties that can have values. They are only suitable for certain attributes, such as the style attribute that you can give to a table element. For example:

      style="border-style:solid 2px;border-color:blue;"
      style attribute has the value: border-style:solid 2px;border-color:blue;

      Here, the attribute is style. The first key is border-style and it is separated from its value (solid 2px) by a colon (:). The second key is border-color and it is separated from its value (blue) by a colon (:). Each key and value pair is separated from the next by a semi-colon (;).

  3. Select Save. Save icon.

Note

Some attributes allow the space character as a separator. For example, if you add a role attribute and set its value to "specifications table", it will get two class names in HTML when it is published. In the HTML, it will appear as class="specifications table" which means "specifications" is a class and "table" is a different class.

For this reason, it is best practice to avoid using spaces inside a value that you want to become one class. For example, use "specifications-table" as this will be one class, rather than "specifications table" which will be two classes.