Template inheritance with base template in Django - Step-by-Step Execution

Concept Flow - Template inheritance with base template

Start: Base Template

↓

Define blocks: header, content, footer

↓

Child Template extends Base

↓

Override blocks in Child

↓

Render Child Template

↓

Base structure + Child content combined

↓

Final HTML output

The base template defines placeholders (blocks). The child template extends the base and fills those blocks. Rendering the child combines base layout with child content.

Execution Sample

Django

{% extends 'base.html' %}
{% block content %}
<p>Hello from child!</p>
{% endblock %}

Child template extends base.html and overrides the content block with a paragraph.

Execution Table

Step	Template Part	Action	Resulting HTML Snippet	Notes
1	Base Template	Read base.html and find blocks	<html><body>{% block content %}{% endblock %}</body></html>	Base defines content block placeholder
2	Child Template	Extends base.html	Child inherits base structure	Child will fill blocks defined in base
3	Child Template	Override content block	<p>Hello from child!</p>	Child replaces content block
4	Render	Combine base and child	<html><body><p>Hello from child!</p></body></html>	Final output merges base layout with child content
5	Output	Send to browser	<html><body><p>Hello from child!</p></body></html>	User sees combined page

💡 Rendering completes after merging base template structure with child block overrides

Variable Tracker

Variable	Start	After Step 3	Final
content block	empty placeholder	<p>Hello from child!</p>	<p>Hello from child!</p>

Key Moments - 3 Insights

Why does the child template need to use {% block %} tags?

Because the base template defines blocks as placeholders. The child must override these blocks to insert its own content, as shown in execution_table step 3.

What happens if the child template does not override a block?

The base template's block content (which can be empty) is used. The final output will show the base block content unchanged, as the child did not replace it.

Why do we use {% extends %} in the child template?

It tells Django to use the base template as a starting point. Without it, the child template would render alone without the base layout, as seen in execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution table, what HTML snippet replaces the content block after step 3?

A <body>{% block content %}{% endblock %}</body>

B <p>Hello from child!</p>

C <html><body></body></html>

D <p>Base content</p>

💡 Hint

Check the 'Resulting HTML Snippet' column at step 3 in the execution_table

At which step does the final HTML output get formed?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the step where base and child templates combine in the execution_table

If the child template did not override the content block, what would the 'content block' variable hold after step 3?

A Empty placeholder

B <p>Hello from child!</p>

C Base block default content

D Error: block missing

💡 Hint

Refer to variable_tracker and key_moments about block overriding

Concept Snapshot

Template inheritance lets you create a base layout with blocks.
Child templates extend the base and override blocks.
Use {% extends 'base.html' %} in child.
Override blocks with {% block name %}...{% endblock %}.
Rendering merges base structure with child content.
This keeps templates DRY and organized.

Full Transcript

Template inheritance in Django works by defining a base template with block placeholders. The child template uses the {% extends %} tag to inherit the base layout. It then overrides blocks defined in the base using {% block %} tags to insert its own content. When rendering, Django combines the base template's structure with the child's block content to produce the final HTML. This process allows reuse of common layout code and easy customization. The execution table shows each step: reading base, extending in child, overriding blocks, combining templates, and outputting final HTML. Variables like the content block start empty and get replaced by child content. Key points include the need for {% block %} tags in child to override base blocks, and that without overriding, base block content remains. This method keeps templates clean and maintainable.

Practice

1. What is the main purpose of using {% extends %} in a Django template?

easy

A. To define a new block inside the template

B. To include JavaScript files in the template

C. To inherit the layout and content from a base template

D. To load static files like images or CSS

Solution

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

   This tag tells Django to use another template as the base layout for the current template.

2. Step 2: Compare with other options

   Options B, C, and D describe different template tags or functions unrelated to inheritance.

3. Final Answer:

   To inherit the layout and content from a base template -> Option C

4. Quick Check:

   {% extends %} = inherit base template [OK]

Hint: Remember: extends means 'use base template' [OK]

Common Mistakes:

• Confusing extends with include
• Thinking extends loads static files
• Mixing block and extends tags

2. Which of the following is the correct syntax to define a block named 'content' in a Django template?

easy

A. {% content block %} ... {% endcontent %}

B. {% block 'content' %} ... {% endblock %}

C. {% define content %} ... {% enddefine %}

D. {% block content %} ... {% endblock %}

Solution

1. Step 1: Recall block syntax in Django templates

   The correct syntax uses {% block blockname %} and closes with {% endblock %} without quotes.

2. Step 2: Check each option

   {% block content %} ... {% endblock %} matches the correct syntax. Options A, C, and D use invalid tags. {% block 'content' %} ... {% endblock %} incorrectly uses quotes around the block name.

3. Final Answer:

   {% block content %} ... {% endblock %} -> Option D

4. Quick Check:

   Block syntax = {% block name %} ... {% endblock %} [OK]

Hint: Blocks never use quotes around their names [OK]

Common Mistakes:

• Adding quotes around block names
• Using wrong tag names like define or content block
• Forgetting to close the block with endblock

3. Given the base template

{% raw %}{% block title %}Base Title{% endblock %}{% block content %}Base Content{% endblock %}{% endraw %}

and a child template

{% raw %}{% extends 'base.html' %}{% block title %}Child Title{% endblock %}{% endraw %}

, what will be the rendered output for the content block when rendering the child template?

medium

A. Base Content

B. Child Title

C. Child Content

D. Empty content block

Solution

1. Step 1: Understand block overriding in inheritance

   The child template overrides only the title block, so the content block remains as defined in the base template.

2. Step 2: Determine output for content block

   Since the child does not override content, the base template's Base Content is used.

3. Final Answer:

   Base Content -> Option A

4. Quick Check:

   Unchanged blocks show base content [OK]

Hint: Only overridden blocks change output [OK]

Common Mistakes:

• Assuming all blocks are replaced
• Confusing title block content with content block
• Expecting empty output if block not overridden

4. Identify the error in this child template code:

{% raw %}{% extends 'base.html' %}{% block content %}Hello World{% endblock content %}{% endraw %}

medium

A. Incorrect closing tag for block; should be {% endblock %} not {% endblock content %}

B. Missing {% load static %} tag

C. The extends tag must be at the end of the file

D. Block name 'content' is invalid

Solution

1. Step 1: Check block closing syntax

   The correct way to close a block is with {% endblock %} without repeating the block name.

2. Step 2: Verify other options

   Missing {% load static %} tag is unrelated to block syntax. The extends tag must be at the end of the file is false; extends must be at the top. Block name 'content' is invalid is incorrect; 'content' is a valid block name.

3. Final Answer:

   Incorrect closing tag for block; should be {% endblock %} not {% endblock content %} -> Option A

4. Quick Check:

   Block ends with {% endblock %} only [OK]

Hint: End blocks with just {% endblock %} [OK]

Common Mistakes:

• Adding block name after endblock
• Placing extends tag incorrectly
• Confusing load static with block syntax

5. You have a base template with blocks header, content, and footer. You want a child template to reuse the base layout but add a sidebar inside the content block without losing the original content. Which is the correct way to do this?

hard

A. {% raw %}{% extends 'base.html' %}{% block sidebar %}Sidebar content{% endblock %}{% endraw %}

B. {% raw %}{% extends 'base.html' %}{% block content %}{{ block.super }}Sidebar content{% endblock %}{% endraw %}

C. {% raw %}{% extends 'base.html' %}{% block content %}Sidebar content{% endblock %}{% endraw %}

D. {% raw %}{% extends 'base.html' %}{% block content %}Sidebar content{% endblock %}{% endraw %}

Solution

1. Step 1: Understand how to keep base content in a block

   Using {{ block.super }} inside a block includes the original content from the base template's block.

2. Step 2: Analyze options

   {% raw %}{% extends 'base.html' %}{% block content %}{{ block.super }}
   Sidebar content{% endblock %}{% endraw %} correctly adds sidebar content after the original content. Options B and D replace the content entirely. {% raw %}{% extends 'base.html' %}{% block sidebar %}Sidebar content{% endblock %}{% endraw %} tries to add a new block 'sidebar' which doesn't exist in base, so it won't appear.

3. Final Answer:

   {% extends 'base.html' %}{% block content %}{{ block.super }}
   Sidebar content
   {% endblock %} -> Option B

4. Quick Check:

   Use {{ block.super }} to keep base block content [OK]

Hint: Use {{ block.super }} to keep base block content [OK]

Common Mistakes:

• Overwriting block content without block.super
• Adding blocks not defined in base template
• Forgetting to extend the base template