# How to use Custom HTML5 Attributes in Thymeleaf

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jan 21, 2020, updated Oct 8, 2022. Topics: Thymeleaf.
Canonical URL: https://attacomsian.com/blog/thymeleaf-custom-html-attributes

> A quick guide to learning how to create HTML5 custom attributes using the Thymeleaf template engine.

In this article, we shall look at **how to create HTML5 custom attributes** (`data-*`) using the Thymeleaf template engine. Thymeleaf is a widely used server-side template engine for Java-based web applications. It also provides excellent support for integration with Spring Boot. To learn more about using Thymeleaf with Spring Boot, check out [this guide](https://attacomsian.com/blog/spring-boot-thymeleaf-example).

## HTML5 Custom Attributes

HTML5 custom attributes, also called **data attributes**, are very useful for sharing extra information to do some processing on the client side. Custom data attributes can be declared on almost all HTML tags using the `data-` prefix. The user agent will ignore custom attributes prefixed with `data-`.

For instance, you may want to **store extra information in the HTML form's submit button** tag so that you can use it while submitting the form using asynchronous AJAX request as shown below:

```markup
<button type="submit" data-id="21" data-logged-in="false">Submit Request</button>
```

A `data-*` attribute consists of two parts:

1. The attribute name must **not contain** any uppercase letters and should be at **least one character long** after the prefix "data-" (e.g. `data-age`, `data-time`).
2. The attribute value can be any string (e.g. `data-name`, `data-id`, `data-cookie-token`).

Now, let us look at the below examples that explain how you can create these attributes using the default dialect in Thymeleaf.

## Using Custom HTML5 Attributes in Thymeleaf

There are multiple ways to define custom HTML5 attributes in Thymeleaf. You can use the default namespace `th:*` or the HTML5-friendly namespace `data-th-*` for this purpose.

### 1. Using `th:data-*` Attribute

Thymeleaf 3.0 comes with [default attribute processor](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-the-value-of-any-attribute-default-attribute-processor) that allows us to **set the value of any attribute** including data attributes, without worrying about its `th:*` processor at the Standard Dialect.

So something like below:

```markup
<span th:anything="${user.name}">Welcome John!</span>
```

Will results in:

```markup
<span anything="John Doe">Welcome John!</span>
```

Similarly, you can also set any custom `data-*` attribute value. Let us say we have the following model class named `User.java`:

```java
public class Todo implements Serializable {

    private long id;
    private String title;
    private Date created;

    // constructor, getters, and setters removed for brevity
}
```

Now suppose you want to **add three data attributes** &mdash; `data-id`, `data-title`, and `data-date` &mdash; to a `div` element, you have to do the following:

```markup
<div th:data-id="${todo.id}" th:data-title="${todo.title}" 
     th:data-date="${#dates.format(todo.created, 'EEE, MMMM dd, yyyy HH:mm')}">Preview</div>
```

The **rendered HTML** for the above example should look like the following:

```markup
<div data-id="12" data-title="Buy milk" data-date="Mon, January 20, 2020 12:35">Preview</div>
```

### 2. Using `th:attr` Attribute

If you are using the **older Thymleaf version** (2.1 and below), you must use the `th:attr` attribute to set values for HTML5 custom attributes. 

Here is  an example that demonstrates how you can set the above HTML5 data attributes using `th:attr`:

```markup
<div th:attr="data-id=${todo.id},data-title=${todo.title},data-date=${#dates.format(todo.created, 'EEE, MMMM dd, yyyy HH:mm')}">
    Preview
</div>
```

The **rendered HTML** should be identical to the above example:

```markup
<div data-id="12" data-title="Buy milk" data-date="Mon, January 21, 2020 12:35">Preview</div>
```

According to W3C specifications, you **can not set an attribute multiple times** in one HTML tag. So you can not have more than one `th:attr` in the same HTML element. 

If you want to **set multiple custom data attribute** in a single HTML tag, you must add them into the same `th:attr` attribute separated by a comma, as shown in the above example.

### 3. Using HTML5-friendly `data-th-*` Attribute

If you do not like the default `th` namespace, you can also use [HTML5-friendly attribute and element names](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-names) like `data-{prefix}-{name}`. 

This syntax is more HTML5-friendly as it is very much close to the way of defining custom attributes in HTML5. 

The following example shows how you can use the `data-th-*` syntax to define custom HTML5 data attributes:

```markup
<div data-th-id="${todo.id}" data-th-title="${todo.title}"
     data-th-created="${#dates.format(todo.created, 'EEE, MMMM dd, yyyy HH:mm')}"></div>
```

Thymeleaf engine will render the following **HTML output** for the above statement:

```markup
<div id="15" title="finish reading book" created="Tue, January 21, 2020 11:38"></div>
```

## Conclusion

In this brief article, we have looked at various ways to add HTML5 custom attributes to the HTML element using the Thymeleaf template engine. You can choose from `th:data-*` (works only in the latest Thymeleaf version), `th:attr`, and `data-th-*` attributes to set the value of any custom data attribute.

Thymeleaf is a very flexible template engine. It supports many common HTML attributes and allows us to define our own custom HTML attributes.

**Read Next:** [How to use Thymeleaf with Spring Boot](https://attacomsian.com/blog/spring-boot-thymeleaf-example)