Once upon a time, the humanity had a great idea: use tables to build their site layouts.
But no, that was not a great idea.
When we use tables for layout, we’re messing our HTML code and ignoring one of our best web development friends: CSS.
is not an element made to build layouts. We have it to put tabular data. Yea, like a data grid or something like that.
So, smarter humans had a better idea: clean the mess that layout tables do and use the element that was made to build layouts: <div>. They created a concept called “Tableless” (read more).
That was really cool but, unfortunately, there were people who got traumatized with tables and then decided to don’t use it anymore, even if it was for tabular data. So they started to replace all their tables with divs: they misunderstood the Tableless concept.
<table> is not an invalid or deprecated element (like <marquee> is). It has its meaning and use. Like <div>s are for layout, <table>s are for tabular data only. Don’t mess the ideas and don’t be afraid of using tables where they can (and should) be used. Then show this post to those who tell you that tables are ugly.
Insert <script>s at the top of a page (at <head>, generally) is so 90’s. It’s not correct and may cause you problems. The most reason for it is that the DOM is not yet fully loaded (ready) when the script runs from the <head> element.
Maybe this explain why you get errors when you try to access any element of the <body> from the scripts above (when you’re not doing it through a “load” or “domready” event, of course).
Then you try a JavaScript library like jQuery: it teaches you that you must continue using scripts at the top and you must use the “domready” event to workaround this. Good, things will work, but… it’s really bad:
- Your page content will have to wait for all scripts to be loaded and executed to finally be shown. (thanks for the point, Wilfred Nas)
- You will aways depend on “load” or “domready” events to make your code work properly.
So, to get rid of these problems, the best way to attach scripts to your page is by adding them to the end of your <body> element:
...
<script type="text/javascript" src="path/to/the/script.js"></script>
<script type="text/javascript" src="path/to/another/script.js"></script>
</body>
</html>
You may find it weird, but it’s completely valid and is also recommended by Yahoo and many other experienced web developers.
Keep in mind that the most important layer of your page is the content, and the user might see it independently of any extra behavior (JavaScript).
Tell your friends about it.