Django 1.10 Template Rend les balises HTML imbriquées en dehors de leur parent

Question

Je suis un peu perplexe par le comportement suivant des templates Django, ce qui m'empêche de styliser avec succès la sortie.

A savoir, je le modèle suivant:

<article class="article 
    {% if article.is_featured %} featured{% endif %} 
    {% if not article.published %} unpublished{% endif %}"> 
{% if not detail_view %} 

    <div class="post-preview"> 
     <a href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}"> 
      <h2 class="post-title"> 
      {% render_model article "title" "" "" "striptags" %} 
      </h2> 
      {% if article.lead_in %} 
      <h3 class="post-subtitle"> 
       {% if not detail_view %} 
        {% render_model article "lead_in" "" "" "truncatewords:'20'|striptags" %} 
       {% else %}  
        {% render_model article "lead_in" "" "" "striptags" %} 
       {% endif %} 
      </h3> 
      {% endif %} 
     </a> 
     <p class="post-meta" style="margin-bottom: 0;"> Posted by 
      {% include "aldryn_newsblog/includes/author.html" with author=article.author %} 
      on {{ article.publishing_date|date:"F d, Y" }} 
     </p> 
     <p class="post-meta" style="margin: 0"> 
      <h4 style="display:inline-flex">Categories:</h4> 
       {% for category in article.categories.all %} 
        <a href="/articles/category/{{category.name|lower}}">{{ category.name }} {% if not forloop.last %}, {% endif %}</a> 
       {% endfor %} 
     </p> 
     <p class="post-meta" style="margin: 0"> 
      <h4 style="display:inline-flex">Tags:</h4> 
       {% for tag in article.tag %} 
        <a href="/articles/category/{{tag.name|lower}}">{{ tag.name }} {% if not forloop.last %}, {% endif %}</a> 
       {% endfor %} 
     </p> 
    </div> 
    <hr> 
{% endif %} 

{% if detail_view %} 
<!-- <h3>Testing template! (from article with detail_view=True)</h3> --> 
     {% render_placeholder article.content language placeholder_language %}   
{% endif %} 

</article> 

La sortie de ce modèle est à peu près comme ceci:

<article class="article"> 
    <div class="post-preview"> 
     <a href="/articles/third-post/"> 
      <h2 class="post-title"> 
      Third Post 
      </h2> 
      <h3 class="post-subtitle"> 
        Third post lead-in text. 
      </h3> 
     </a> 
     <p class="post-meta" style="margin-bottom: 0;"> Posted by 
    <a href="">  
    </a> 

      on September 19, 2017 
     </p> 
     <p class="post-meta" style="margin: 0"> 
      <h4 style="display:inline-flex">Categories:</h4> 

      <a href="/articles/category/programming">Programming </a>    
     </p> 
    <p class="post-meta" style="margin: 0"> 
     <h4 style="display:inline-flex">Tags:</h4> 

    </p> 

    </div> 
    <hr> 
</article> 

Bien que le code source HTML semble correcte, le navigateur traite comme les suivantes l'image illustre.

Qu'est-ce que je manque? Le modèle est-il incorrect? Ou est-ce un bug que j'observe? J'ai essayé cela dans Safari et Firefox. Le résultat est le même.

Answer 1

Non, ce sont juste les outils de développement du navigateur qui tentent de donner un sens à votre code HTML invalide. Un élément h ne peut pas entrer à l'intérieur d'un élément p.

Answer 2

Vérifiez cette réponse:

<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)

Ils expliquent en profondeur plus là, mais essentiellement vos <h1,2,3,4> balises étant noyées dans les <p> balises est considérée comme illégale par le navigateur et ferme automatiquement les balises. Utilisez un tag différent et cela devrait résoudre votre problème.