In this quick article, we will 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 how to use 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. You can declare these custom data attributes on almost all HTML tags using the data- prefix. The user agent will completely ignore custom attributes prefixed with data-.

For instance, you may want to store extra information in 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 either use the default namespace th:* or 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 attributesdata-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 older Thymleaf version (2.1 and below), you have to 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't 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 don't want to use 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 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 quick article, we looked at different 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 @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.

👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, Buy me a coffee (cost $3) .

Need help to launch a new product? I am available for contract work. Hire me to accomplish your business goals with engineering and design.