Actually what would really be neat is if it uses an included library if one is linked (e.g. jQuery $(function(){...});) and the code shown wrapped in an anonymous function otherwise (function(){...})();
The 'autorun Javascript' at the bottom would be better of in a directly run anonymous function to avoid polluting the global scope with an 'autorun' function. Also, the 'On page loaded' example is not really needed. Any Javascript included at the very last in the page will run automatically on 'page load'.
Why do so many people still use redundant HTML tags?
The opening and closing body and head tags aren't needed, nether is the closing html tag. It doesn't make that much difference to the page as a whole but it adds another level of indenting to your code and makes it more complicated than it needs to be.
The president of the Federation in Star Trek VI said it best:
"Let us redefine progress to mean that just because we can do a thing, it does not necessarily mean we must do that thing."
Other than the initial level of indenting, which is basically a non-issue for most people I suspect, there just isn't any reason to omit tags like this.
At the same time, they make the markup clearer, and help a reader quickly delineate between two important sections of the document. Therefore, since they provide at least a very small positive benefit, it is perfectly reasonable, IMHO, to include them.
I'm not sure I agree (I too did not know they weren't required any more).
We frequently see things like JavaScript pulled in at the bottom of documents -- the head and body long since stopped having functional impacts, and all they seem to do is make you feel guilty about doing things it seems it's not only pragmatic but perfectly OK to do now.
I guess omitting the outermost HTML tags would disturb me slightly if one wants to keep XML-ish. But then it's always bugged me that XML kind of assumes the "file" has no semantic significance.
Do you need to delineate explicitly? There's a block of meta tags followed by a block of content tags. Quite possibly with whitespace inbetween. I think it's fairly obvious.
Probably the most accurate answer to your question is: Because so many people don't know they are not required. (I certainly was in that category until about 5 minutes ago)
But even now knowing that info... I will continue to use them. Yes, it adds another level of indenting... but personally I prefer that. Text that is without a left margin tends to be a little harder to read. I also like to have a visual grouping of the elements. I think I would disagree that it "makes it more complicated" to have those tags.
Can I still take the hipster points if I never knew that the second html tag was required? I just always assumed that the new spec rolled the doctype and html declaration into the same thing.
Perhaps my HTML5 introduction pitched it that way, or perhaps I just jump to conclusions too easily, but nice to know I've gotten it right, even if only by accident.
Yup. I write all my personal web pages like this now. It's far more efficient, simply because it's less stuff to forget, easier to remember, and much quicker to type.
How often are you actually typing </html>, <head>, and <body> that it actually makes you less efficient? This reminds me of all the ASI discussions that have been going on lately.
Just so that it doesn't make any difference to you or your presentation doesn't mean that you should avoid it. It is a best practice to include them and semantically right thing to do. It gives a structure to your document and defines what your document is about.
If it doesn't make much difference then you do it your way and I'll do it mine. What difference does it make? Plus, you can choose to indent however you wish so that's not much of a reason.
Personally, I just like the idea of opening and closing tags that clearly define what's going on in the markup.
Would love to see optional inclusion of the following:
- Bootstrap (1,2)
- jQuery UI
- YUI
- skeleton framework
- facebook meta tags
- viewport toggling
- foundation framework
- google analytics code (minus acct. #)
Remember to have a backup for the jQuery googleapis call, you need to have this right after it: <script>window.jQuery || document.write('<script src="js/libs/jquery.x.js"></script>')</script>
