Flask Templates – Dynamic HTML with Jinja2 - Learn PYTHON-BACKEND | Revochamp

Name: Flask Templates – Dynamic HTML with Jinja2
Availability: InStock
Author: Revochamp

What are Flask Templates?

While APIs return JSON, web applications often need to serve HTML. Flask uses the Jinja2 engine to generate dynamic HTML. This allows you to write standard HTML files with special placeholders and logic that Flask fills in before sending the page to the user's browser.

Rendering a Template

By default, Flask looks for HTML files in a folder named templates/ at the root of your project. You use the render_template() function to serve these files and pass data to them.

PythonRead-only

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    user_name = "Kishore"
    skills = ["Flutter", "Python", "Clean Architecture"]
    return render_template('index.html', name=user_name, tech_stack=skills)

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    user_name = "Kishore"
    skills = ["Flutter", "Python", "Clean Architecture"]
    return render_template('index.html', name=user_name, tech_stack=skills)

Jinja2 Syntax Basics

Jinja2 uses specific delimiters to distinguish between plain HTML and Python-like logic.

{{ variable }}: Expressions used to print output to the page.
{% statement %}: Control structures like loops or conditionals.
{# comment #}: Comments that won't appear in the final HTML.

HTMLRead-only


<h1>Welcome, {{ name }}!</h1>

<h3>Your Skills:</h3>
<ul>
    {% for skill in tech_stack %}
        <li>{{ skill }}</li>
    {% else %}
        <li>No skills listed.</li>
    {% endfor %}
</ul>


<h1>Welcome, {{ name }}!</h1>

<h3>Your Skills:</h3>
<ul>
    {% for skill in tech_stack %}
        <li>{{ skill }}</li>
    {% else %}
        <li>No skills listed.</li>
    {% endfor %}
</ul>

Template Inheritance

To avoid repeating headers, footers, and navigation bars on every page, Flask uses inheritance. You create a base 'layout' and other pages 'extend' it.

HTMLRead-only


<html>
  <body>
    <nav>Navigation Bar</nav>
    {% block content %}{% endblock %}
  </body>
</html>


{% extends 'base.html' %}
{% block content %}
  <h2>This is the Home Page</h2>
{% endblock %}


<html>
  <body>
    <nav>Navigation Bar</nav>
    {% block content %}{% endblock %}
  </body>
</html>


{% extends 'base.html' %}
{% block content %}
  <h2>This is the Home Page</h2>
{% endblock %}

Common Jinja2 Features

Feature	Syntax	Description
Filters	{{ name\|upper }}	Modifies variables (e.g., uppercase, length)
Conditionals	{% if user %}...{% endif %}	Shows content based on logic
Includes	{% include 'footer.html' %}	Imports a small snippet of HTML
URL Building	{{ url_for('static', filename='style.css') }}	Generates paths to static files

Test Your Knowledge

of 3

Which Jinja2 delimiter is used for printing a variable?

{% ... %}

{# ... #}

<% ... %>

of 3

Where must template files be stored by default in a Flask project?

/html

/views

/templates

/pages

of 3

Which tag is used to allow a child template to insert content into a parent template?

{% include %}

{% extends %}

{% block %}

{% insert %}

Frequently Asked Questions

Can I use Python functions inside Jinja2?

Not directly. You can only use functions that you explicitly pass to render_template or those that Flask provides by default (like url_for).

What is the 'safe' filter?

By default, Jinja2 escapes HTML for security. If you want to render actual HTML tags stored in a variable, use {{ my_html|safe }}. Be careful with user input!

Where do I put my CSS and Images?

Put them in a folder named 'static/'. In your template, reference them using: {{ url_for('static', filename='css/main.css') }}.

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): user_name = "Kishore" skills = ["Flutter", "Python", "Clean Architecture"] return render_template('index.html', name=user_name, tech_stack=skills)

Feature

Syntax

Description

Filters

Modifies variables (e.g., uppercase, length)

Conditionals

{% if user %}...{% endif %}

Shows content based on logic

Includes

{% include 'footer.html' %}

Imports a small snippet of HTML

URL Building

Generates paths to static files

Test Your Knowledge

of 3

Which Jinja2 delimiter is used for printing a variable?

{% ... %}

{# ... #}

<% ... %>

of 3

Where must template files be stored by default in a Flask project?

/html

/views

/templates

/pages

of 3

Which tag is used to allow a child template to insert content into a parent template?

{% include %}

{% extends %}

{% block %}

{% insert %}

Frequently Asked Questions

Can I use Python functions inside Jinja2?

Not directly. You can only use functions that you explicitly pass to render_template or those that Flask provides by default (like url_for).

What is the 'safe' filter?

By default, Jinja2 escapes HTML for security. If you want to render actual HTML tags stored in a variable, use {{ my_html|safe }}. Be careful with user input!

Where do I put my CSS and Images?

Put them in a folder named 'static/'. In your template, reference them using: {{ url_for('static', filename='css/main.css') }}.

Flask Templates – Dynamic HTML with Jinja2

Flask Templates – Dynamic HTML with Jinja2

What are Flask Templates?

Rendering a Template

Jinja2 Syntax Basics

Template Inheritance

Common Jinja2 Features

Test Your Knowledge

Frequently Asked Questions

Need help?

Flask Templates – Dynamic HTML with Jinja2

Flask Templates – Dynamic HTML with Jinja2

What are Flask Templates?

Rendering a Template

Jinja2 Syntax Basics

Template Inheritance

Common Jinja2 Features

Test Your Knowledge

Frequently Asked Questions

Need help?