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

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

Step	Template Process	Action	Resulting HTML Part
1	Load base.html	Read base template with blocks	<html><head><title>{% block title %}Default Title{% endblock %}</title></head><body>{% block content %}Default Content{% endblock %}</body></html>
2	Load child template	See extends 'base.html' and block overrides	Child defines title and content blocks
3	Render starts	Use base.html structure	Start with base HTML skeleton
4	Render title block	Child overrides title block	<title>Home Page</title>
5	Render content block	Child overrides content block	<p>Welcome to the site!</p>
6	Combine all parts	Merge base structure with child blocks	<html><head><title>Home Page</title></head><body><p>Welcome to the site!</p></body></html>
7	Output final HTML	Send combined HTML to browser	Complete page with child content

💡 All blocks overridden or defaulted; final HTML ready to display

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
title block content	Default Title	Home Page	Home Page	Home Page
content block content	Default Content	Default Content	<p>Welcome to the site!</p>	<p>Welcome to the site!</p>
final HTML	empty	partial with base head	partial with base body	full 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

Look at the execution table, what is the content of the title block after step 4?

A Welcome to the site!

B Home Page

C Default Title

D Empty

💡 Hint

Check the 'title block content' variable in variable_tracker after step 4

At which step does the final HTML get fully combined?

A Step 3

B Step 5

C Step 6

D Step 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?

A Default Content from base.html

B Empty content

C Child's content block

D An 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.

Practice

1. What is the main purpose of using {% extends %} in Flask templates?

easy

A. To inherit the layout from a base template and reuse it

B. To include JavaScript files in the template

C. To define a new CSS style inside the template

D. To create a new Flask route

Solution

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

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

2. Step 2: Differentiate from other template tags

   Other options like including scripts or defining CSS are done differently, not with {% extends %}.

3. Final Answer:

   To inherit the layout from a base template and reuse it -> Option A

4. Quick Check:

   Template inheritance = reuse layout [OK]

Hint: Remember: extends means reuse base layout [OK]

Common Mistakes:

• Confusing extends with including scripts
• Thinking extends creates new routes
• Using extends to add CSS styles

2. Which of the following is the correct syntax to inherit from a base template named base.html?

easy

A. {% include 'base.html' %}

B. {% import 'base.html' %}

C. {% extends 'base.html' %}

D. {% block 'base.html' %}

Solution

1. Step 1: Recall the syntax for template inheritance

   The correct tag to inherit a template is {% extends 'filename' %}.

2. Step 2: Identify incorrect tags

   {% include %} inserts content but does not inherit; {% import %} is for macros; {% block %} defines sections, not inheritance.

3. Final Answer:

   {% extends 'base.html' %} -> Option C

4. Quick Check:

   Extends = inherit base template [OK]

Hint: Use extends, not include, to inherit templates [OK]

Common Mistakes:

• Using include instead of extends
• Confusing import with extends
• Misusing block tag for inheritance

3. Given the base template base.html with a block named content and a child template that extends it and overrides content, what will be displayed when rendering the child template?

medium

A. An error because blocks cannot be overridden

B. The content defined inside the child's content block

C. The content defined inside the base template's content block

D. Both base and child content concatenated automatically

Solution

1. Step 1: Understand block overriding in template inheritance

   The child template replaces the base template's block content with its own block content.

2. Step 2: Clarify behavior of blocks

   Blocks are placeholders in the base template; child templates override them. No automatic concatenation occurs unless explicitly coded.

3. Final Answer:

   The content defined inside the child's content block -> Option B

4. Quick Check:

   Child block overrides base block content [OK]

Hint: Child block content replaces base block content [OK]

Common Mistakes:

• Thinking base block content shows instead
• Expecting automatic concatenation of blocks
• Believing block override causes errors

4. Consider this child template code snippet:

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

What is the error in this template?

medium

A. The closing tag should be {% endblock %} instead of

B. The extends tag is missing quotes around the filename

C. The block name should be main not content

D. The p tag cannot be used inside blocks

Solution

1. Step 1: Check block syntax correctness

   Blocks must be closed with {% endblock %}, not with HTML-like closing tags.

2. Step 2: Verify other parts

   The extends tag is correctly quoted; block name can be any valid name; p tags are allowed inside blocks.

3. Final Answer:

   The closing tag should be {% endblock %} instead of -> Option A

4. Quick Check:

   Block ends with endblock tag [OK]

Hint: Close blocks with {% endblock %}, not HTML tags [OK]

Common Mistakes:

• Using HTML closing tags for blocks
• Forgetting quotes in extends (not here though)
• Assuming block names are fixed keywords

5. You have a base template base.html with two blocks: header and content. You want a child template to reuse the base layout but only change the content block, keeping the base header as is. Which is the correct approach?

hard

A. In the child template, extend base.html and redefine only the header block

B. In the child template, extend base.html and redefine both header and content blocks

C. In the child template, do not use extends; copy all base content and change content

D. In the child template, extend base.html and define only the content block; omit the header block

Solution

1. Step 1: Understand block overriding behavior

   If a block is not redefined in the child, the base template's block content is used automatically.

2. Step 2: Apply this to the problem

   To keep the base header, do not redefine the header block in the child; only override content.

3. Final Answer:

   In the child template, extend base.html and define only the content block; omit the header block -> Option D

4. Quick Check:

   Omit block to keep base content [OK]

Hint: Override only blocks you want to change [OK]

Common Mistakes:

• Redefining all blocks unnecessarily
• Copying base template instead of extending
• Overriding wrong block by mistake