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.

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:

<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 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:

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

Will results in:

<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:

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 — data-id, data-title, and data-date — to a div element, you have to do the following:

<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:

<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:

<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:

<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 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:

<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:

<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

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.