0
0
Djangoframework~10 mins

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

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
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
StepTemplate PartActionResulting HTML SnippetNotes
1Base TemplateRead base.html and find blocks<html><body>{% block content %}{% endblock %}</body></html>Base defines content block placeholder
2Child TemplateExtends base.htmlChild inherits base structureChild will fill blocks defined in base
3Child TemplateOverride content block<p>Hello from child!</p>Child replaces content block
4RenderCombine base and child<html><body><p>Hello from child!</p></body></html>Final output merges base layout with child content
5OutputSend 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
VariableStartAfter Step 3Final
content blockempty 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
Test your understanding
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?
AStep 2
BStep 3
CStep 4
DStep 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?
AEmpty placeholder
B<p>Hello from child!</p>
CBase block default content
DError: 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.