facebook google plus twitter
Webucator's Free HTML5 Tutorial

Lesson: Laying out a Page with HTML5

Welcome to our free HTML5 tutorial. This tutorial is based on Webucator's HTML5 Training for Web Developers course.

This lesson begins with a quick review of a basic HTML 4 page and then dives right in to HTML5 code. We're not going to spend time reviewing history or discussing the hows and whys here, but we'll come back to that later. First, we want to get you looking at some code.

Lesson Goals

  • Learn how to lay out a page with HTML 4 (the "old" way).
  • Learn how to lay out a page with HTML5.
  • Learn the differences between the HTML5 and HTML 4 structures.
  • Learn about the new HTML5 Doctype.
  • Learn about the simpler script and style tags used in HTML5.

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.

New HTML5 Structural Tags

We mentioned that we used meaningful ids for meaningless divs in the HTML 4 layout. However, these ids were only meaningful to us. The browser doesn't have any awareness of their meaning. HTML5 fixes this. Many of the structural tags coincide (and not coincidentally) with the most common values existing web pages use for the id and class attributes. Opera researched the most common class values from more than 2 million URLs. The table below shows the 200 most popular (with some gaps). Most Commonly Used Class Values

The highlighted rows show class names that have corresponding structural elements in HTML5:

  1. header - holds the header content of the document or a section in the document
  2. footer - holds the footer content of the document or a section in the document.
  3. menu - deprecated in HTML 4. Brought back to life in HTML5 to hold form controls (think of the File menu on a desktop application).
  4. nav - holds navigational links.
  5. section - holds a section of the document.
  6. article - holds an article.

The header, footer, and nav elements are shown in the demo above. We'll cover section and article later in the course.

Notably missing from the popular class names is aside. However, both left and right were in the top 25. "Aside" is a better name for an element as it catches the semantic meaning without implying page position.

A couple of notes on other popular class names in the list:

  1. content (number 6) and main (number 12). When designing pages, we often break them up into header, footer, one or two side columns and a main content area. It is very helpful to be able to section off this main content area for CSS styling and for accessibility purposes (e.g., Skip Navigation links). However, for some reason there is no HTML5 element corresponding to this area.
  2. small (number 14). The <small> tag is not new to HTML5, but it carries new significance. It is used to mark up the "small print" or side comments. The <big> tag, on the other hand, is deprecated in HTML5.

Page Simplification

HTML5 has made some simplifications to the page:

  1. The new doctype is simply: <!DOCTYPE HTML>. The doctype is specified to ensure that browsers render the page in standards mode; the statement is case-insensitive.
  2. The character set is simply declared with: <meta charset="UTF-8">. This tells the browser to use the UTF-8 character encoding, ensuring that the browser won't display characters as gibberish.
  3. The type attribute is no longer required on <style> and <script> tags. The default types are CSS and ECMAScript, respectively.

Converting an HTML 4 Page to an HTML5 Page

Duration: 15 to 25 minutes.

In this exercise, you will convert a basic HTML 4 page to an HTML5 page. The CSS documents have already been created for you, such that, when you're finished, your HTML5 page should render exactly like the HTML 4 page.

  1. Open html5-laying-out-a-page/Exercises/html4-layout.html.
  2. Save the file as html5-layout.html.
  3. Turn the page from an HTML 4 page into an HTML5 page. Make sure to change the stylesheet reference to point to style-html5.css.
  4. The solution should look like the screen shot below: HTML 4 to HTML5

Challenge

See if you can get your HTML5 page to look like the screen shot below without modifying the HTML at all: HTML5 Layout

Solution:

html5-laying-out-a-page/Solutions/html5-layout.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Layout - Exercise</title>
<link href="style-html5.css" rel="stylesheet">
</head>
<body>
<header>
	<hgroup>
		<h1>HTML5 Solutions</h1>
		<h2>HTML5 Products and Services</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="content">
---- C O D E   O M I T T E D ----
</div>
<aside id="partners">
	<div>
		<h3>Partner 1</h3>
---- C O D E   O M I T T E D ----

	</div>
</aside>
<footer>
	<p>&copy; Webucator, Inc.  All rights reserved.</p>
</footer>
</body>
</html>

Note that we will further improve this page with section and article elements later in the course.

Challenge Solution:

html5-laying-out-a-page/Solutions/style-html5-challenge.css
body {
	font-family:tahoma;	
}

header {
	display:block;
	padding:0px 0px 5px 0px;
	margin:0px 20px;
	height:80px;
	width:1030px;
	float:left;
}

header hgroup {
	display:block;
	float:right;	
}
---- C O D E   O M I T T E D ----
header #logo {
	float:left;
}

>nav#mainnav {
	display:block;
	clear:both;
	width:1030px;
	height:14px;
	margin:10px 0px 0px 20px;
	border-left:3px solid #ccf;
	border-bottom:3px solid #ccf;
	border-right:3px solid #ccf;
	padding:5px;
	background-color:#eee;
	font-size:small;
	letter-spacing: 4px;
	word-spacing:20px;
	text-align:center;
}

nav#mainnav ul {
	margin:0px;
	padding:0px;
}

nav#mainnav li {
	display:inline;
}

#content {
	margin:0px 20px;
	float:left;
}
---- C O D E   O M I T T E D ----
#content div h2  {
	clear:both;
	float:right;
	font-size:xx-large;
	color:#006;
}

#content>div {
	clear:both;	
}

#content div div {
	padding:10px;
	margin-bottom:10px;
	width: 700px;
	border:1px solid #006;
	font-size:small;
}

aside#partners {
	width: 275px;
	margin:40px 20px;
	display:block;
	float:left;
	background-color:#eee;
	border:3px solid #ccf;
}

aside#partners div {
	padding:5px;
	font-size:x-small;
}

aside#partners h3 {
	margin-bottom:0px;
	font-size:large;
	color:#006;	
}

footer {
	display:block;
	clear:both;
	margin:10px 20px;
	border-top:1px solid #006;
	font-style:italic;
	width:1040px;
	text-align:right;
}

a:hover {
	color:#f60;
}