Thymeleaf - Unescaped text does not respect HTML structure

Question

I want to display a description formatted in HTML, directly in a card (see below). However Thymeleaf utext attribute does not respect my HTML structure.

I removed all CSS classes for better visibility.

Here is how I defined my structure with Thymeleaf:

<div id="subject-card" th:each="subject: ${subjects}">
   <a th:href="'./subject/' + ${subject.id}">
      <div id="card-header">
         <p id="title" th:text="${subject.name}"></p>
         <div id="subject-info">
            <p id="subject-state" th:text="${subject.state}"></p>
            <p id="is-subject-confidential" th:if="${sujet.confidential}" th:text="Confidential"></p>
         </div>
      </div>

      <div id="description">
         <th:block th:utext="${subject.description}"></th:block>
      </div>

      <p id="owner" th:if="${subject.owner != null}" th:text="${'Owner: ' + subject.owner.firstname+ ' ' + subject.owner.lastname}"></p>
   </a>
</div>

The subject.description element looks like this:

<p>Text1...</p>
<p>Text2a... <a href="URL">Website to visit</a> Text2b...</p>
<p>Text3...</p>
<p>Text4...</p>
<p>Text5...</p>
<p>Text6...</p>

Expected result for subject n°X:

<div id="subject-card">
   <a href="./subject/X">
      <div id="card-header">
         <p id="title">Subject Name</p>
         <div id="subject-info">
            <p id="subject-state">Subject state</p>
            <p id="is-subject-confidential">Confidential</p>
         </div>
      </div>

      <div id="description">
         <p>Text1...</p>
         <p>Text2a... <a href="URL">Website to visit</a> Text2b...</p>
         <p>Text3...</p>
         <p>Text4...</p>
         <p>Text5...</p>
         <p>Text6...</p>
      </div>

      <p id="owner">Bob Smith</p>
   </a>
</div>

Actual result:

<div id="subject-card">
   <a href="./subject/X">
      <div id="card-header">
         <p id="title">Subject Name</p>
         <div id="subject-info">
            <p id="subject-state">Subject state</p>
            <p id="is-subject-confidential">Confidential</p>
         </div>
      </div>
   </a>

   <div id="description">
      <a href="./subject/X">
         <p>Text1...</p>
      </a>
      <p>
         <a href="./subject/X">
            Text2a... 
         </a>
         <a href="URL">Website to visit</a>
         Text2b...
      </p>
      <p>Text3...</p>
      <p>Text4...</p>
      <p>Text5...</p>
      <p>Text6...</p>
   </div>

   <p id="owner">Bob Smith</p>
</div>

How can I fix this ?