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">
Note: Data Attributes are an advanced feature and require knowledge of HTML
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).
- Open the Advanced tab
- Click Data attributes
- Click the Add attribute button
- Type in the attribute name you would like to add
- Add the value for the attribute
- 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