Question

I’ve been playing with html5 and I’ve noticed that sometimes the page displays my html differently in the dom (viewed through firebug) than it actually appears in my html files. The result is an element being replicated several times in different ways. I only notice this on nested elements.

For example:

<a href="#" class="block top-middle">
  <h5 class="title-top">TITLE</h5>
  <img src=""path/to/img.png" alt="TITLE" />
</a><!-- .top-middle -->

Is occasionally displaying as:

<a class="block top-middle" href="#"> </a>
<h5 class="title top">
  <a class="block top-middle" _moz-rs-heading="" href="#">TITLE/a>
</h5>

<a class="block top-middle" href="#">
  <img alt="TITLE" src="path/to/img.png">
</a>

I’m not really sure what the solution is but I wanted to know if anyone else has experienced glitches like this. I’ve sifted through every bit of my code and I can’t find anything broken and the pages it happens on validate without any problems. It’s especially frustrating because it only happens once in a while.

thanks!

**edit also, I know using anchor tags like this is not valid but as far as I have been able to tell with what I’ve read about html5 it is valid wrap content inside an anchor*

Answer 1

The browser/rendering engine was made before HTML 5 existed, so it is obeying the rule that anchors which are inline elements cannot contain h5s, which are block level.

This makes perfect sense. I don’t think you can really do anything other than wait and see if the rendering engine adopts the HTML 5 rule that allows anchors to nest block levels such as h5s.

EDIT: I assume you are using the HTML 5 Doctype, although it probably won’t have much bearing.

EDIT #2: This has been filed as a bug, even though I personally think it shouldn’t be. A way around this seems to be wrapping the h5 in a div.