Close your tags
This has bitten me a couple times now and I feel like an idiot every time it happens. If you don't close your tags properly and you need to access elements via the DOM, expect trouble in Internet Explorer.
I do most of my testing in Firefox which has been very forgiving and as a result, I'll get to the point where when I switch to test in IE, the browser throws an error and worse, won't even render the page (ah, reminds me of the Netscape 4 days!).
Let's take a look at an example:
<div><span id="test">test</a></div>
<div id="hell">My content!</div>In this very straightforward example, I have a span with an ID that I need to target and then I might have some content after that to target as well. But you'll notice that I accidentally tried to close my SPAN with an A. Now let's see what happens when I make some changes to the DOM:
var el = document.getElementById('test');
el.innerHTML = 'new test';
var el = document.getElementById('hell');
alert(el); // null?I grab my test element and change the text contained within. However, because of the invalid HTML, changing the contents obliterates everything else on the page.
Lesson learned; make sure your HTML is valid!
Conversation
http://validator.w3.org/
This is always my first line of defense whenever I'm debugging CSS or JavaScript. I cannot even begin to calculate how many hours that by itself has saved me.
That's funny because I just scolded an ASP.NET developer for not closing his HTML tags because it was confusing my Javascript.
Expect trouble everywhere! Not only accessing elements via the DOM, but rendering in many browsers!
Amen brother! I place this in the same cluster of face palm errors as misspelling of variable/function names. A quick glance says to ones mind everything is there, but upon close inspection inversed letters hath wrought many needless and desperate code alterations.
Good reminder, Jonathan.
This is what validation is reallyall about. Validate your own code to find errors which will cause you grief down the line. Don't validate to find errors in someone else's code that are causing you no grief at all. :)
I always close everything out of good practice anyways, plus it helps to find elements (<div>'s for example) that have a huge impact on the display that you might've slipped on.
I find that good indentation and spacing in my text editor helps me maintain my tags and tell when I have neglected to close something. Syntax highlighting helps too, as well as a validating editor.
I tried validating www.jeffcroft.com and there were 345323 errors. OK, not really - but I agree with Jeff, and others, and - well - you already know this - the W3C validation tool is a gem.
I have run into this working with other developers. They give me code output from a WYSIWYG and expect me to work the CSS/JS - but when the core of the document is screwed up, it puts everything else out of line. This is why I see validation as something that is so important - it affects the other pieces of the puzzle.
Am I glad I was always taught to close tags, even before (X)HTML. I never knew these problems could exist and now I value that teaching, and of course the common sense that when opening something, you should close it, even more.
What's happening here (and what you didn't really touch upon) is that everything after that span tag became a child node of the tag. Thus, when changing the innerHTMl, poof do all the other child nodes.
This is part of why I love Dreamweaver (and other IDEs like it) - automatic closing tags. And thanks for the reminder - it'll probably save me about an hour within the next week or two.
I highly recommend the Firefox plugin HTML Validator since it validates on every single page load and hence serves as an easy reference as to the validity or otherwise of your code.
Great quick tip... I too use the HTML validator plugin as well as the awesome firebug!
@ Nate K. - Stay away from my site, you. :)
Also: I definitely have to agree with Montoya on the syntax highlighting and proper indentation. It helps a lot!
One thing that is interesting about Python as a programming language is that it has meaningful whitespace. That is to say, you must indent properly, or your code won't validate. This has the practical purpose of not requiring you to "close your tags" (which are actually code blocks like for loops and if statements), because the language knows they are "closed" when you outdent a level.
This drives most people who are new to Python absolutely mad. It gave me fits for quite a while. But I've really come to love it. Most people writing code indent anyway -- why not use that information for something? And, it forces you into a best practice. A lot of things Python does are ways of forcing the programmer into best practices, and I've come to wish HTML and CSS did more of that.
Anyway, the point of all this is that my experience with Python has led me to become a meticulous indenter, even when I'm writing code (like HTML and CSS) that doesn't care whether I indent or not. Turns out, this really helps me in avoiding simple validation errors like unclosed tags and such.
If my indenting is off, then I know I did something wrong. Period.
I'm also going to stick up my hand and recommend the HTML Tidy extension for Firefox (see comment #12 for a link). Not only can you instantly check the validity of your document as you are testing (no need for a round trip visit to the W3C validator site), but it will pick up things the W3C validator misses. just by way of an example, Digg has a script tag that's missing a mandatory type attribute. The FF extension picks it up, the W3C doesn't.
This used to happen to me all the time! I finally just started closing my tags before filling them (or using an editor that does it for me like Nathan L. says) Not 100% fool-proof, but pretty close! I also put comments at the end of block level elements to help me find the culprits when I do miss a closing tag.
how can you omit close tag in html?! You don't omit them in php (?>) , asp (%>) or other langs!!!
@CTAPbIu_MABP: Actually, there are instances where it's suggested to not close your PHP tags. I've only come across it while reading Zend articles about bootstrapping and pure OOP MVC PHP classes. I still do it anyway though.
++ for the Tidy HTML Validator. Change the settings to show warnings as well as errors and your code will look much nicer. (I don't use the auto-fix feature though, it uses different indentation/spacing than I do).
do you have any codes that detects if the TAG has a CLOSE TAG?
may i pls?
yeah! bling bling men...abz'