I recently noted that some elements on my page randomly weren’t rendered like I expected even though other elements of the same CSS class were rendered correctly. Looking at the code I noticed that Firefox was adding weird tags to link tags:
<h1>
<a _moz-rs-heading="" href="/lists/1?locale=en">Gute Weine</a>
</h1>But not only that. The whole HTML structure was messed up.
The green area highlights a correctly rendered element like it was coded in the plain file. The red area highlights what happened randomly in Firefox.
After a bit of googling it turned out that this false rendering was caused by a mistake from my side: You should not wrap block elements like div and h1 with a link tag. So the HTML really should look more like this:
<li class="list" id="list_19">
<div class="list_content">
<h1><a href="/lists/19?locale=en">Einkaufsliste</a></h1>
<div class="summary">
<a href="/lists/19?locale=en">
4 items in total, 3 items done.
<br />
Last updated 3 days ago
</a>
</div>
</div>
</li>In this code a-tags wrap only text elements. img-tag would be fine, too. Other elements you should avoid in order to prevent rendering you don’t expect.
It looks like amongst a lot of other cool stuff HTML5 will bring us also block-level links.
I'm a Software Developer, currently working at