[Fixed]-Django template indentation guideline

by

8👍

I am currently following my own convention in django template guideline for consistency matter. The rule is simple:

  1. Django tag does NOT increase the indentation level
  2. HTML tag does increase the indentation level

It does not matter how many nested Django Tag you have, you should still on the same level of indentation. I consider this as the trade off for putting logic in templates which should be minimized if possible to avoid confusion.

<html>
<body>
  <ul>
    {% if condition %}
    {% for item in menu_item %}
    <li>{{ item }}</li>
    {% endfor %}      
    {% endif %}
  </ul>
  <main>
    {% block content %}
    <p>Hello World</p>
    {% endblock content %}
  </main>
</body>
</html>

Side note

I am using 2 spaces for HTML indentation, because HTML tends to have a very deep nested.

For Vim user, please note that the syntax is not html but htmldjango

Thus my ~/.vimrc looks something like:

autocmd Filetype htmldjango setlocal ts=2 sts=2 sw=2 expandtab
👤Yeo

1👍

Depending your editor, there are ways to set a specific indent width for HTML files.

As for the Django tags, it is actually a good thing not to not add a indent level. See that example:

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

Would be rendered like so:

<ul>
        <li>Bacon</li>
        <li>Ninja</li>
        <li>Tumbleweed</li>
</ul>

And we do not want the two levels of indent. Instead:

{% block content %}
<ul>
    {% for item in items %}
    <li>{{ item }}</li>
    {% endfor %}
</ul>
{% endblock content %}
👤Mathieu Marques

0👍

My apologies for reviving an old question, but I think the way Emacs’ web-mode.el indents Django templates deserves a mention here:

{% block content %}
    <div
        id="1"
        class="fancy"
    >
        {% if link %}
            <a href="{{ link }}">
                Click here
            </a>
        {% endif %}
    </div>
{% endblock %}

As you can see, it indents both Django tags and HTML tags, as well as multiline HTML tags. It supports <style> and <script> tags too. In fact, I like this behavior so much that I created DjHTML, a standalone indenter and a pre-commit hook that uses the same indentation rules as web-mode.

👤Jaap Joris Vens

0👍

I think this is more of a personal preference and what is easy to read and easy to understand in the future (my time limit is "after six months") would be a better alternative than some cookbook recipes. What I use is a two type approach, not just for Django templates but for any language that accepts free formatting of the code. As such I format not critical portions as just left justified block of lines which is an admittedly eyesore but I tend to just ignore them so I can focus on important parts which is extensively indented, preferably in general single action per line and indented at each semantic group change thus all parent/child grouping, nested elements etc. are visible with just one look only.

{% if error_message %} 
<p>
<strong>{{error_message}}</strong>
</p>
{% else %}

<table border>
    <tr>
        <td>
            {{degerlendirme.adi}}
        </td>
    </tr>
    <tr>
        <td>
            <table border>
                <tr>
                    <td>
                        Tip
                    </td>
                    <td>
                        {{ tip }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Açıklama
                        
                    </td>
                    <td>
                        {{ degerlendirme.aciklama }}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <form action="{% url 'perf:degerlendirme' degerlendirme.id %}" method="post">
                {% csrf_token %}
                {{ form }}
                <input type="submit" value="OK" />
            </form>
        </td>
    </tr>
</table>
{% endif %}

I usually use Eclipse and there are several good HTML editing tools that you can install into that environment. I try to use them, but prefer to depend solely on indentation for ease of reading/coding/analysis cycle. That is mainly because I regularly need to use other editors, mostly vi. In this case if I rely mainly on Eclipse or whatever IDE I was using for understanding the code vi, nano or other text editors would make my life miserable.
As one of my professors said in a classroom, lots of years ago, spaces are free and tabs are even cheaper.
One last note; Once I needed to remove all white space from a Django template that was creating enormous nested tables in order to improve run time performance. Such might be needed for certain cases. In similar situations it is better to keep one working copy and generate runtime copy from that by a script or tool. I know that, there are some HTML de-clutter tools. In my case, tools I tried corrupted the template and I needed to perform that operation by hand.

👤Can Baysal

Leave a comment