Laying out a Page with HTML 4 - the "old" way
HTML 4 includes semantic tags that describe the content they hold. For example, the <h1> tag holds a top-level heading. Web developers have (or at least should have) long since stopped using headings for formatting purposes alone. Likewise, using tables for laying out pages has been long frowned upon. Articles like Throwing tables out the window were written back in 2004. However, the alternative to tables, namely divs, is only one step in the right direction. It's a move from misusing a semantically meaningful element (table) to using a semantically meaningless element (div).
HTML5 takes the obvious next step. But before we look at it, let's take a quick look at a page laid out with HTML 4 using divs.
Laying out a Page with HTML5
The HTML5 code below will render the same as the HTML 4 version above. Open html5-laying-out-a-page/Demos/html5-layout.html and html5-laying-out-a-page/Demos/html5-layout-styled.html in your browser to see the pages.
In the next sections, we will review the differences between the HTML 4 and HTML5 files shown above.