Template tags (if, for, block, extends) in Django

Introduction

Template tags help you control what shows on a webpage by adding logic inside HTML. They let you repeat parts, check conditions, and organize templates.

Show different messages based on user login status.

Display a list of items like blog posts or products.

Create a base page layout and reuse it for many pages.

Change parts of a page depending on data values.

Loop through data to build tables or menus.

Syntax

Django

{% if condition %}
  ...
{% elif other_condition %}
  ...
{% else %}
  ...
{% endif %}

{% for item in list %}
  ...
{% empty %}
  ...
{% endfor %}

{% block block_name %}
  ...
{% endblock %}

{% extends "base.html" %}

Template tags are inside {% and %} and control logic or structure.

Use {% endtag %} to close tags like if, for, and block.

Examples

Shows a welcome message if the user is logged in, otherwise asks to log in.

Django

{% if user.is_authenticated %}
  <p>Welcome back!</p>
{% else %}
  <p>Please log in.</p>
{% endif %}

Loops over products to list them. Shows a message if the list is empty.

Django

{% for product in products %}
  <li>{{ product.name }}</li>
{% empty %}
  <li>No products found.</li>
{% endfor %}

Defines a block named 'content' that child templates can replace.

Django

{% block content %}
  <h1>Page Title</h1>
  <p>Page content here.</p>
{% endblock %}

Uses the base.html template as a starting point to build the current page.

Django

{% extends "base.html" %}

Sample Program

This template extends a base layout. It shows a list of products or a message if none exist. It also shows a message depending on whether the user is staff or not.

Django

{% extends "base.html" %}

{% block content %}
  <h2>Products</h2>
  <ul>
  {% for product in products %}
    <li>{{ product.name }} - ${{ product.price }}</li>
  {% empty %}
    <li>No products available.</li>
  {% endfor %}
  </ul>

  {% if user.is_staff %}
    <p>You have admin access.</p>
  {% else %}
    <p>Welcome, customer!</p>
  {% endif %}
{% endblock %}

Important Notes

Always close your tags with {% endif %}, {% endfor %}, or {% endblock %} to avoid errors.

Use {{ variable }} to show data inside templates.

Template inheritance with {% extends %} helps keep your site consistent and easier to maintain.

Summary

Template tags let you add logic like conditions and loops inside HTML.

Use {% if %} to show content based on conditions, {% for %} to repeat content, {% block %} to define replaceable sections, and {% extends %} to reuse layouts.

They make your web pages dynamic and organized.

Practice

1. What does the Django template tag {% extends 'base.html' %} do in a template?

easy

A. It includes the content of 'base.html' directly without any changes.

B. It tells the template to use 'base.html' as a parent layout to build upon.

C. It creates a new HTML file named 'base.html'.

D. It deletes the 'base.html' file from the project.

Solution

1. Step 1: Understand the purpose of {% extends %}

   This tag is used to inherit a base template, allowing reuse of common layout parts.

2. Step 2: Differentiate from similar tags

   Unlike {% include %}, {% extends %} sets a parent template to extend, not just insert content.

3. Final Answer:

   It tells the template to use 'base.html' as a parent layout to build upon. -> Option B

4. Quick Check:

   Template inheritance = extends [OK]

Hint: Extends means use a base layout to build your page [OK]

Common Mistakes:

• Confusing extends with include
• Thinking it creates or deletes files
• Assuming it copies content without structure

2. Which of the following is the correct syntax to start a for loop in a Django template to iterate over a list named items?

easy

A. {% for item in items %}

B. {% loop item over items %}

C. {% foreach items as item %}

D. {% iterate items with item %}

Solution

1. Step 1: Recall Django for loop syntax

   Django uses {% for variable in list %} to loop over items.

2. Step 2: Compare options

   Only {% for item in items %} matches the correct Django template syntax for loops.

3. Final Answer:

   {% for item in items %} -> Option A

4. Quick Check:

   For loop syntax = for item in list [OK]

Hint: For loops use 'for variable in list' syntax [OK]

Common Mistakes:

• Using 'foreach' or 'loop' which are not Django tags
• Wrong keyword order or missing 'in'
• Confusing with Python code syntax

3. Given this Django template code:

{% for num in numbers %}{% if num > 2 %}{{ num }} {% endif %}{% endfor %}

and the context {'numbers': [1, 3, 2, 4]}, what will be the rendered output?

medium

A. 3 4

B. 1 3 2 4

C. 2 3 4

D. 1 2 3 4

Solution

1. Step 1: Loop through each number in the list

   The loop goes over 1, 3, 2, 4 in order.

2. Step 2: Check the condition num > 2 for each

   Only 3 and 4 are greater than 2, so only these print.

3. Final Answer:

   3 4 -> Option A

4. Quick Check:

   Filter numbers > 2 = 3 4 [OK]

Hint: Only numbers greater than 2 print inside the loop [OK]

Common Mistakes:

• Printing all numbers ignoring the if condition
• Including numbers equal to 2
• Confusing loop variable with list

4. Identify the error in this Django template snippet:

{% for item in items %}{{ item }}{% endfor %}{% endif %}

medium

A. Variables must be inside {% %} tags, not {{ }}

B. Incorrect closing tag {% endfor %} should be {% endloop %}

C. Missing {% if %} tag before {% endif %}

D. The for loop syntax is invalid

Solution

1. Step 1: Check tag pairs

   The snippet closes a for loop with {% endfor %} but then has an unmatched {% endif %} without a starting {% if %}.

2. Step 2: Validate other tags

   Variable output with {{ item }} is correct, and {% endfor %} is the right closing tag for for loops.

3. Final Answer:

   Missing {% if %} tag before {% endif %} -> Option C

4. Quick Check:

   Every {% endif %} needs a matching {% if %} [OK]

Hint: Every {% endif %} must have a matching {% if %} [OK]

Common Mistakes:

• Leaving unmatched {% endif %} tags
• Confusing {% endfor %} with {% endloop %}
• Misusing {{ }} for tags

5. You have a base template base.html with a block named content defined as:

{% block content %}Default content{% endblock %}

In your child template, you want to replace this block but also add a paragraph before the default content. Which is the correct way to do this?

hard

A. {% block content %}Intro paragraphDefault content{% endblock %}

B. {% block content %}Intro paragraph{% super %}{% endblock %}

C. {% block content %}Intro paragraph{% extends 'base.html' %}{% endblock %}

D. {% block content %}Intro paragraph{{ block.super }}{% endblock %}

Solution

1. Step 1: Understand block overriding with super

   To add content before the parent's block content, use {{ block.super }} inside the block.

2. Step 2: Check each option

   {% block content %}

   Intro paragraph

   {{ block.super }}{% endblock %} correctly uses {{ block.super }} to include the parent's content after the paragraph.

3. Final Answer:

   {% block content %}<p>Intro paragraph</p>{{ block.super }}{% endblock %} -> Option D

4. Quick Check:

   Use {{ block.super }} to include parent block content [OK]

Hint: Use {{ block.super }} to add parent block content inside child [OK]

Common Mistakes:

• Using {% super %} which is invalid
• Repeating default content manually instead of block.super
• Placing {% extends %} inside a block