Why templates separate presentation in Django - Visual Breakdown

Concept Flow - Why templates separate presentation

User requests a webpage

↓

Django view processes data

↓

View sends data to template

↓

Template renders HTML with data

↓

Browser receives and shows webpage

This flow shows how Django separates data processing (view) from how the page looks (template).

Execution Sample

Django

{% for item in items %}
  <li>{{ item }}</li>
{% endfor %}

This template code loops over data items and creates a list in HTML.

Execution Table

Step	Template Code	Data Input	Rendered Output	Explanation
1	{% for item in items %}	items = ['apple', 'banana']	Start loop	Begin looping over each item in the list
2	<li>{{ item }}</li>	item = 'apple'	<li>apple</li>	Render first item as list element
3	<li>{{ item }}</li>	item = 'banana'	<li>banana</li>	Render second item as list element
4	{% endfor %}	Loop ends	Loop finished	End of loop, all items rendered

💡 Loop ends after all items in 'items' are processed

Variable Tracker

Variable	Start	After 1	After 2	Final
items	['apple', 'banana']	['apple', 'banana']	['apple', 'banana']	['apple', 'banana']
item	None	'apple'	'banana'	None

Key Moments - 2 Insights

Why do we use templates instead of writing HTML directly in views?

Templates keep the HTML separate from Python code, making it easier to change the page look without touching data logic, as shown in the execution_table where data and HTML are handled separately.

What happens if the data changes but the template stays the same?

The template will render the new data automatically without changing its code, because it only controls presentation, as seen in the variable_tracker where 'items' can change but template code stays fixed.

Visual Quiz - 3 Questions

Look at the execution_table, what is the rendered output at Step 3?

A <li>orange</li>

B <li>banana</li>

C <li>apple</li>

D <li>grape</li>

💡 Hint

Check the 'Rendered Output' column at Step 3 in the execution_table.

At which step does the template finish processing all items?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Look for the step where the loop ends in the execution_table.

If the 'items' list had three elements instead of two, how would the execution_table change?

A There would be an extra row for the third item rendering

B The loop would end earlier

C The rendered output would be empty

D The template code would change

💡 Hint

Refer to how each item in 'items' creates a row in the execution_table.

Concept Snapshot

Django templates separate presentation from logic.
Views handle data and send it to templates.
Templates use simple tags to insert data into HTML.
This keeps code clean and easy to update.
Changing look doesn’t affect data processing.

Full Transcript

In Django, templates separate how a webpage looks from how data is handled. When a user requests a page, the view processes data and sends it to the template. The template then uses tags like loops and variables to create HTML. This separation means you can change the page design without touching the data code. The example shows a loop over a list of items, rendering each as a list element. Variables like 'items' and 'item' change during rendering, but the template code stays the same. This makes development easier and clearer.