CODEWITHSUNDEEP
javascripthtml
sfy
sfy

Reputation: 3238

HTML tag nesting problems

Here is the code

- var list = [1, 2, 3, 4, 5]
.navbar.clearfix
  a.logo(href="#") Logo
  div.links
    each i in list
      a(href="#")= 'Link ' + i
        .sub-menu
          each i in list
            a(href="#")= 'Link ' + i

The problems are the .sub-menu is not in the a element, and there is an extra blank 'a' in .sub-menu.

Is it possible to create a multi level iteration in pug? Thanks

Upvotes: 0

Views: 857

Answers (3)

Quentin
Quentin

Reputation: 943615

HTML forbids nesting interactive elements. You cannot place a link within another link.

The tranditional markup for a series of menus with submenus is nested lists:

<ul>                  <!-- Top level menu -->
    <li>
        <a href="...">     Top level link </a>
        <ul>          <!-- Sub menu -->
            <li>
                 <a href="..."> Sub menu link </a>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 1

Deepak Kamat
Deepak Kamat

Reputation: 1980

There are some restrictions of what you elements you can put inside of some elements. You can't have a div inside of a p element.

This is to ensure the markup remains as semantic as possible. Who would need a DIV element inside of a PARAGRAPH? Even in the general sense we don't see any meaning of having a div in a p, div is a block level element and a element can only contain elements which are not initially block elements. I've interestingly found that you can have 1 level of nesting of DIV in an anchor element and it will work, but other than that it will break.

Use span element inside of an anchor element and then use CSS to make it a block level element, the nesting should work completely fine with span inside of an anchor element.

This document may be helpful in understanding which elements plays well with which ones - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content

Upvotes: 0

sfy
sfy

Reputation: 3238

I've found that this is not an issue of pug, but behaviour of browsers.

code like this

<a>11
  <div>22
    <a>33</a>
  </div>
</a>

won't nest as expected. At the moment, I replace tag a with div and emulate links with css. Still curious about this.

Upvotes: 0

Related Questions