The {% static %} Template Tag
Loading the static Template Tag
Before {% static %} can be used anywhere in a template, {% load static %} must appear near the top to make the tag available.
Example: Loading the static Template Tag
Before {% static %} can be used anywhere in a template, {% load static %} must appear near the top to make the tag available.
{% load static %}
<!DOCTYPE html>
<html>
<head></head>
</html>Linking a CSS File
{% static %} takes a path relative to a static/ directory and outputs the full URL, combining it with STATIC_URL automatically.
Example: Linking a CSS File
{% static %} takes a path relative to a static/ directory and outputs the full URL, combining it with STATIC_URL automatically.
{% load static %}
<link rel="stylesheet" href="{% static 'myapp/style.css' %}">Linking an Image
The same tag works for any static asset, not just CSS — images, JavaScript, and fonts all resolve the same way.
Example: Linking an Image
The same tag works for any static asset, not just CSS — images, JavaScript, and fonts all resolve the same way.
{% load static %}
<img src="{% static 'myapp/logo.png' %}" alt="Logo">- Forgetting {% load static %} at the top of the template before using {% static %}, causing a TemplateSyntaxError.
- Passing an absolute path like {% static '/style.css' %} instead of a path relative to a static/ directory.
- Hardcoding /static/style.css directly instead of using the tag, which breaks if STATIC_URL or a CDN prefix changes.
- {% load static %} must appear before any use of {% static %} in a template.
- {% static 'path/to/file' %} resolves to the correct URL using STATIC_URL automatically.
- Using the tag instead of hardcoded paths keeps templates working even if static file hosting changes.
- The path passed to {% static %} is relative to a static/ directory, not the filesystem root.
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: