Page Structure

Contact Us or call 1-877-932-8228
Page Structure

Page Structure

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.

Code Sample:

html5-laying-out-a-page/Demos/html4-layout.html
---- C O D E   O M I T T E D ----
<body>
<div id="header">
	<div id="mainheadings">
		<h1>HTML 4 Layout</h1>
		<h2>The "Old" Way</h2>
	</div>
	<img id="logo" src="Images/logo.png" alt="Logo"/>
</div>
<ul id="mainnav">
	<li>Home</li>
	<li><a href="">Products</a></li>
	<li><a href="">Services</a></li>
	<li><a href="">About</a></li>
</ul>
<div id="container">
	<div id="sidebar">
		<h2>Side Nav</h2>
		<ul id="sidenav">
			<li><a href="">Link</a></li>
			<li><a href="">Link</a></li>
			<li><a href="">Link</a></li>
			<li><a href="">Link</a></li>
		</ul>
		<h2>Partner Links</h2>
		<ul id="partnerlinks">
			<li><a href="">Partner Link</a></li>
			<li><a href="">Partner Link</a></li>
		</ul>
	</div>
	<div id="content">
		<h2>Welcome!</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>
<div id="footer">
	<p>&copy; Webucator, Inc.  All rights reserved.</p>
</div>
</body>
</html>

The above code will render the following (with and without styling): HTML4 Page Layout

An interesting thing about this page is the use of ids to provide meaning (and hooks for CSS and JavaScript) to the <div> tags. We'll come back to this after looking at how we would structure the same page with HTML5.

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.

Code Sample:

html5-laying-out-a-page/Demos/html5-layout.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Layout</title>
</head>
<body>
<header>
	<hgroup>
		<h1>HTML5 Layout</h1>
		<h2>The HTML5 Way</h2>
	</hgroup>
	<img id="logo" src="Images/logo.png" alt="Logo">
</header>
<nav id="mainnav">
	<ul>
		<li>Home</li>
		<li><a href="">Products</a></li>
		<li><a href="">Services</a></li>
		<li><a href="">About</a></li>
	</ul>
</nav>
<div id="container">
	<aside id="sidebar">
		<h2>Side Nav</h2>
		<nav id="sidenav">
			<ul>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
			</ul>
		</nav>
		<h2>Partner Links</h2>
		<ul id="partnerlinks">
			<li><a href="">Partner Link</a></li>
			<li><a href="">Partner Link</a></li>
		</ul>
	</aside>
	<div id="content">
		<h2>Welcome!</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>
<footer>
	<p>&copy; Webucator, Inc.  All rights reserved.</p>
</footer>
</body>
</html>

In the next sections, we will review the differences between the HTML 4 and HTML5 files shown above.

Next