Firebug 'unclosed tags'
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.
will look like this: <a href="#">Unclosed Tag </a>
<a href="#">Unclosed Tag
Notice that after the 'Tag' there is an extra white space.
Here is where my pattern all goes to 'crayons' :)
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:
So my question is, is there something I can do to my firebug settings to see where there is an unclosed html tag?
Help would be much appreciated :)
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:
ctrl + shift + a
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.
Also, I wish there was a 'tool' where I could insert 'messy' source code and it would output 'properly' indented clean source code.
Is there a such 'tool'?
Yep! HTML Tidy.
Any decent text editor should be able to re-indent the code for you, but they generally cannot clean up bad markup.
Originally Posted by AutisticCuckoo
I just realized that 'cleanup' command for the html validator has an option that allows you to indent element content :)
Thank you for leading me in the right direction :)