Comments

Comments in Thymeleaf

Comments help you organize your templates and explain complex sections. Thymeleaf has special comment syntax that controls what users see in the browser.

Prototype Comments (Visible in Browser)

Standard HTML comments appear in the browser source. Thymeleaf keeps them by default.

<!-- This is a regular HTML comment -->
<p>This paragraph is visible.</p>
    

Users can see these comments in their browser's "View Source." Good for development notes, but you might not want them in production.

Prototype Comments (Hidden at Runtime)

Wrap comments in <!--/* ... */--> to hide them when Thymeleaf processes the template. They only appear in the static HTML file.

<!--/* This comment is only visible in the template file -->
<p>Users see this paragraph.</p>
<!--*/-->
    

Use these for notes about template logic that you don't want users to see.

Block Comments

Wrap entire sections in <!--/*--> ... <!--*/--> to comment out blocks. Thymeleaf removes them at runtime.

<!--/*-->
<div>
    <p>This entire block is commented out.</p>
    <p>It won't appear in the browser.</p>
</div>
<!--*/-->
    

Perfect for temporarily disabling sections while keeping the code in your template for future use.

When to Use Each Type

Choose the right comment type based on what you need.

<!-- Standard comment: visible to everyone -->
<p>Regular comment above this paragraph is visible.</p>

<!--/* Prototype comment: hidden at runtime -->
<p>This paragraph has a hidden comment above it.</p>

<!--/*-->
<p>This entire paragraph is commented out at runtime.</p>
<!--*/-->
    

Use standard HTML comments for public documentation. Use prototype comments for internal template notes. Use block comments to disable sections temporarily.

Comments in Practice

Here's a real template using different comment styles.

<div class="content">
    <!--/* TODO: Add navigation menu here -->
    <section class="hero">
        <h1 th:text="${title}">Title</h1>
    </section>

    <!--/*-->
    <section class="debug-info">
        <p>User ID: ${user.id}</p>
        <p>Session: ${session.id}</p>
    </section>
    <!--*/-->
</div>
    

The TODO comment is hidden at runtime. The debug section is completely removed. Clean templates, clean output.