CODEWITHSUNDEEP
pug
mirandalol
mirandalol

Reputation: 465

Jade, 3 elements under parent don't produce expected result

I have this Jade template:

  .widget
    p
      h1 Title!
      | {#Price}:
      a(href='#{item.href}') Link

which produces:

   <div class="widget">
   <p></p><h1>Title</h1>$174 :
   <a href="#">Link</a>
   <p></p>
   </div>

I expected the logical structure:

   <div>
     <p>
       <h1></h1>
       <a></a>
     </p>
   </div>

What am I doing wrong?

Upvotes: 0

Views: 86

Answers (2)

Ry-
Ry-

Reputation: 224952

That structure is probably what Jade produces as output, but in HTML, it’s not valid to nest an <h1> (a block element) under a <p> (which is only allowed to contain inline elements). Since HTML5 is not strictly XML, ending tags for some elements are implicit, including <p>, so the <p> element ends there. The browser then sees an extra </p> and creates another <p> element, because HTML parsing isn’t strict – but that part is invalid HTML.

Consider a <div> or something instead.

Upvotes: 1

Praveen
Praveen

Reputation: 113

There will be like this as follows::

.widget
    p
        h1
          | Title!
          | {#Price}:
        a(href='#{item.href}') Link

I think this will work and you will get expected results.

Upvotes: 0

Related Questions