Template Inheritance

Template Inheritance

Template inheritance is a powerful feature that keeps your code DRY (Don't Repeat Yourself). Instead of copying the same header and footer into every HTML file, you create a base template with the common elements, then child templates that only override what's different.

Create a base.html file in your templates folder. This will be your parent template:

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
    
    {% block content %}{% endblock %}
    
    <footer>
        <p>© 2026 My Flask App</p>
    </footer>
</body>
</html>

Now, create child templates that extend this base. Use {% extends "base.html" %} at the top, then define blocks to override:

{% extends "base.html" %}

{% block title %}Home Page{% endblock %}

{% block content %}
    <h1>Welcome to my website!</h1>
    <p>This is the home page content.</p>
{% endblock %}

See how clean that is? You don't repeat the HTML structure, head, nav, or footer. Just the unique content for each page. The {% block %} tags define placeholders that child templates can fill in.

You can have multiple blocks. Maybe you want one for the main content and another for sidebar content:

<div class="main">
    {% block content %}{% endblock %}
</div>

<div class="sidebar">
    {% block sidebar %}{% endblock %}
</div>

Sometimes you want to keep the parent block's content and add to it. Use {{ super() }} to include the parent's content:

{% block content %}
    {{ super() }}
    <p>This is additional content I'm adding.</p>
{% endblock %}

This inheritance approach means if you need to change the navigation, you just edit base.html and all pages update automatically. Much easier than editing every single template file.