0
0
Flaskframework~10 mins

Template inheritance with extends in Flask - Step-by-Step Execution

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Concept Flow - Template inheritance with extends
Base Template
↓
Defines blocks
↓
Child Template
↓
Uses extends to inherit base
↓
Overrides blocks
↓
Render final HTML combining base + child
The base template defines placeholders called blocks. The child template extends the base and fills in those blocks. Rendering combines both templates.
Execution Sample
Flask
{% extends 'base.html' %}
{% block title %}Home Page{% endblock %}
{% block content %}
<p>Welcome to the site!</p>
{% endblock %}
A child template extends base.html and overrides title and content blocks to customize the page.
Execution Table
StepTemplate ProcessActionResulting HTML Part
1Load base.htmlRead base template with blocks<html><head><title>{% block title %}Default Title{% endblock %}</title></head><body>{% block content %}Default Content{% endblock %}</body></html>
2Load child templateSee extends 'base.html' and block overridesChild defines title and content blocks
3Render startsUse base.html structureStart with base HTML skeleton
4Render title blockChild overrides title block<title>Home Page</title>
5Render content blockChild overrides content block<p>Welcome to the site!</p>
6Combine all partsMerge base structure with child blocks<html><head><title>Home Page</title></head><body><p>Welcome to the site!</p></body></html>
7Output final HTMLSend combined HTML to browserComplete page with child content
💡 All blocks overridden or defaulted; final HTML ready to display
Variable Tracker
VariableStartAfter Step 4After Step 5Final
title block contentDefault TitleHome PageHome PageHome Page
content block contentDefault ContentDefault Content<p>Welcome to the site!</p><p>Welcome to the site!</p>
final HTMLemptypartial with base headpartial with base bodyfull combined HTML
Key Moments - 2 Insights
Why does the child template need to use {% extends %} at the top?
Because {% extends %} tells Flask to use the base template structure first, then apply the child's block overrides. Without it, the child is standalone and blocks won't replace base content (see execution_table step 2).
What happens if the child template does not override a block?
The base template's default content for that block is used. This is shown in execution_table steps 4 and 5 where blocks are replaced only if overridden.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution table, what is the content of the title block after step 4?
AWelcome to the site!
BHome Page
CDefault Title
DEmpty
💡 Hint
Check the 'title block content' variable in variable_tracker after step 4
At which step does the final HTML get fully combined?
AStep 3
BStep 5
CStep 6
DStep 7
💡 Hint
Look at execution_table row describing merging base and child templates
If the child template did not override the content block, what would the final content block contain?
ADefault Content from base.html
BEmpty content
CChild's content block
DAn error occurs
💡 Hint
Refer to key_moments about block overrides and default content
Concept Snapshot
Template inheritance uses {% extends 'base.html' %} in child templates.
Base templates define blocks with {% block name %}...{% endblock %}.
Child templates override these blocks to customize content.
Rendering combines base structure with child block content.
Blocks not overridden use base defaults.
This keeps HTML DRY and organized.
Full Transcript
Template inheritance in Flask uses the extends keyword to let a child template reuse a base template's structure. The base template defines blocks as placeholders. The child template uses {% extends 'base.html' %} at the top and overrides blocks with its own content. When rendering, Flask loads the base template, then replaces blocks with the child's content if provided. If a block is not overridden, the base's default content is used. This process creates a final HTML page combining both templates. This method helps keep templates organized and avoids repeating common HTML parts.