##  Template inheritance  ¶

The most powerful – and thus the most complex – part of Django’s template
engine is template inheritance. Template inheritance allows you to build a
base “skeleton” template that contains all the common elements of your site
and defines **blocks** that child templates can override.

Let’s look at template inheritance by starting with an example:

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="style.css">
        <title>{% block title %}My amazing site{% endblock %}</title>
    </head>
    
    <body>
        <div id="sidebar">
            {% block sidebar %}
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog/">Blog</a></li>
            </ul>
            {% endblock %}
        </div>
    
        <div id="content">
            {% block content %}{% endblock %}
        </div>
    </body>
    </html>
    

This template, which we’ll call ` base.html  ` , defines an HTML skeleton
document that you might use for a two-column page. It’s the job of “child”
templates to fill the empty blocks with content.

In this example, the [ ` block  ` ](../builtins/#std-templatetag-block) tag
defines three blocks that child templates can fill in. All the [ ` block  `
](../builtins/#std-templatetag-block) tag does is to tell the template engine
that a child template may override those portions of the template.

A child template might look like this:

    
    
    {% extends "base.html" %}
    
    {% block title %}My amazing blog{% endblock %}
    
    {% block content %}
    {% for entry in blog_entries %}
        <h2>{{ entry.title }}</h2>
        <p>{{ entry.body }}</p>
    {% endfor %}
    {% endblock %}
    

The [ ` extends  ` ](../builtins/#std-templatetag-extends) tag is the key
here. It tells the template engine that this template “extends” another
template. When the template system evaluates this template, first it locates
the parent – in this case, “base.html”.

At that point, the template engine will notice the three [ ` block  `
](../builtins/#std-templatetag-block) tags in ` base.html  ` and replace those
blocks with the contents of the child template. Depending on the value of `
blog_entries  ` , the output might look like:

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="style.css">
        <title>My amazing blog</title>
    </head>
    
    <body>
        <div id="sidebar">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog/">Blog</a></li>
            </ul>
        </div>
    
        <div id="content">
            <h2>Entry one</h2>
            <p>This is my first entry.</p>
    
            <h2>Entry two</h2>
            <p>This is my second entry.</p>
        </div>
    </body>
    </html>
    

Note that since the child template didn’t define the ` sidebar  ` block, the
value from the parent template is used instead. Content within a ` {%  block
%}  ` tag in a parent template is always used as a fallback.

You can use as many levels of inheritance as needed. One common way of using
inheritance is the following three-level approach:

  * Create a ` base.html  ` template that holds the main look-and-feel of your site. 
  * Create a ` base_SECTIONNAME.html  ` template for each “section” of your site. For example, ` base_news.html  ` , ` base_sports.html  ` . These templates all extend ` base.html  ` and include section-specific styles/design. 
  * Create individual templates for each type of page, such as a news article or blog entry. These templates extend the appropriate section template. 

This approach maximizes code reuse and helps to add items to shared content
areas, such as section-wide navigation.

Here are some tips for working with inheritance:

  * If you use [ ` {%  extends  %}  ` ](../builtins/#std-templatetag-extends) in a template, it must be the first template tag in that template. Template