HTML is very forgiving. Its forgiveness is one of the main reasons the web became so successful, as the bar is set very low. You can just throw some text and HTML on the page, and something will display. This is very different than programming, where the bar is pretty high. You throw some text at a compiler, it'll give 954 fatal errors.
Of course, its not HTML itself that’s forgiving, it’s the browsers. The browser is fixing your crummy HTML behind the scenes. Forgot a </table>? No problem, the browser guesses where to add it. While it may guess wrong, its better to display the page wrong, than to not display it at all.
Most web pages on the internet take advantage of this. We don’t make our pages perfect, we just get them to display correctly. As soon as it looks correct, we're done, and we don’t worry about how much work the browser is doing to fix up our work.
This auto-fixing, as I call it because I don’t know the technical term, can lead to some quite subtle bugs. When the browser guesses wrong, its difficult to know how the browser fixed your HTML, making it difficult to know where you went wrong. Validation would work in many cases, but then I'd have to fix the other 954 validation errors, which I'm not really interested in doing.
Enter Firebug. Firebug can show you the HTML, after the browser fixes it! Nice. What wasn't so nice was what the browsers were doing to my HTML.
First, what I did wrong. The header and footer of my site is table based, but the page content I'm creating is styled Div's. I forgot to put the <tr><td> and </td></tr> to complete the table for the layout.
Here is the HTML:
<table>
<div class="page">
<h1>title</h1>
<div class="content">content</div>
<div class="morecontent">more content</div>
</div>
</table>
The problem I was having was that the CSS was not styling this page properly. The H1 tag and Div.content were style correctly, but not Div.morecontent.
Firebug to the rescue! Take a look at how the browser fixed my HTML:
<table><tr><td>
<div class="page">
<h1>title</h1>
<div class="content">content</div>
</div></td></tr>
<tr><td><div>
<div class="morecontent">more content</div>
</div>
</td></tr></table>
Huh?! It chopped my Div.page in half, and created 2 rows in my layout table, instead of one! Simply adding the <tr><td> and </td></tr> fixed it, but that is one unexpected fix.
Item of the Day: American Themes 117-V36 - Bathroom Vanity by Fairmont Designs
