리터럴만 있을때 |...| 와 @{...}를 사용하는 이유가 뭔가요?

안녕하세요.

앞 부분 질문과 겹치는 감이 있지만

조금은 다른 질문일지도 몰라 질문드려봅니다. 

타임리프 템플릿을 거쳤을 때

최종적으로 우리가 원하는 HTML이 나온다면

타임리프가 해야할 일은 모두 완료하는 거잖아요?

<button class="w-100 btn btn-secondary btn-lg"

onclick="location.href='items.html'"

type="button"> 목록으로 </button>

이 부분이 최종적으로 

<button class="w-100 btn btn-secondary btn-lg"

onclick="location.href='/basic/items'"

type="button"> 목록으로 </button>

이렇게 변하길 원하는 거잖아요?

그럼

<button class="w-100 btn btn-secondary btn-lg"

onclick="location.href='/basic/items'"

th:onclick="Location.href='/basic/items'"

type="button"> 목록으로 </button>

이렇게만 해줘도 되는데

리터럴과 표현식의 덧샘이 필요없는 곳에서

th:onclick="|Location.href='@{/basic/items}'|"

이렇게 |...| 과 @{...}를 사용하신 이유가 무엇인가요?