HTML tag nesting problems

Question

Edited: I thought this is a pug problem, but not.

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

An interesting related question: https://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — Dan, Oct 06 '17 at 18:58

score 1 · Answer 1 · answered Oct 06 '17 at 19:11

1

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>

answered Oct 06 '17 at 19:11

Quentin

914,110
126
1,211
1,335

why does HTML forbid nested interactive elements? are there usability problems? – gaurav5430 May 29 '20 at 17:18

score 0 · Answer 2 · answered Oct 06 '17 at 18:49

0

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.

answered Oct 06 '17 at 18:49

sfy

2,810
1
20
22

score 0 · Accepted Answer · answered Oct 06 '17 at 19:03

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

HTML tag nesting problems

3 Answers3