Include for reusable fragments in Flask - Step-by-Step Execution

Concept Flow - Include for reusable fragments

Start Template Rendering

↓

Encounter {% include 'file.html' %}

↓

Load included file content

↓

Render included content in place

↓

Continue rendering main template

↓

Finish Template Rendering

When rendering a template, Flask sees an include statement, loads the included file, inserts its content, then continues rendering the main template.

Execution Sample

Flask

{% include 'header.html' %}
<p>Welcome to my site!</p>
{% include 'footer.html' %}

This template inserts the content of header.html, then shows a welcome message, then inserts footer.html.

Execution Table

Step	Action	Template Part	Result
1	Start rendering main template	main.html	Begin processing main.html
2	Find include statement	{% include 'header.html' %}	Prepare to insert header.html content
3	Load header.html	header.html	Read header.html content
4	Render header.html content	header.html	Insert header content into main template
5	Continue rendering main template	<p>Welcome to my site!</p>	Add welcome paragraph
6	Find include statement	{% include 'footer.html' %}	Prepare to insert footer.html content
7	Load footer.html	footer.html	Read footer.html content
8	Render footer.html content	footer.html	Insert footer content into main template
9	Finish rendering main template	main.html	Complete full page with header, content, footer

💡 All includes processed and main template fully rendered

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 8	Final
Rendered HTML	""	"<header>...</header>"	"<header>...</header><p>Welcome to my site!</p>"	"<header>...</header><p>Welcome to my site!</p><footer>...</footer>"	Full combined HTML content

Key Moments - 3 Insights

Why does the included file content appear exactly where the include statement is?

Because Flask replaces the include statement with the content of the included file during rendering, as shown in steps 3 and 4 of the execution_table.

Can included files themselves contain include statements?

Yes, included files can have their own include statements, which Flask will process recursively during rendering.

What happens if the included file does not exist?

Flask will raise a template error and stop rendering, because it cannot find the file to include.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered HTML content after step 5?

A "<header>...</header><p>Welcome to my site!</p>"

B "<p>Welcome to my site!</p>"

C "<footer>...</footer>"

D "<header>...</header>"

💡 Hint

Check the 'Rendered HTML' variable in variable_tracker after step 5

At which step does Flask insert the footer content into the main template?

A Step 6

B Step 8

C Step 4

D Step 9

💡 Hint

Look at the execution_table row where footer.html content is rendered

If the include statement for header.html was removed, how would the rendered HTML after step 5 change?

A It would contain header and footer content

B It would cause an error

C It would only contain the welcome paragraph without header content

D It would be empty

💡 Hint

Refer to variable_tracker and consider what content is added at step 4

Concept Snapshot

Flask's {% include 'file.html' %} inserts reusable HTML fragments.
It loads the included file content and places it exactly where the include is.
Includes can be nested and help avoid repeating code.
If the file is missing, rendering stops with an error.
Use includes to keep templates clean and DRY.

Full Transcript

When Flask renders a template with an include statement, it pauses rendering the main template to load the included file. It then inserts the included file's content exactly where the include statement was. After that, it continues rendering the rest of the main template. This process allows you to reuse common parts like headers and footers across pages. If the included file is missing, Flask will raise an error and stop rendering. Includes can also be nested, meaning included files can themselves include other files. This helps keep templates organized and avoids repeating the same HTML in multiple places.

Practice

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

easy

A. To create new routes in Flask

B. To define variables in templates

C. To insert reusable HTML fragments into templates

D. To execute Python code inside templates

Solution

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

   This tag is used to insert reusable HTML parts into templates to avoid repetition.

2. Step 2: Compare with other options

   Defining variables, creating routes, or executing Python code are not done with {% include %}.

3. Final Answer:

   To insert reusable HTML fragments into templates -> Option C

4. Quick Check:

   Reusable HTML insertion = A [OK]

Hint: Remember: include means insert reusable HTML [OK]

Common Mistakes:

• Confusing include with variable definition
• Thinking include creates routes
• Assuming include runs Python code

2. Which of the following is the correct syntax to include a reusable template named header.html inside another template?

easy

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

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

C. {{ include('header.html') }}

D. {% extend 'header.html' %}

Solution

1. Step 1: Recall the correct syntax for including templates

   The correct syntax uses {% include 'filename' %} with quotes around the filename.

2. Step 2: Eliminate incorrect options

   {% import %} is for macros, {{ include() }} is invalid, and {% extend %} is for template inheritance.

3. Final Answer:

   {% include 'header.html' %} -> Option A

4. Quick Check:

   Include syntax = {% include 'file' %} [OK]

Hint: Use {% include 'file.html' %} with quotes [OK]

Common Mistakes:

• Using {% import %} instead of {% include %}
• Trying to call include as a function {{ include() }}
• Confusing include with extend

3. Given the following templates, what will be rendered when base.html is rendered?

base.html:
<html>
  <body>
    {% include 'nav.html' %}
    <h1>Welcome</h1>
  </body>
</html>

nav.html:
<nav>Menu</nav>

medium

A. <nav>Menu</nav><h1>Welcome</h1>

B. <html><body><h1>Welcome</h1></body></html>

C. Error: nav.html not found

D. <html><body><nav>Menu</nav><h1>Welcome</h1></body></html>

Solution

1. Step 1: Understand how {% include %} works

   The {% include 'nav.html' %} inserts the content of nav.html exactly where the tag is placed.

2. Step 2: Combine the templates

   In base.html, the <nav>Menu</nav> from nav.html appears before the <h1>Welcome</h1> inside the body.

3. Final Answer:

   <html><body><nav>Menu</nav><h1>Welcome</h1></body></html> -> Option D

4. Quick Check:

   Include inserts nav.html content inline [OK]

Hint: Include inserts file content exactly where placed [OK]

Common Mistakes:

• Ignoring the included file content
• Expecting an error if file exists
• Thinking include replaces whole template

4. What is the error in this template snippet?

{% include header.html %}

medium

A. Filename should be a variable, not a string

B. Missing quotes around the filename

C. Incorrect tag name, should be import

D. Include tag cannot be used inside templates

Solution

1. Step 1: Check syntax for include tag

   The filename must be a string literal enclosed in quotes, like 'header.html'.

2. Step 2: Identify the error

   Here, header.html is unquoted, causing a syntax error.

3. Final Answer:

   Missing quotes around the filename -> Option B

4. Quick Check:

   Filename must be quoted in include [OK]

Hint: Always put quotes around filenames in include [OK]

Common Mistakes:

• Omitting quotes around filename
• Using import instead of include
• Thinking include is invalid in templates

5. You want to create a reusable footer for your Flask app. Which approach correctly uses {% include %} to add footer.html to multiple pages and ensures easy updates?

hard

A. Add {% include 'footer.html' %} in each page template where footer is needed

B. Copy footer HTML code into every page template manually

C. Use {% extend 'footer.html' %} in each page template

D. Write footer HTML inside the Flask route function

Solution

1. Step 1: Understand reusable fragments with include

   Using {% include 'footer.html' %} inserts the footer code wherever needed, keeping code DRY.

2. Step 2: Compare other options

   Copying code manually duplicates it, {% extend %} is for inheritance, and writing HTML in route mixes logic and presentation.

3. Final Answer:

   Add {% include 'footer.html' %} in each page template where footer is needed -> Option A

4. Quick Check:

   Include footer in templates for easy updates [OK]

Hint: Use include tag in templates to reuse footer [OK]

Common Mistakes:

• Copy-pasting footer code instead of including
• Using extend instead of include for fragments
• Mixing HTML in Python route code