In this chapter, we will cover:
Setting up an HTML5 test area
Using the
headertag for logos and site titlesCreating a table of contents using the
navtagUsing
sectiontags to structure areas of a pageAligning graphics using the
asidetagDisplay multiple sidebars using the
asidetagImplementing the
footertagApplying the
outlinealgorithmCreating a stylish promo page in HTML5
"Who dares, wins." - unknown
Don't listen to the naysayers: Many aspects of HTML5 (no space) are here, ready for us to use. Despite what some people might think, there's no far-flung date at which time you can start using this collection of new technologies. The truth is, the next generation of web markup isn't a distant dream on the horizon — it is here now, ready to explore and use.
No website can exist without at least some simple HyperText Markup Language. This open technology is that important. If you've been using HTML to create and publish websites and applications for years, you might feel as though you've mastered the language by now. You already know the benefits of semantic markup, separation of content, presentation and behavior, and are well versed in accessibility concerns. Things might be feeling a bit dull and boring. You're ready for a new challenge.
Or perhaps you're a young developer building your first website and need to know the ins and outs of using the latest and greatest technologies and have an eye to the future of web development.
Either way, your path is clear: Building on your existing HTML and related technology coding abilities, this book will push your skills to the next level and quickly have you creating amazing things HTML was never capable of before.
If you're feeling complacent, read on. The truth is there has never been a more exciting time to be a web developer. Richer interfaces, the ubiquity of the Internet, and the rise of mobile devices are just the kind of new challenges for which you're looking.
Fortunately, HTML5, a liberal helping of Cascading Style Sheets, and a dash of JavaScript, rise to meet those new challenges. The latest innovations in web development make this a new golden age for online publishers. After what was a lull for many of us, we are now quickly discovering that developing for the web is fun again! After all, HTML5 represents evolution — not revolution.
Over the course of several successful high-profile client projects, I've used a custom JavaScript methodology to deploy aspects of HTML5 and still support older browsers, including Microsoft Internet Explorer 6.
In the recipes contained within, you'll learn this powerful methodology and how to use many of the still developing HTML5 standards and features in a real-world, live production environment.
When we develop with HTML5, we take the basic principle of semantic naming (naming things what they are instead of naming things how they appear) to a whole new level. This is the key factor that makes HTML5 different from all of its predecessors. Throughout the course of this book you will find yourself rethinking and optimizing many of your code-naming conventions.
Though the HTML5 proposed recommendation from the Web Hypertext Application Technology Working Group (WHATWG) is not slated for full implementation until 2022, thanks to forward-thinking browser manufacturers, there is no reason you cannot start using it now and reap the benefits of better semantic naming, enhanced accessibility, and much, much more.
So let's get cooking!
In this chapter, we will show you how to set up your development environment including using the appropriate DOCTYPE and which browsers to utilize, and how to use specific new tags including:
Finally, we will put all those elements together to create a stylish professional promo page all with HTML5.
If we're going to build new and exciting projects using HTML5, we need to set ourselves up for success. After all, we want to ensure that what we build will display and behave in a predictable way for ourselves and our clients. Let's build a test suite with a code editor and at least one web browser.
There are a few things we need to get started. At minimum, we all need a code editor and a browser in which to view our work. Seasoned professionals know we really need an array of browsers that reflect what our audience uses. We want to see things the way they do. We need to see things the way they do.
Many web developers say they're capable of writing code using nothing but plain text software like Notepad for Microsoft Windows or TextEdit for Mac OSX. That's great, but despite the bragging, we don't know a single web developer who actually works this way day in, day out.
Instead, most use some sort of development application like Adobe Dreamweaver (available for Windows and Mac) or Aptana Studio (available for Windows and Mac and Linux) or Coda (my personal preference, which is Mac only) or TextMate (also Mac only).
Let's start by downloading at least one of these applications:
Adobe Dreamweaver: http://adobe.com/products/dreamweaver
Aptana Studio: http://aptana.com
Coda: http://panic.com/coda
TextMate: http://macromates.com
Application icons for the most common web editors are shown here:
In order for the code we create to render properly, we're going to need a web browser — probably more than one. Not all browsers are created equal. As we will see, some browsers need a little extra help to display some HTML5 tags. Here are the browsers we'll use at a minimum.
If you use OSX on a Mac, Apple Safari is already installed. If you're a Microsoft Windows user, Internet Explorer is already installed.
If you use a modern mobile device like an iPhone or Android for development, it already has at least one browser installed too.
Since we'll do our actual coding on the desktop, let's get started by downloading a few browsers from the following locations. Note: Microsoft Internet Explorer is PC only.
Apple Safari: http://apple.com/safari
Google Chrome: http://google.com/chrome
Mozilla Firefox: http://getfirefox.com
Microsoft Internet Explorer: http://windows.microsoft.com/en-US/windows/products/internet-explorer
Application icons for the most common desktop web browsers are shown here:
Why do we need more than one browser? Two reasons:
These applications have different rendering engines and interpret our code in slightly different ways. That means no matter how valid or well intentioned our code is, sometimes browser behavior is unpredictable. We have to plan for that and be flexible.
We can't always predict which browser our audience will have installed and on which device so we need to be one step ahead of them as developers to best serve their needs as well as our own.
Luckily, Safari and Chrome use the same WebKit rendering engine. Mobile Safari for iPhone and iPad, as well as the web browser for Android mobile devices, all use a version of the WebKit rendering engine also.
I just wanna tell you how I'm feeling. Gotta make you understand: Microsoft has changed and updated its Internet Explorer rendering engine named Trident several times over the years, making our lives as developers quite difficult. We often feel like we're aiming at a moving target. With Internet Explorer 10 on the horizon, it appears that won't change any time soon.
Camino (Mac only) and Opera (for Microsoft Windows, Apple OSX, Linux, and mobile devices) both produce excellent alternative browsers that support many of HTML5's features. Consider adding these browsers to your test suite as well.
Camino: http://caminobrowser.org
Opera: http://opera.com
Application icons for the Camino and Opera web browsers are shown here:
Now that we have a development environment and more than one browser, let's create some code!
Note
Progressive Enhancement
We're going to build our page using the concept of progressive enhancement, which means starting with plain old HTML for markup, then layering CSS for presentation and lastly adding a touch of JavaScript for behavior. One of the best analogies we've heard is that basic HTML is like black and white TV. Adding CSS is like adding color and adding JavaScript is kind of like adding high definition.
"The
<header>element represents a group of introductory or navigational aids. A<header>element is intended to usually contain the section's heading (an<h1> - <h6>element or an<hgroup>element), but this is not required. The<header>element can also be used to wrap a section's table of contents, a search form, or any relevant logos." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
The first thing you'll notice about HTML5 is the DOCTYPE. If you're a veteran of web development, you'll be glad to know we no longer have to use such long, convoluted DOCTYPEs as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5 eliminates the need for Strict, Transitional, and Frameset DOCTYPEs. Actually, it eliminates the need for DOCTYPES altogether. Without one, older versions of Internet Explorer slip into Quirks mode and no one wants that. Instead, we can use the simple:
<!DOCTYPE html>
Finally, one DOCTYPE to rule them all.
Let's start with a basic bare bones page structure with which we should all be familiar:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> </body> </html>
Quotes were necessary to create valid XHTML, but because HTML5 is not coupled to XML, those are optional in the HTML5 specification. However, the author would recommend quoting attributes whenever possible.
Keen eyes will also note the <meta name="viewport" content="width=device-width, initial-scale=1.0">. That isn't going to do much for us just yet, but will be vital when previewing your work on mobile devices.
Closing our tags is optional as well. Though it's a good practice, you should weigh whether it's worth the development time and added page weight.
You'll also notice a conditional comment checking to see if the user is using Internet Explorer. If so, we tell the browser to execute Remy Sharp's "HTML5 Shiv" script, which simply tells IE to behave: <article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <ruby>, <section>, <source>, <summary>, <time>, <video>, <wbr>.
Darn that Internet Explorer. It lacks discipline.
We're going to create a single-page professional web portfolio for a young developer named Roxane. Let's say that Roxane is a talented web developer with a lot of skill, just like you. She deserves a professional single-page portfolio site worthy of her talent and so do you. Feel free to substitute your information for hers in the following examples.
Let's start by using the first new <header> tag to define the topmost area of our overall page.
While we're at it, we're going to incorporate the new <hgroup> tag to contain the headers in our new <header> tag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> </body> </html>
"The
<hgroup>element represents the heading of a section. The element is used to group a set of<h1> - <h6>elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
The new <header> is where we often store things like logos, company slogans, and other types of branding usually associated with mastheads. It is often the first block-level element on an HTML5 page and is commonly used for headings like <h1>, <h2>, and so on. The result is a more semantically rich code base from which to build.
Before HTML5, all <div>s were given equal weight by the browser software as well as by leading search engines like Google, Yahoo!, and Bing. But we know the intent of <div id="header"> just isn't as obvious as the new <header>. Instead, the HTML5 specification prefers to name things what they actually are. Now, HTML5 recognizes that not all <div>s are created equal by replacing some with more semantic terms like the new <header> and <nav> and <footer> for more data richness.
Interestingly, the masthead isn't the only place you can use the new <header> tag. In HTML5, it's also perfectly acceptable to use the new <header> tag inside just about any block-level element.
The new <header> tag does most often appear at the top of a web page, but it doesn't always have to appear there. Remember that semantically, the new <header> tag is defined by its contents, not its position.
We will continue to reference the WHATWG's HTML5 Draft Standard at http://whatwg.org/specs/web-apps/current-work/multipage, as it is an essential guide to the HTML5 evolution.
"The
<nav>element represents a navigation section where only sections that consist of primary navigation blocks are appropriate for the<nav>element." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
Like the new <header> tag replacing outmoded naming conventions like <div id="header">, we can also replace <div id="nav"> with the simple new <nav>. Makes much more sense, doesn't it? We think so too.
We're going to add the primary navigation bar like we so often see on web pages. This enables users to easily maneuver from page to page or, in this case, within the same page. Roxane wants to showcase her biographical information, work samples, and ways to contact her, so we'll use those as our anchors.
Let's create our navigation bar using the two most typical elements:
1. An unordered list
2. Accompanying hypertext links
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> <nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Work">Work</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> </body> </html>
Previously, we would have used something like <div id="nav"> to store our navigation list in it. But with HTML5, the new <nav> tag is all that's necessary.
When we apply CSS, we'll float those list items and make them appear more like a traditional web navigation bar.
The beauty of naming things more semantically is that now portions of our pages do exactly what we think they should do — a <header> contains heading information, <nav> contains navigation aids, and so on. Eschew obfuscation.
Remember also that more semantic naming can usually lead to shorter, leaner code. After all, <nav> is certainly shorter than the common <div id="nav">. And it makes more sense to both humans and machines. That means less for us to write, which saves us time. That also means less code for the browser to interpret and display, which saves download and render time. It also gives meaning and structure to the content, similar to the way an outline provides meaning and structure to a research paper. Everybody wins.
Since it's a still-evolving standard, you're encouraged to contribute to the evolution of HTML5 and help shape the language. Join the WHATWG's <help@whatwg.org> mailing list to make suggestions and ask questions. Instructions for signing up are at: http://whatwg.org/mailing-list#help.
"The
<section>element represents a generic document content block or an application block. A<section>, in this context, is a thematic grouping of content, typically with a heading. " - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
Let's add the new <section> tags for each of the primary areas of Roxane's single-page portfolio site. These <section>s will then be used as containers, each with a heading and generic content that will contain her biographical information, work examples, and contact methods.
The use of the new <section> tag can be tricky. There are a number of things it isn't, but only certain things that it is.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> <nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Work">Work</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> <section id="About"> <h3>About</h3> <p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p> <p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p> </section> <section id="Work"> <h3>Work</h3> <p>sample 1</p> <p>sample 2</p> <p>sample 3</p> </section> <section id="Contact"> <h3>Contact</h3> <p>email</p> <p>phone</p> <p>address</p> </section> </body> </html>
We've used the new <section> tag not as a generic replacement for the <div>, but instead in the semantically correct way as a related grouping that usually contains a heading.
If the content grouping isn't related, it probably shouldn't be a <section>. Consider a <div> instead.
Remember: If it doesn't have a <header>, it probably doesn't need a <section>. Use <section> to group content, but <div> when grouping items purely for stylistic reasons.
Still aren't sure if <section> is the right tag to use? Remember these guidelines:
Are you using it solely for styling or scripting? That's a
<div>.If any other tag is more appropriate, use it instead.
Use it only if there's a heading at the start of the content.
HTML5 is a constantly evolving set of standards. The latest bit of guidance from the WHATWG suggests:
"Authors are encouraged to use the
<article>element instead of the<section>element when it would make sense to syndicate the contents of the element."
Publishing an about page? That's probably going to be a good <section> candidate.
"The
<aside>element represents a section of a page that consists of content that is tangentially related to the content around the<aside>element, and which could be considered separate from that content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
Let's use the new <aside> tag in a common way: to create a sidebar of thumbnail images listing what Roxane has been busy reading recently.
In the past we floated images or lists to the right or left of our text. That still works, but now we can make better use of the improved semantics in HTML5 by using the new <aside> tag to accomplish a similar visual effect. Let's use:
An ordered list
Thumbnail images
Book titles
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> <nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Work">Work</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> <section id="About"> <h3>About</h3> <p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p> <p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p> </section> <section id="Work"> <h3>Work</h3> <p>sample 1</p> <p>sample 2</p> <p>sample 3</p> </section> <section id="Contact"> <h3>Contact</h3> <p>email</p> <p>phone</p> <p>address</p> </section> <aside> <h4>What I'm Reading</h4> <ul> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li> </ul> </aside> </body> </html>
Note: In this case, quote marks are needed around ALT tags to ensure validity.
The <aside> tag is effectively used to place items like images and text that are often less important than the primary page content.
Semantically, <aside> is similar to a sidebar. That doesn't necessarily refer to position but instead to tangentially related content.
Though <section> is a generic hunk of related content, think of <header>, <nav>, <footer> and <aside> as specialized types of <section>.
Jeremy Keith penned the outstanding "HTML5 For Web Designers" which is considered the least you need to know to understand the new group of technologies. Find it at: http://books.alistapart.com/products/html5-for-web-designers.
"The
<aside>element represents a section of a page that consists of content that is tangentially related to the content around the<aside>element, and which could be considered separate from that content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
It seems like every blog and many other types of websites have sidebars filled with all sorts of information. Here, we're going to add an additional sidebar to Roxane's single-page portfolio site using the new <aside> tag.
Roxane wants to let people know where else she can be reached, and so do you. Let's use the <aside> tag to create a sidebar and draw attention to her web presence:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> <nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Work">Work</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> <section id="About"> <h3>About</h3> <p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p> <p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p> </section> <section id="Work"> <h3>Work</h3> <p>sample 1</p> <p>sample 2</p> <p>sample 3</p> </section> <section id="Contact"> <h3>Contact</h3> <p>email</p> <p>phone</p> <p>address</p> </section> <aside> <h4>What I'm Reading</h4> <ul> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li> </ul> </aside> <aside> <h4>Elsewhere</h4> <p>You can also find me at:</p> <ul> <li><a href="http://linkedin.com/in/">LinkedIn</a></li> <li><a href="http://twitter.com/">Twitter</a></li> <li><a href="http://facebook.com/">Facebook</a></li> </ul> </aside> </body> </html>
Building on the success we had previously with the <aside> tag, we've used it again to align information that is subsequent to the main information.
Just because a design calls for a sidebar, don't automatically reach for the <aside> tag. Carefully consider your content before considering position.
Together, Bruce Lawson and Remy Sharp penned the outstanding Introducing HTML5 reference available at: http://peachpit.com/store/product.aspx?isbn=0321687299
"The
<footer>element represents a footer for the completed documented or its nearest ancestor sectioning content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
We've all used footers on our web pages — typically for things like secondary navigation and more. This contains all the information you typically see at the bottom of a page, like a copyright notice, privacy policy, terms of use, and many more. Like the new <header> tag, the new <footer> tag can occur in more than one place.
In this case, we're going to use the new <footer> tag to place Roxane's copyright information at the bottom of the page.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> <nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Work">Work</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> <section id="About"> <h3>About</h3> <p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p> <p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p> </section> <section id="Work"> <h3>Work</h3> <p>sample 1</p> <p>sample 2</p> <p>sample 3</p> </section> <section id="Contact"> <h3>Contact</h3> <p>email</p> <p>phone</p> <p>address</p> </section> <aside> <h4>What I'm Reading</h4> <ul> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li> <footer> tagimplementing</ul> </aside> <aside> <h4>Elsewhere</h4> <p>You can also find me at:</p> <ul> <li><a href="http://linkedin.com/in/">LinkedIn</a></li> <li><a href="http://twitter.com/">Twitter</a></li> <li><a href="http://facebook.com/">Facebook</a></li> </ul> </aside> <footer> <h5>All rights reserved. Copyright Roxane.</h5> </footer> </body> </html>
Though this <footer> is located at the bottom of Roxane's single-page portfolio site, it can be used elsewhere on a page, such as at the bottom of a <section> tag to contain information like author, publication date, and so on. The result is more flexible than something like the old <div id="footer"> allowed us. In this and many other instances, HTML5's new tags allow us to place appropriate tags where they make the most sense, based on our content, not our layout.
The HTML5 specification suggests author information be included in the new <footer> tag no matter if the <footer> is part of a <section> or <article> or even at the bottom of the page.
The vast majority of the time, you'll use the <header> tag at the top of your document, the <footer> tag at the bottom, and <aside> tags for the sides.
Mark Pilgrim created a terrific free online HTML5 reference Dive Into HTML5 located at: http://diveintohtml5.org.
Luckily for us, HTML5 now has a method of assembling an outline of our pages in browsers, so search engines as well as accessibility technologies can make better sense of them. We're going to make use of the HTML5 Outliner at: http://gsnedders.html5.org/outliner
To use the HTML5 Outliner, we can use HTML stored on our local computer or code visible via a URL. Make sure to save the code we've been creating locally or upload it to a publicly accessible web server for this step.
Let's make sure to save this document either on a local hard drive or remote server. We'll visit http://gsnedders.html5.org/outliner to create our outline.
Using our previous code example, we can generate the following code outline:
1. Roxane is my name.
2. Untitled Section
3. About
4. Work
5. Contact
6. What I'm Reading
7. Elsewhere
8. All rights reserved. Copyright Roxane.
"It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk." - WHATWG
It's assumed that content following any heading is related to that heading. Therefore we can use many of the new HTML5 tags like <section> to explicitly demonstrate the beginning and ending of related content.
If the HTML5 Outliner tool displays messages like "Untitled Section" you should rethink how you're using each of your tags and ensure your approach matches the intent of the specification.
"Untitled Section" messages should be treated as warnings instead of errors. While <section> and other new HTML5 tags require a heading tag, it's perfectly valid not to have one for <nav> areas.
The http://html5doctor.com site is a terrific interactive reference written by seven thought leaders including Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.
Our pal Roxane's single-page portfolio site has come together using more than a few of the new HTML5 elements. She's ready to show the world she's a forward-thinking web developer, ready to tackle advanced projects.
We've done the prep work by assembling much of the content for the single-page portfolio site. It isn't very stylish just yet, but when we layer CSS on top of it, this will really come together and be as stylish as our imaginations will allow.
Here's the code we have so far. It's valid against the World Wide Web Consortium's HTML5 and Section 508 accessibility tests. This unstyled code should be easily viewable in any modern web browser whether it's on the desktop or a mobile device.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> <nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Work">Work</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> <section id="About"> <h3>About</h3> <p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p> <p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p> </section> <section id="Work"> <h3>Work</h3> <p>sample 1</p> <p>sample 2</p> <p>sample 3</p> </section> <section id="Contact"> <h3>Contact</h3> <p>email</p> <p>phone</p> <p>address</p> </section> <aside> <h4>What I'm Reading</h4> <ul> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li> </ul> </aside> <aside> <h4>Elsewhere</h4> <p>You can also find me at:</p> <ul> <li><a href="http://linkedin.com/in/">LinkedIn</a></li> <li><a href="http://twitter.com/">Twitter</a></li> <li><a href="http://facebook.com/">Facebook</a></li> </ul> </aside> <footer> <h5>All rights reserved. Copyright Roxane.</h5> </footer> </body> </html>
A single-page portfolio site makes a lot of sense for a developer or designer, as all the information is quickly available to those in hiring positions, like human resources teams or recruiters.
This is exactly the kind of professional single-page portfolio site Roxane needs to demonstrate she's a forward-thinking developer learning to wield the next generation of web standards.
As an experiment, turn off the "HTML5 Shiv" JavaScript reference in the code and see how various versions of Internet Explorer treat our new HTML5 tags.
Remember to consider mobile displays when creating this and other websites. There's almost never a good reason to block entire groups of people from seeing your content.
Over the past 15 years or so, we've spent a lot of time and effort bashing Microsoft Internet Explorer for its lack of standards support and buggy interpretation of the box model. The upcoming IE10 brings us closer to a more unified web development world, but we still remain years away from being free of cursing IE.
For lots of single-page portfolio and other website inspiration, visit the http://onepagelove.com gallery.
The unstyled single-page portfolio as it displays on most major modern desktop web browsers:
