Nesting HTML- anchor tags

Question

Today I was working on a tab navigation for a webpage. I tried the Sliding Doors approach which worked fine. Then I realized that I must include an option to delete a tab (usually a small X in the right corner of each tab).

I wanted to use a nested anchor, which didn't work because it is not allowed. Then I saw the tab- navigation at Pageflakes, which was actually working (including nested hyperlinks). Why?

Answer 1

They must be doing some really crazy stuff with JavaScript to get it to work (notice how neither the parent nor the nested anchor tags have a name or href attribute - all functionality is done through the class name and JS).

Here is what the html looks like:

<a class="page_tab page_tab">
  <div class="page_title" title="Click to rename this page.">Click & Type Page Name</div>
  <a class="delete_page" title="Click to delete this page" style="display: block;">X</a>
</a>

Answer 2

Nested links are illegal

Answer 3

Actually, the code I had pasted previously was the generated DOM, after all JS manipulation. If you don't have the Firebug extension for Firefox, you should get it now.

Edit: Deleted the old post, it was no longer useful. Firebug is, so this one is staying :)

Answer 4

I suspect that working or not working nested links might depend if your browser renders page in strict mode (e.g. XHTML DTD, application/xml+html MIMEtype), or in "quirks" mode.

Answer 5

In spite of nested tags are illegal but writing them using JS will work!, try this:

$('<a>', {
     href: 'http://google.com',
     html: '<a>i am nested anchor  </a>I am top Anchor'
 }).appendTo($('body'))