"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.