When extending base.html, getting indentation problem in home.html

Question

I'm using Django 3.0.8 on visual studio code IDE. Here is a blog template(in template root) contained files base.html and home.html.

Here is my full base.html code:

{% load static %}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> {% if title %}

    <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">

    <title>Django blog-{{title}}</title>
    {% else %}
    <title>Django blog</title>
    {% endif %}
</head>

<body>
    <header class="site-header">
        <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
            <div class="container">
                <a class="navbar-brand mr-4" href="/">Django Blog</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="navbarToggle">
                    <div class="navbar-nav mr-auto">
                        <a class="nav-item nav-link" href="/">Home</a>
                        <a class="nav-item nav-link" href="/about">About</a>
                    </div>
                    <!-- Navbar Right Side -->
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="#">Login</a>
                        <a class="nav-item nav-link" href="#">Register</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <main role="main" class="container">
        <div class="row">
            <div class="col-md-8">
                {% block content %}{% endblock %}
            </div>
            <div class="col-md-4">
                <div class="content-section">
                    <h3>Our Sidebar</h3>
                    <p class='text-muted'>You can put any information here you'd like.
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-light">Latest Posts</li>
                            <li class="list-group-item list-group-item-light">Announcements</li>
                            <li class="list-group-item list-group-item-light">Calendars</li>
                            <li class="list-group-item list-group-item-light">etc</li>
                        </ul>
                    </p>
                </div>
            </div>
        </div>
    </main>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

When i extend base.html into home.html, i'm facing some identation problem and getting wrong output. This is how home.html looks like after extending base.html:

{% extends "blog/base.html" %} {% block content %} {% for post in posts %}
<article class="media content-section">
    <div class="media-body">
        <div class="article-metadata">
            <a class="mr-2" href="#">{{ post.author }}</a>
            <small class="text-muted">{{ post.date_posted }}</small>
        </div>
        <h2><a class="article-title" href="#">{{ post.title }}</a></h2>
        <p class="article-content">{{ post.content }}</p>
    </div>
</article>
{% endfor %} {% endblock content %}

Why i'm getting this.Is there any auto identation feature in visual studio code?

What happens when you directly put `home.html` code inside `base.html`? — anuragal, Jul 14 '20 at 08:49
Thanks for your concern....getting exactly same output when i put my home.html code inside base.html. I have to know what's the problem with this identation. — Sushmita, Jul 14 '20 at 10:23
If you are getting the same output then this is not a problem which is created because of extending to `base.html`. Now you have to look into the HTML and css classes to identify the root cause of the problem — anuragal, Jul 14 '20 at 11:21

score 0 · Answer 1 · answered Jul 14 '20 at 09:31

I believe you must match the amount of indentation exactly the same where the blocks are occupied. Say that your blocks are situated on the fourth tab indent, the new code must also be situated starting from the fourth indent.

Although the truth is, HTML indents don't matter -- as long as you have matching tags, you might as well as to put everything in one line and the HTML will still function. Having used python myself, it's hard to believe that indentation doesn't matter, but once you touched languages like c++ or java, you'll see that the indentation rule isn't global.

Answering your other question, I believe you can use some auto-indention as described here, but I don't see that necessary in HTML as very few people will see your web source code.

Also as a quick tip, it's a better practice to use two-space indents rather than four in HTML. In your first code block, it's obvious that most of the code in the middle is outside the frame, and that's caused by the numerous levels before it.

When extending base.html, getting indentation problem in home.html

1 Answers1