Firefox closes block-level links when encountering HTML5 elements

By: Oli Studholme (@boblet), 2009-09-02

Bugzilla: #514122

Problem

In HTML5 <a> is now able to wrap block level elements. This works as expected for HTML4 elements (<div> etc). However when <a> wraps a new HTML5 element, Firefox closes the HTML5 element and link when it encounters a contained block-level element, then wraps the next element’s content in a link, then following block-level elements in a single block-level link.

Expected behavior with <a> wrapping <div>

<a> wraps all children elements

<div>
  <a href="/">
  <div class="group">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  </a>
</div>

<a> causes <hgroup> and link to be closed prematurely

Other now uncontained first level children of the link are then wrapped in generated links

<div>
  <a href="/">
  <hgroup>
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </hgroup>
  </a>
</div>

DOM

<div>
  <a href="/">
  <hgroup>
    </hgroup></a><h1><a _moz-rs-heading="" href="/">Title</a></h1>
<a href="/">    <h2>Subtitle</h2>
  
  </a>
</div>

Adding raw text to show the link is closed by a block-level child element of the HTML5 element

I’ve also added an additional subtitle, to show more DOM weirdness :) Now the <h1>’s content is linked (not block-level link), and subsequent block level elements are correctly wrapped in a single block level link.

<div>
  <a href="/">
  <header>text
    <h1>Title</h1>
    <h2>Subtitle</h2>
    <h3>Subtitle 2</h3>
  </header>
  </a>
</div>

DOM

<div>
  <a href="/">
  <header>text
    </header></a><h1><a _moz-rs-heading="" href="/">Title</a></h1>
<a href="/">    <h2>Subtitle</h2>
    <h3>Subtitle 2</h3>
  
  </a>
</div>