The first component we will build is our base HTML file, app.html. We will keep our HTML as clean as possible. It should contain only markup. There should not be any styling or blocks of script mixed in it. Keeping markup, style, and behavior separated will make your applications easier to debug and maintain. For example, if there is a problem with the way something looks, we will know the problem is in the CSS file and not the JavaScript file. Another benefit is that you can completely restyle the user interface of your application by changing the CSS without ever touching its functionality.
Here is the markup for our base HTML file. All it does is include our CSS and JavaScript as well as the jQuery library, and defines a simple body structure that most of our applications will use. It is a good place to start for the applications we will be writing.
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link href="app.css" rel="StyleSheet" />
<script src="lib/jquery-1.8.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="app">
<header>App</header>
<div id="main"></div>
<footer></footer>
</div>
</body>
</html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
One of the major differences between HTML5 markup and previous versions of HTML is the document type declaration this has been greatly simplified. As you may recall, doctypes before HTML5 were very verbose and impossible for mere mortals to remember. They looked something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Now meet the new and improved HTML5 document type declaration. It's simple, it's elegant, and best of all it's easy to remember:
<!DOCTYPE html>
Another difference you may notice are the <header> and <footer> elements. These are new semantic elements in HTML5 that are essentially the same as <div> elements. HTML5 actually has a whole array of new semantic elements that are designed to give HTML markup more meaning than just wrapping everything in a <div> tag.
Since we are building applications here and not writing content pages, we won't be focusing on these semantic elements too much. Most of the time we will use the plain old <div> elements. But just to familiarize you with them, here is an overview of some of the most useful new semantic elements:
<article>: Defines an article in the document<aside>: Defines content aside from the other page content<footer>: Defines the footer for a section in the document<header>: Defines the header for a section in the document<nav>: Contains page navigation links<section>: Defines a section in a document
A few elements and attributes that existed in previous versions of HTML are now not present in HTML5. These are mostly elements having to do with layout and fonts, including <big>, <center>, <font>, <strike>, and <u>. Obsolete elements such as <frame> and <applet> are also out.
Now let's take a look at the contents of the <body> element in our markup. First there is a <div id="app"> element. This will wrap the application's entire markup. Other markup, such as site navigation or anything else not related to the application, can go outside this element.
Inside the app element we have three more elements. Here we use a couple of the new semantic elements. First we have a <header> element in our application that will contain the name of the application, such as a title bar (not to be confused with the <title> element in the document <head> section). The <div id="main"> element is where the markup for the main part of the application will go. We add a <footer> element below it that will be used like a status bar to display the status of the application.