“Inspect element” is not the same as “View source”
Tools like Firebug for Firefox, WebKit’s Web Inspector and Opera’s Dragonfly are indispensible tools for front-end Web developers, letting you view the DOM as the browser sees it.
Take this invalid HTML snippet created by a hypothetical web developer, for example:
<h1>The title</h2> <p>The first sentence.<strong>The second sentence.</p></strong>
h1 is closed by an
</h2> tag, and the closing
strong tag is on the wrong side of the closing
p tag. Two mistakes that can happen when you’re typing HTML by hand. This is what you will see when you view source in your browser. But what if you bring up a developer tool?
Firebug tells you that the DOM looks like this in Firefox:
<h1>The title</h1> <p>The first sentence.<strong>The second sentence.</strong></p> <strong></strong>
Hmm. Where did the
</h2> tag go? And how did the
</strong> tag end up in the right place? Error correction.
What about the Web Inspector in Safari then? It shows this:
<h1>The title <p>The first sentence.<strong>The second sentence.</strong></p> <strong></strong> </h1>
Whoa! Everything is in the
h1? Not what the source HTML says, and not the same as Firefox either. Again, error correction.
Ok, let’s take a look in one more tool, Opera Dragonfly:
<h1>The title</h1> <p> The first sentence. <strong>The second sentence.</strong> </p>
Hey, that looks just like what the hypothetical developer probably intended to write. Yet another example of error correction.
Different browsers have different DOMs
Note that the DOM is different in all three browsers.
There are two lessons to be learned from this:
- DOM inspectors are not “View source”
- Browsers use different error correction (at least until they all fully support HTML5), which is one of the reasons Validation matters.
- Previous post: Validation matters
- Next post: Is hiding text with CSS to improve accessibility bad for SEO?