Thymeleaf Tutorial: Chapter 11. Comments and Blocks

Table of contents

11 Comments and Blocks

11.1. Standard HTML / XML Comments

Standard HTML / XML comments <! - ... -> can be used anywhere in Thymeleaf templates. Anything inside these comments will not be processed by Thymeleaf and will be copied verbatim:

<!-- User info follows --> <div th:text="${...}"> ... </div> 

11.2. Thymeleaf parser-level comment blocks

Parser-level comments are sections of code that are simply removed from the template during parsing. Let's look at them:

 <!--/* This code will be removed at Thymeleaf parsing time! */--> 

Thymeleaf will delete everything between <! - / * and * / ->, so these comment blocks can also be used to display the code when the template is statically open, knowing that it will be deleted when Thymeleaf processes it:
')

 <!--/*--> <div> you can see me only before Thymeleaf processes me! </div> <!--*/--> 

This can be useful for prototyping tables with a large number of <tr>, for example:

 <table> <tr th:each="x : ${xs}"> ... </tr> <!--/*--> <tr> ... </tr> <tr> ... </tr> <!--*/--> </table> 

11.3. Comments Thymeleaf Prototyping Level

Thymeleaf allows you to define special comment blocks that are convenient when displaying a prototype design, but they are considered normal markup when the template is processed by Thymeleaf.

 <span>hello!</span> <!--/*/ <div th:text="${...}"> ... </div> /*/--> <span>goodbye!</span> 

Thymeleaf's parser will simply remove the <! - / * / and / * / -> markers, but not their contents, which will be left without comment. When processing the template output will see:

 <span>hello!</span> <div th:text="${...}"> ... </div> <span>goodbye!</span> 

As in the parser-level comment blocks, this function does not depend on the dialect.

11.4. Synthetic th: block tag

Thymeleaf's element processor (rather than the attribute processor) and included in Standard Dialects is the th: block .

th: block is a simple attribute container that allows template developers to specify which attributes they want. Thymeleaf will execute these attributes and then simply remove the block, but not its contents.

Thus, it can be useful, for example, when creating duplicate tables that require more than one <tr> for each element:

 <table> <th:block th:each="user : ${users}"> <tr> <td th:text="${user.login}">...</td> <td th:text="${user.name}">...</td> </tr> <tr> <td colspan="2" th:text="${user.address}">...</td> </tr> </th:block> </table> 

And it is especially useful when used in conjunction with comment blocks only for the prototype:

 <table> <!--/*/ <th:block th:each="user : ${users}"> /*/--> <tr> <td th:text="${user.login}">...</td> <td th:text="${user.name}">...</td> </tr> <tr> <td colspan="2" th:text="${user.address}">...</td> </tr> <!--/*/ </th:block> /*/--> </table> 

Notice how this solution allows templates to be valid HTML (no need to add forbidden <div> blocks inside <table>), and this continues to work fine when opened in browsers as prototypes!