Adding Data Attributes to elements on your website

In this support article, we will provide an overview of HTML data-attributes and explain how to use them to improve your website's accessibility and SEO. We will delve into the details of ARIA attributes for accessibility and discuss SEO-related attributes, with links to reputable resources for further information.

What are HMTL attributes?

HTML attributes are additional pieces of information that can be added to HTML elements to provide extra functionality or context. They are specified within an element's opening tag and consist of a name-value pair, such as <tag attribute="value">

When to use HTML attributes

There are many use cases for HTML attributes, including: 

• Enhancing accessibility by providing contextual information for screen readers 
• Improving SEO by supplying metadata to search engines 
• Customizing the appearance or behavior of an element

How to add attributes

Pagecloud's Edit Menu makes it easy to add attributes to your website elements. To add an attribute using the Edit Menu, follow these steps:

Select the object you would like to add an attribute to (an object can include an entire section or column). 

1. Open the Advanced tab
2. Click Data attributes
3. Click the Add attribute button
4. Type in the attribute name you would like to add 
5. Add the value for the attribute 
6. Save your page

Attributes for accessibility 

HTML attributes can significantly improve your website's accessibility for users with disabilities. The Accessible Rich Internet Applications (ARIA) specification defines a set of attributes that provide additional information about an element's role, state, and properties to assistive technologies like screen readers.

Some common ARIA attributes include:

• aria-labelledby: Associates an element with a label, which can be read by screen readers

• aria-describedby: Describes an element using a related element's content

• aria-hidden: Indicates whether an element should be hidden from assistive technologies

We pre-fills all ARIA tags mentioned in this article on your website so you don't have to.

Attributes for SEO

SEO-related attributes help search engines better understand your website's content, which can lead to improved search rankings. Some common SEO-related attributes include:

• title: Describes the content of a link, which can be used by search engines to determine its relevance

• meta: Provides metadata about your webpage, such as description, keywords, and authorship

• alt: Supplies alternative text for images, making your website more accessible and improving image search rankings