One place you’re sure to find lots of content in need of structured markup is a blog. You’re going to have headers, footers, multiple types of navigation (archives, blogrolls, and internal links), and, of course, articles or posts. Let’s use HTML5 markup to mock up the front page of
the blog for AwesomeCo, a company on the cutting edge of Awesomeness.
To get an idea of what we’re going to build, take a look at Figure 2.1, on the following page. It’s a fairly typical blog structure, with a main header with horizontal navigation below the header. In the main section, each article has a header and a footer. An article may also have a pull quote, or an aside. There’s a sidebar that contains additional navigation elements. Finally, the page has a footer for contact and copyright information. There’s nothing new about this structure, except that this time, instead of coding it up with lots of div tags, we’re going to use specific tags to describe these regions.
It All Starts with the Right Doctype
We want to use HTML5’s new elements, and that means we need to let browsers and validators know about the tags we’ll be using. Create a new page called index.html, and place this basic HTML5 template into that file.
Line l <!D O C T Y P E h t m l >
2 <html lang=”en-US”>
3 <head>
4 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
5 <title>AwesomeCo Blog</title>
6 </head>
8 <body>
9 </body>
10 </html>
Take a look at the doctype on line 1 of that example. This is all we
need for an HTML5 doctype. If you’re used to doing web pages, you’re
probably familiar with the long, hard-to-remember doctypes for XHTML
like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtm11/DTD/xhtmll-transitional.dtd”>
Now, take another look at the HTML5 doctype:
<!DOCTYPE HTML>
That’s much simpler and much easier to remember.
The point of a doctype is twofold. First, it’s to help validators determine
what validation rules it needs to use when validating the code. Second,
a doctype forces Internet Explorer versions 6, 7, and 8 to go into
“standards mode,” which is vitally important if you’re trying to build
pages that work across all browsers. The HTML5 doctype satisfies both
of these needs and is even recognized by Internet Explorer 6.
Headers
Headers, not to be confused with headings such as hi, h2, and h3, may
contain all sorts of content, from the company logo to the search box.
Our blog header will contain only the blog’s title for now.
Une l <header id=”page_header”>
2 <hl>AwesomeCo Blog!</hl>
3 </header>
You’re not restricted to having just one header on a page. Each individual
section or article can also have a header, so it can be helpful to
use the ID attribute like I did on 1 to uniquely identify your elements. A
unique ID makes it easy to style elements with CSS or locate elements
with JavaScript.
Semantic markup is all about describing your content. If you’ve
been developing web pages for a few years, you’ve probably
divided your pages Into various regions such as header, footer,
and sidebar so that you could more easily identify the regions of
the page when applying style sheets and other formatting.
Semantic markup makes It easy for machines and people alike
to understand the meaning and context of the content. The
new HTML5 markup tags such as section, header, and nav help
you do just that.
Footers
The footer element defines footer information for a document or an adjacent
section. You’ve seen footers before on websites. They usually contain
information like the copyright date and information on who owns
the site. The specification says we can have multiple footers in a document
too, so that means we could use the footers within our blog
articles too.
For now, let’s just define a simple footer for our page. Since we can
have more than one footer, we’ll give this one an ID just like we did with
the header. It’ll help us uniquely identify this particular footer when we
want to add styles to this element and its children.
<footer id=”page_footer”>
<p>© 2010 AwesomeCo.</p>
</footer>
This footer simply contains a copyright date. However, like headers,
footers on pages often contain other elements, including navigational
elements.
Navigation
Navigation is vital to the success of a website. People simply aren’t going
to stick around if you make it too hard for them to find what they’re
looking for, so it makes sense for navigation to get its own HTML tag.
Let’s add a navigation section to our document’s header. We’ll add links
to the blog’s home page, the archives, a page that lists the contributors
to the blog, and a link to a contact page.
Une l <header id=”page_header”>
<hl>AwesomeCo Blog!</hl>
<nav>
<ul>
5 <lixa href=”/”>Latest Posts</ax/l i>
<1 i x a href=”archives”>Archi ves</ax/l i>
<1 i x a href=”contributors”>Contri butors</ax/l i>
< l i x a href=”contact”>Contact Us</ax/li>
</ul>
io </nav>
</header>
Like headers and footers, your page can have multiple navigation elements.
You often find navigation in your header and in your footer, so
now you can identify those explicitly. Our blog’s footer needs to have
links to the AwesomeCo home page, the company’s “about us” page,
and links to the company’s terms of service and privacy policies. We’ll
add these as another unordered list within the page’s footer element.
<footer id=”page_footer”>
<p>© 2010 AwesomeCo.</p>
<nav>
<ul>
<1 i x a href=”http://awesomeco.com/”>Home</ax/l i>
<1 i x a href=”about”>About</ax/l i>
< l i x a href=”terms.html”>Terms of Servi ce</ax/l i>
<1 i x a href=”privacy.html “>Pri vacy</ax/l i>
</ul>
</nav>
</footer>
We will use CSS to change how both of these navigation bars look, so
don’t worry too much about the appearance yet. The point of these new
elements is to describe the content, not to describe how the content
looks.
Sections and Articles
Sections are the logical regions of a page, and the section element is
here to replace the abused div tag when it comes to describing logical
sections of a page.
<section id=”posts”>
</section>
Don’t get carried away with sections, though. Use them to logically
group your content! Here we’ve created a section that will hold all the
blog posts. However, each post shouldn’t be in its own section. We have
a more appropriate tag for that.
Articles
The article tag is the perfect element to describe the actual content
of a web page. With so many elements on a page, including headers,
footers, navigational elements, advertisements, widgets, blogrolls, and
social media bookmarks, it might be easy to forget that people come
to your site because they’re interested in the content you’re providing.
The article tag helps you describe that content.
Each of our articles will have a header, some content, and a footer. We
can define an entire article like this:
<article>
<header>
<h2>How Many Should We Put You Down For?</h2>
<p>Posted by Brian on
<time datetime=”2010-10-01T14:39″>0ctober 1st, 2010 at 2:39PM</time>
</p>
</header>
<p>
The first big rule in sales is that if the person leaves empty-handed,
they’re likely not going to come back. That’s why you have to be
somewhat aggressive when you’re working with a customer, but you have
to make sure you don’t overdo it and scare them away.
</p>
<p>
One way you can keep a conversation going is to avoid asking questions
that have yes or no answers. For example, if you’re selling a service
plan, don’t ever ask "Are you interested in our 3 or 5 year
service plan?" Instead, ask "Are you interested in the 3
year service plan or the 5 year plan, which is a better value?"
At first glance, they appear to be asking the same thing, and while
a customer can still opt out, it’s harder for them to opt out of
the second question because they have to say more than just
"no."
</p>
<footer>
< p x a href=”comments”xi>2 5 Comments</ix/a> . . .</p>
</footer>
</article>
We can use header and footer elements inside of our articles, which
makes it much easier to describe those specific sections. We can also
divide our article into multiple sections using the section element.
Asides and Sidebars
Sometimes you have content that adds something extra to your main
content, such as pullout quotes, diagrams, additional thoughts, or related
links. You can use the new aside tag to identify these elements.
<aside>
<P>
"Never give someone a chance to say no when
selling your product."
</p>
</aside>
We’ll place the callout quote in an aside element. We’ll nest this aside
within the article, keeping it close to its related content.
Our completed section, with the aside, looks like this:
<section id=”posts”>
orticle>
<header>
<h2>How Many Should We Put You Down For?</h2>
<p>Posted by Brian on
<time datetime=”2010-10-01T14:39″>0ctober 1st, 2010 at 2:39PM</time>
</p>
</header>
<aside>
<p>
"Never give someone a chance to say no when
selling your product."
</p>
</aside>
<p>
The first big rule in sales is that if the person leaves empty-handed,
they’re likely not going to come back. That’s why you have to be
somewhat aggressive when you’re working with a customer, but you have
to make sure you don’t overdo it and scare them away.
</p>
<p>
One way you can keep a conversation going is to avoid asking questions
that have yes or no answers. For example, if you’re selling a service
plan, don’t ever ask "Are you interested in our 3 or 5 year
service plan?" Instead, ask "Are you interested in the 3
year service plan or the 5 year plan, which is a better value?"
At first glance, they appear to be asking the same thing, and while
a customer can still opt out, it’s harder for them to opt out of
the second question because they have to say more than just
"no."
</p>
<footer>
< p x a href=”comments”xi>2 5 Comments</ix/a> . . .</p>
</footer>
</article>
</section>
Now we just have to add the sidebar section.
Asides Are Not Page Sidebars!
Our blog has a sidebar on the right side that contains links to the
archives for the blog. If you’re thinking that we could use the aside
tag to define the sidebar of our blog, you’d be wrong. You could do it
that way, but it goes against the spirit of the specification. The aside is designed to show content related to an article. It’s a good place to show
related links, a glossary, or a pull out quote.
To mark up our sidebar that contains our list of prior archives, we’ll
just use another section tag and a nav tag.
<section id=”sidebar”>
<nav>
<h3>Archives</h3>
<ul>
<1 i x a href=”2010/10″>0ctober 2010</ax/l i>
<1 i x a href=”2010/09″>September 2010</ax/li>
<1 i x a href=”2010/08″>August 2010</ax/li>
<1 i x a href=”2010/07″>July 2010</ax/li>
<1 i x a href=”2010/06″>June 2010</ax/li>
<1 i x a href=”2010/05″>May 2010</ax/li>
<1 i x a href=”2010/04″>Apri 1 2010</ax/li>
<1 i x a href=”2010/03″>March 2010</ax/li>
<1 i x a href=”2010/02″>February 2010</ax/li>
<1 i x a href=”2010/01″>January 2010</ax/li>
</ul>
</nav>
</section>
That’s it for our blog’s structure. Now we can start applying styles to
these new elements.
Styling
We can apply styles to these new elements just like we’d style div tags.
First, we create a new style sheet file called style.ess and attach it to our
HTML document by placing a style sheet link in the header, like this:
<link rel=”stylesheet” href=”style.ess” type=”text/css”>
Let’s first center the page’s content and set some basic font styles.
body{
width:960px;
margin:15px auto;
font-family: Arial, “MS Trebuchet”, sans-serif;
p{
margin:0 0 20px 0;P, 1 U
line-height:20px;
}
Next, we define the header’s width.
header#page_header{
width:100%;}
We style the navigation links by transforming the bulleted lists into
horizontal navigation bars.
header#page_header nav ul, #page_footer nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#page_header nav ul li, footer#page_footer nav ul li{
padding:0;
margin: 0 20px 0 0;
display ¡inline;
}
The posts section needs to be floated left and given a width, and we also
need to float the callout inside the article. While we’re doing that, let’s
bump up the font size for the callout.
section#posts{
float: left;
width: 74%;
section#posts aside{
float: right;
width: 35%;
margin-left: 5%;
font-size: 20px;
line-height: 40px;
}
We’ll also need to float the sidebar and define its width.
section#sidebar{
float: left;
width: 2 5%;
If you need to implement a pledge meter or an upload
progress bar in a web application, you should investigate the
meter and progress elements introduced in HTML5.
The meter element lets us semantically describe an actual fixed
point on a meter with a minimum and maximum value. For your
meter to be in harmony with the specification, you shouldn’t
use your meter for things with arbitrary minimum or maximum
values like height and weight, unless you are talking about
something specific where you have set a specific boundary.
For example, if we have a fundraising website and we want to
show how close we are to our goal of $5,000, we can describe
that easily:
<section id=”pledge”>
<header>
<h3>0ur Fundraising Goal</h3>
</header>
<meter ti tl e= “L/SD” id=”pledge_goal ”
value= “2500” min=”0″ max= “5000”>
$2500.00
</meter>
<p>Help us reach our goal of $5000!</p>
</section>
The progress element is very similar to a meter, but it’s designed
to show active progress like you’d see if you were uploading a
file. A meter, by comparison, is designed to show a measurement
that’s not currently moving, like a snapshot of available
storage space on the server for a given user. The markup for a
progress bar is very similar to the meter element.
<progress id=”progressbar” max=100xspan>0</span>%</progress>
The meter and progress elements aren’t styled by any browsers
yet, but you can use JavaScript to grab the values in the meter
and build your own visualization, using the meter or progress to
semantically describe the data. You can see an example of
how you might do that by looking at the book’s example files
for the meter element.
And we need to define the footer. We’ll clear the floats on the footer so
that it sits at the bottom of the page.
footer#page_footer{
clear: both;
width: 100%;
display: block;
text-align: center;
}
These are just basic styles. From here, I’m confident you can make this
look much, much better.
Falling Back
Although this all works great in Firefox, Chrome, and Safari, the people
in management aren’t going to be too happy when they see the mess
that Internet Explorer makes out of our page. The content displays fine,
but since IE doesn’t understand these elements, it can’t apply styles to
them, and the whole page resembles something from the mid-1990s.
The only way to make IE style these elements is to use JavaScript to
define the elements as part of the document. That turns out to be really
easy. We’ll add this code to our head section of the page so it executes
before the browser renders any elements. We’ll place it inside a conditional
comment, a special type of comment that only Internet Explorer
will read.
<! — [i f It IE 9]>
<script type=”text/javascript”>
document.createElementC”nav”);
document.createElementC”header”);
document.createElementC”footer”);
document.createElementC”section”) ;
document.createElementC”aside”);
document.createElementC”article”) ;
</scri pt>
<![endif]–>
This particular comment targets any version of Internet Explorer older
than version 9.0. If we reload our page, it looks correct now.
We are creating a dependency on JavaScript, though, so you need to
take that into consideration. The improved organization and readability of the document make it worth it, and since there are no accessibility
concerns, because the contents still display and are read by a screen
reader, you’re only making the presentation seem grossly out-of-date to
your users who have disabled JavaScript intentionally.
This approach is fine for adding support for a handful of elements or for
understanding how you can add support. Remy Sharp’s brilliant HTMLShiv3
takes this approach much further and might be more appropriate
for incorporating fallback support if you’re looking to support many
more elements.