Linking Static Files in Templates
Loading the static Template Tag
Before using {% static %}, a template must load the static tag library with {% load static %}, typically at the very top of the file.
Warning: Forgetting {% load static %} causes a TemplateSyntaxError: static is not a registered tag.
Example: Loading the static Template Tag
{% load static %} makes the {% static %} tag available for the rest of this template.
<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>Linking a CSS File
{% static path %} resolves to the correct URL for a file inside any app's static/ folder, combined with STATIC_URL.
Example: Linking a CSS File
This renders as href="/static/core/css/style.css" (or wherever STATIC_URL points), instead of a hardcoded path.
{% load static %}
<link rel="stylesheet" href="{% static 'core/css/style.css' %}">Linking an Image with static
The same {% static %} tag works for any static asset, including images referenced in <img> tags.
Example: Linking an Image with static
The logo's URL is generated dynamically, so it stays correct even if STATIC_URL changes for production.
{% load static %}
<img src="{% static 'core/images/logo.png' %}" alt="Site logo">- Hardcoding a static file path like '/static/style.css' instead of using {% static %}, which breaks once STATIC_URL or deployment paths change.
- Forgetting {% load static %} at the top of the template before using the {% static %} tag anywhere in it.
- Putting quotes incorrectly around the path, e.g. {% static css/style.css %} without quotes, which raises a TemplateSyntaxError.
- {% load static %} must appear before any use of {% static %} in a template.
- {% static 'path/to/file' %} generates the correct URL for a static asset based on STATIC_URL.
- Using {% static %} instead of hardcoded paths keeps templates correct across development and production.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: