Hey guys I have taken notice that firebug automatically closes tags for you when inspecting an element. Also, I noticed when sometimes a tag is not closed an extra white space is added e.g.
<a href="#">Unclosed Tag
will look like this: <a href=“#”>Unclosed Tag </a>
Notice that after the ‘Tag’ there is an extra white space.
Here is where my pattern all goes to ‘crayons’
<a href"#">
Unclosed Tag
Here is the output of this:
<a href=“#”> Unclosed Tag </a>
But also, this looks the same when there is a closed tag like so:
<a href="#">
Closed Tag
</a>
So my question is, is there something I can do to my firebug settings to see where there is an unclosed html tag?
Firebug probably doesn’t work with the source code, but with the DOM tree. There are no tags in the DOM tree, only nodes. Use the HTML validator to find missing required end tags.
Like AutisticCuckoo said, firebug attempts to fix your bad code in order to get a proper DOM tree structure and to work properly, otherwise it would seriously screw things up.
You should use the W3C validation service to locate your invalid markup, firebug wasn’t made for that purpose. If you have web developer toolbar installed you can instantly validate your page using the keyboard shortcut:
It’s not that it’s attempts to ‘fix’ bad code. What you see in Firebug is the resulting DOM tree after the source code has been parsed. Any ‘fixes’ happen in the HTML parser when it generates the DOM tree.
Firefox displays tags as a way to visualise the DOM tree. It simply writes start tag + content + end tag for each node, no matter what the original source code looked like.
It’s the same with Opera’s Dragonfly and any other DOM-based tool.
