# How to construct URLs in Thymeleaf

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jan 22, 2020, updated Oct 8, 2022. Topics: Thymeleaf.
Canonical URL: https://attacomsian.com/blog/thymeleaf-construct-urls

> A quick tutorial to learn how to construct different kinds of URLs in Thymeleaf templates.

In this article, you'll **learn how to construct different kinds of URLs** in Thymeleaf templates. [Thymeleaf](https://attacomsian.com/blog/spring-boot-thymeleaf-example) is a popular server-side template engine for Java-based web and standalone environments.

Thymeleaf provides a so-called **link expression** (`@{...}`) to easily create static and dynamic URLs. The following examples explain how you can use this expression for different cases.

## Absolute URLs

**Absolute** URLs are usually the ones that are **pointed to other servers**. These links start with the protocol name: `http://` or `https://`. Unless you have an *URL Rewriting* filter configured on your server, these URLs will not be changed by the Thymeleaf template engine.

Here is an example:

```markup
<a th:href="@{https://attacomsian.com/about}">About Me</a>
```

The rendered HTML should look like the below:

```markup
<a href="https://attacomsian.com/about">About Me</a>
```

## Context-Relative URLs

**Context-relative** is the most used URL format in web applications. Such URLs are **relative** to the web application root context configured on the server. For example, if your Spring Boot application is configured to use the `webapp` context path by setting the `server.contextPath=/webapp` property in the `application.properties` or `application.yml` file, the `webapp` will be the *context name*.

Context-relative URLs **don't specify any protocol or host** name. Instead, they simply start with `/` &mdash; relative to the current root directory:

```markup
<a th:href="@{/blog/what-is-thymeleaf}">What is Thymeleaf?</a>
```

For a web application that is **configured to use `webapp` as a context name**, the rendered HTML will look like the following:

```markup
<a href="/webapp/blog/what-is-thymeleaf">What is Thymeleaf?</a>
```

**Without any context path configuration**, the output will be the following:

```markup
<a href="/blog/what-is-thymeleaf">What is Thymeleaf?</a>
```

## Server-Relative URLs

**Server-relative** URLs are very similar to Context-relative URLs except that they are **not linked to any resource** in your application's configured context. This allows you to **link to a different context** in the same server.

Here is an example:

```markup
<a th:href="@{~/topic/thymeleaf}">Thymeleaf 101</a>
```

Regardless of what your application context is, the Thymeleaf engine will ignore it and always render the following output:

```markup
<a href="topic/thymeleaf">Thymeleaf 101</a>
```

## Protocol-Relative URLs

**Protocol-relative** URLs are like absolute URLs without any protocol (`http://` or `https://`). They are **commonly used for including static resources** like JavaScript files, stylesheets, and images and directly point to an absolute path in the filesystem. 

The following examples use the Protocol-relative URL format to include static resources:

```markup
<script th:src="@{//example.com/js/script.js}"></script>
<link th:href="@{//example.com/css/styles.css}" rel="stylesheet">
```

Here is what the output looks like:

```markup
<script src="//example.com/js/script.js"></script>
<link href="//example.com/css/styles.css" rel="stylesheet">
```

## URLs With Parameters

To add **query parameters** to a URL, you have to **specify them using parenthesis** `()` after the URI path as shown below:

```markup
<a th:href="@{https://www.google.com/search(q='thymeleaf')}">Search Thymeleaf</a>
```

The above statement will produce the following HTML output:

```markup
<a href="https://www.google.com/search?q=thymeleaf">Search Thymeleaf</a>
```

The Thymeleaf engine will automatically escape any special character used in the URL. To add **multiple query parameters**, separate them with commas as shown below:

```markup
<a th:href="@{https://www.google.com/search(q='thymeleaf',num=12,lang=en)}">Search Thymeleaf</a>
```

Here is the HTML output now:

```markup
<a href="https://www.google.com/search?q=thymeleaf&amp;num=12&amp;lang=en">Search Thymeleaf</a>
```

## URL Fragment Identifiers

**Fragment identifiers** can be included in URLs, both with and without parameters, and in rendered HTML, they will always be included at the URL base.

For example, the following code snippet:

```markup
<a th:href="@{/blog#show-all(q='thymeleaf')}">Thymeleaf Tutorials</a>
```

Will render the following HTML:

```markup
<a href="/blog?q=thymeleaf#show-all">Thymeleaf Tutorials</a>
```

## Using Expressions in URLs

Thymeleaf also supports **expressions** to build sophisticated URLs with dynamic parameters. In the following example, we use expressions to specify the values of query string parameters:

```markup
<a th:href="@{/posts/preview(id=${post.id})}">View Post</a>
```

If `${post.id}` evaluates to `15`, the rendered HTML will be the following:

```markup
<a href="/posts/preview?id=15">View Post</a>
```

## URLs with Path Variables

Thymeleaf also allows you to use **path variables** to construct dynamic URLs. Path variables are typically used to pass a value as part of the URL. In the Spring Boot controller, you can retrieve these values using the [@PathVariable](https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/bind/annotation/PathVariable.html) annotation.

Here is an example that shows how you can pass a path variable in the URL:

```markup
<a th:href="@{/posts/{id}/preview(id=${post.id})}">View Post</a>
```

The rendered HTML will look like the following:

```markup
<a href="/posts/15/preview">View Post</a>
```

Let us look at another example with **multiple path variables** in a URL:

```markup
<a th:href="@{/{username}/posts/{id}/preview/(username=${post.user.handle},id=${post.id})}">View Post</a>
```

Here is the output of the above example:

```markup
<a href="/attacomsian/posts/15/preview">View Post</a>
```

## Conclusion

That's it for constructing URLs in Thymeleaf. We have covered several ways to create different kinds of URLs using the Thymeleaf template engine.

Thymeleaf is a highly flexible server-side template engine that provides link expression as part of the standard dialects to build complex URLs with dynamic parameters.

**Read Next:** [How to use Thymeleaf in Spring Boot](https://attacomsian.com/blog/spring-boot-thymeleaf-example)