How to Create Links in Jinja Templates

Creating a hyperlink in Jinja means using the url_for() function inside an anchor tag, which generates the correct URL path for you automatically

Jinja is a templating language that works with Python web frameworks like Flask. When you write HTML in a Jinja template, you can't just hardcode URLs the way you would in a plain HTML file — your application's routes might change, or you might deploy to a different server. The url_for() function solves this by looking up the actual URL based on the function name you give it, then inserting that URL into your link.

The basic pattern is simple: instead of writing <a href="/about">About</a>, you write <a href="{{ url_for('about') }}">About</a>. The double curly braces tell Jinja to evaluate the code inside, and url_for() returns the correct path. This keeps your links working even if you change your routes later.

Key Takeaways

Use url_for() inside double curly braces in your Jinja template to generate links automatically based on your Flask function names.
The function name you pass to url_for() must match the name of the Python function that handles that route, not the URL path itself.
You can pass variables to url_for() to create dynamic links, such as url_for('product', id=5) to link to a specific product page.
url_for() works with static files too — use url_for('static', filename='style.css') to link to CSS, images, or JavaScript files.

The Basic Syntax for url_for()

In your Flask application, you define routes by decorating Python functions with @app.route(). Each function has a name — that name is what you pass to url_for(). For example, if your Flask code looks like this:

@app.route('/about') def about(): return render_template('about.html')

Then in your Jinja template, you write <a href="{{ url_for('about') }}">About Us</a>. The function name is 'about', not the path '/about'. This distinction matters because you can change the path later without touching your templates.

The url_for() function returns a string containing the full URL path. Jinja inserts that string into the href attribute. When a user clicks the link, their browser goes to the URL that url_for() generated.

Passing Variables to Create Dynamic Links

Many routes accept variables in the URL path. If you have a route like @app.route('/product/<int:id>'), you need to pass the id value to url_for() so it can build the complete URL. You do this by adding keyword arguments after the function name.

For a product page, you might write <a href="{{ url_for('product', id=5) }}">Product 5</a>. The url_for() function takes the function name 'product' and the variable id=5, then generates the correct path like /product/5. If you have a variable in your template — say, a product object with an id attribute — you can pass it directly: <a href="{{ url_for('product', id=product.id) }}">{{ product.name }}</a>.

You can pass multiple variables the same way. A route like @app.route('/user/<username>/post/<int:post_id>') would use {{ url_for('user_post', username='alice', post_id=42) }} in your template.

Linking to Static Files Like CSS and Images

Static files — CSS stylesheets, images, JavaScript files — live in a folder called 'static' in your Flask project. You link to them using url_for() with the special function name 'static' and a filename parameter. For a CSS file, write <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">. For an image, write <img src="{{ url_for('static', filename='logo.png') }}" alt="Logo">.

The filename path is relative to your static folder. If your image is in a subfolder like static/images/logo.png, you write filename='images/logo.png'. Using url_for() for static files means Flask can serve them correctly whether you're running locally or on a production server.

Using url_for() with Query Parameters

Sometimes you need to add query parameters to a URL — the part after the question mark, like ?page=2 or ?sort=name. You pass these as keyword arguments to url_for(), and it automatically adds them to the end of the URL. For example, {{ url_for('search', q='python', page=2) }} generates a URL like /search?q=python&page=2.

This is useful for pagination, filtering, or sorting. If you have a list of products and want a link to the next page, you might write <a href="{{ url_for('products', page=current_page + 1) }}">Next</a>. The url_for() function handles encoding the parameters correctly so special characters don't break the URL.

Common Mistakes and How to Fix Them

The most common mistake is passing the URL path instead of the function name. If your route is @app.route('/about'), you write url_for('about'), not url_for('/about'). The function name is what matters, not the path.

Another mistake is forgetting the double curly braces. Writing <a href="url_for('about')"> without the braces tells Jinja to treat it as plain text, so your link will literally say href="url_for('about')" instead of generating a URL. Always use {{ }} to evaluate Jinja code.

If url_for() throws an error saying it can't find a function, check that the function name matches exactly. Function names are case-sensitive, and they must be the actual Python function name, not a label or description you made up.

Frequently Asked Questions

What happens if I change my route path after I've used url_for() in my templates?

Your links keep working. Since url_for() looks up the URL based on the function name, not a hardcoded path, changing the route path updates all your links automatically. This is the main reason to use url_for() instead of writing URLs by hand.

Can I use url_for() to link to pages outside my Flask application?

No. url_for() only generates URLs for routes defined in your Flask app. To link to an external website, write the full URL directly in the href attribute, like <a href="https://example.com">External Site</a>.

Do I need to import url_for() in my template file?

No. Flask makes url_for() available automatically in all Jinja templates. You can use it without any import statement. It's built into the template context that Flask provides.

What's the difference between url_for() with a function name and url_for() with 'static'?

The 'static' function name is a special built-in route that Flask provides for serving static files. Regular function names are routes you define with @app.route(). Both work the same way inside url_for() — you pass the function name and any variables, and url_for() returns the correct URL.

Can I use url_for() inside JavaScript code in my template?

Yes. You can use url_for() anywhere inside your template, including inside <script> tags. For example, <script> var apiUrl = "{{ url_for('api_endpoint') }}"; </script> works fine. Jinja evaluates the code before sending the HTML to the browser.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.