[Django]-"{% extends %}" vs "{% include %}" in Django Templates

Extending allows you to replace blocks (e.g. “content”) from a parent template instead of including parts to build the page (e.g. “header” and “footer”). This allows you to have a single template containing your complete layout and you only “insert” the content of the other template by replacing a block.

If the user profile is used on all pages, you’d probably want to put it in your base template which is extended by others or include it into the base template. If you wanted the user profile only on very few pages, you could also include it in those templates.
If the user profile is the same except on a few pages, put it in your base template inside a block which can then be replaced in those templates which want a different profile.

See about django template inheretance.

Extends sort of ‘includes’ the parent template and then can overwrite parts of it for different functionality.

Include does a simple include rendering a template in a current context.

extends creates “parent child relation”. There is a chance of over-writing of parent functionality in case of extends. While include simply renders the html response.

Using % include ... with see docs allows to override variables from included page. So could not agree with muhammad-awais-bin-majid answer.

Suppose these two clauses just represent different ways of the pages constructing:

1. extends – to use like an external wrapper for the page,
2. include – to insert included page inside the current one.

Also one can use several extending pages just in chained nesting,
but including allow us to use several included pages one by one and not only in chained nesting.

{% extends %}:

• can extend one template, then the child template can override {% block %} which defines in the parent template.

• must be the 1st template tag in a template which means only one {% extends %} is allowed to use in one template.

So basically, you should put the regular layout components like {% block title %}, {% block header %}, {% block navigation-bar %}, {% block main %} and {% block footer %} used on many pages to the foundation templates like base.html, then extend base.html with {% extend %} in the main templates like index.html.

{% include %}:

• can inject(put) multiple templates to one template and the same template is injectable multiple times to one template.

So basically, you should put the irregular layout components used on a few pages to the main templates like index.html except the foundation templates like base.html.

*Lastly, I think that these Django admin templates are the good examples which use {% extends %}, {% include %} and {% block %}.

include: Copy (probably boilerplate) html from one page into another.

• For example, let’s say you have a navbar that appears on every page, but you don’t want to retype that code over and over. Wouldn’t it be nice if you could just code that navbar once and then include it into every page that needs a navbar? include makes that possible.
• Create a tiny file called nav.html with only your
  navigation code inside and then include that nav.html file into
  every page that needs a navbar like so: {% include 'nav.html' %}

extends: Wrap the substantive content of one page inside a generic template.

• For example, let’s say you layout a webpage with all the generic stuff that will appear on each page: a header, a footer, etc… Let’s call this genericPage.html You can then make bunch of smaller html excerpts with just substantive content: home.html, about.html, contact.html, etc…

• You want to wrap the content of each substantive page inside that
  generic wrapper. To do that, you can extend each of those content pages by wrapping them inside the main template by putting this code {% extends 'genericPage.html' %} at the top of each page.

{% extends ‘base.html’ %} is used to create child templates for maintaining structure and content inheritance. {% include ‘base.html’ %} is used to insert content from one template into another without altering the structure.

include will not change the overall structure of template(layout) where on the other hand extend will change the overall structure of the layout.

Depending upon your requirement you can choose what is more suitable for your work