How to design a blog with HTML5

Fri 11 Sep 2009
Blurb by Jack Osborne
twitter

After designing my own site in HTML5 and helping out over at the HTML5 Doctor website, I decided that I would take a stab at transforming a typical hobo blog page that utilises XHTML elements into one that uses HTML5. Please note that this page is an experiment and that elements within this page are subject to change and therefore may not validate completely when you visit next. Note also I'm still playing about with how the design transforms gracefully on some machines (and not on others!)

Before we get started, if you're new to HTML5 which I assume that may of you will be, please feel free to look at some other brilliant HTML5 resources. The top two articles have been previously published by the team at Hobo.

Let's get stuck in.

This article has been based on a post by HTML5 expert Bruce Lawson, I throughly recommend reading his blog for more information regarding HTML5.

The aim of this post is to talk about how we use the new elements like header, footer, and nav to mark up the page. Then we’ll delve into the guts of the page, using HTML5’s article elements to mark up blog posts and comments (although I actually use list items on my own blog) and show how to use the section elements to structure accessible hierarchical headings on sites that are CMS-driven. As blogs are chronologically ordered, we’ll see how HTML5 goes about offering in terms of representing dates and times.

I suggest now is the time to boil the kettle, let the dog out and take the phone off the hook because you're going to be reading for a little while.

DOCTYPE

The DOCTYPE refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly. A common DOCTYPE looks like the following <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">. All web pages need a DOCTYPE otherwise your browser will go into Quirksmode.

With HTML5 they have decided to shorten that DOCTYPE down to <!DOCTYPE html>.

Some sites, including Google, have already started swapping over their DOCTYPEs from the old traditional way to the newer method. Ironically, Googles search page and listings don't validate because of their use of invalid tags - font element for instance - and a number of other errors. Please note, that swapping your DOCTYPE over is fine, so long as you've created your website with valid, semantic code as HTML5 is very similar to valid HTML4.01.

Introducing the new elements

Way back when we were laying out pages using the table element, we probably weren't aware of semantics and standards. Nowadays, we're using divs left right and centre. The situation isn't terrible, as many designers and developers have decided on using the same or similar structural elements for their websites, elements such as <div id="header">, <div id="footer">, <div id="content"> and <div id="sidebar"> will often be found across many websites. But wouldn't it just be better if we had a header and footer element instead? Well, HTML5 gives us exactly that.

Here's a non-exclusive list of the new HTML5 elements that are available:

Article: represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reuseable. This could be a forum post, blog post, newspaper article, a user comment, or any other independant item of content.
Aside: is used to represent a section of content that is related to the content around the aside element eg, a pull quote or a sidebar.
Footer: is the footer to a section. This is not restricted to one use at the bottom of a page. You can also use the footer to mark up the footer of a blog post in addition to the footer of te entire document.
Header: represents a group of navigational aids, and is used to construct the document outline. You are also not restricted to using header only once; you could use this to mark-up the author's name and the time of a comment placed on a blog post.
Nav: is used to wrap major navigation blocks, such as table of contents, pagination links and breadcrumbs. Note that the nav element should be used for links that navigate around the site, ie. inappropriate for a list of sponsor links.
Section: is a generic document or application section. However, this isn't a replacement for the div element. A section is only appropriate if the element's content would be listed explicitly in the document's outline.

The overall aim is to replace this structure:

replacing old blog template with HTML5 elements

Changing your old XHTML elements for the newer HTML5 is just simply a matter of swapping over the tags, however a word of caution, marking up your content is a lot trickier as it requires an even higher degree of thought. No more marking up your <div> with a generic id or class of whatever you choose, you really have to think about what structureal element best suits your needs.

Laying out the new elements

Although we can use these new HTML5 elements today the truth is that the current browsers on the market actually have no "knowledge" of them but it isn't all bad news and I must stress that support is improving all the time. For now, if you want to dabble in HTML5 you will need to tell the browsers to display your new elements as block - header, footer, nav, article {display:block;}

All browsers have default settings for the elements they "know about" - how much padding, margin an element gets, does it display as a block or inline? but the browsers don’t know about header, nav etc, so have no defaults to apply to them, so you've basically got a blank canvas to start from. However, if you're link me and prefer to use a css reset like the yahoo or eric meyer then you can grab the all new HTML5 reset css stylesheet here.

IE layout

Unfortunately, at time of writing, you cannot style a page with HTML5 in Internet Explorer but as always, there is a work around with a JavaScript hack document.createElement('element name'). Remy Sharp has written an HTML5 enabling script which I have used within my header file which helps create all the missing elements into existence.

WARNING: If for some reason IE users have turned off their JavaScript in the user options then this file will not work. It is now down to you to decide how much of a problem this could be for your site. Pragmatically, it seems to me that the sites that will benefit the most from HTML5’s new “Ajax”-style features, such as drag-and-drop, are the sites that currently have no hope of working without JavaScript.

Firefox 2 and Camino 1 layout

Other browsers that struggle with HTML5 are Firefox 2 and Camino 1 as they both use Gecko 1.9 engine. These have known issues when you don't serve your pages up as XHTML. However, one plus point is that Firefox and Camino users upgrade frequently so the problem will soon cease to exist.

Why Should I use these new Elements

Well, they add semantics to the page. The browser now knows which area of your site is the header or the footer because there are header and footer elements, whereas a div, as we've already covered, can be called anything you so desire eg. <div id="sidebar"> or <div id="smalldog">

Pretty much everyone in the Web community agrees that “semantics are yummy, and will get you cookies”, and that’s probably true. But once you start digging a little bit further, it becomes clear that very few people can actually articulate a reason why. So before we all go another round on this, I have to ask: what’s it you wanna do with them darn semantics?

The general answer is “to repurpose content”. That’s fine on the surface, but you quickly reach a point where you have to ask “repurpose to what?” … I think HTML should add only elements that either expose functionality that would be pretty much meaningless otherwise (e.g. canvas) or that provide semantics that help repurpose for Web browsing uses.

In my opinion there are two main reasons, which jump out at me immediately, why we should seriously thinking about moving over to HTML5

Search Engines - it’s easy to imagine Messrs Google or Yahoo! giving lower weighting to content in <footer> elements, or extra weight to content in the <header>.
Accessibility - People with learning difficulties might instruct their browser always to put the articles before the navigation, for example. User agents might very well have a keyboard shortcut which jumped straight to the <nav> for example, or jumped straight past the navigation, in a programmatic implementation of “skip links“.

Further refining the HTML5 structure

The blog home page

An interesting thing about a blog homepage, like here at hobo, is that there are normally at least five or so posts on the front page. With each blog post normally having a heading, a "body" and meta about the post (time, who wrote it, how many comments etc.) and usually a link to another page that has the full blog post (if the homepage just showed an excerpt) and its comments.

With HTML5 we can now take full advantage of the new article element which we can use to wrap each story:

The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

Let’s look in more detail at the guts of how I mark up each blogpost.

With these new HTML5 elements were are able to get rid of the generic div that we would normally use ie. <div id="post"> with a more semantic element called <article>. Within this element we can specify everything like we could before but again using the new elements. <header> will hold information for the title of the post wrapped in the normal H(n) tag, and a time of publication, marked up using the new <time> element.

The actual post content is marked up with paragraphs tags, blockquotes etc., and is pulled unchanged out of the database. Immediately after this we can pull out the posts meta category, how many comments) marked up as a <footer> and, in the case of pages that show a single blogpost, there are comments. Finally, there may be navigation from one article to the next.

Article Meta

When we were describing the post meta above we briefly touched on the new <footer> element. Within most blog posts you will normally find information about the; category, tags and comments. As Bruce Lawson stated when redesigning his own blog

footer is a much better fit: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.” I was initially thrown off-course by the presentational name of the element; my use here isn’t at the bottom of the page, or even at the bottom of the article, but it certainly seems to fit the bill – it’s information about its section, containing author name, links to related documents (comments) and the like. There’s no reason that you can’t have more than one footer on page; the spec’s description says "the footer element represents a footer for the section it applies to" and a page may have any number of sections. The spec also says "Footers don’t necessarily have to appear at the end of a section, though they usually do."

Comments

On my own site, I've marked up comments in an ordered list but since then I've also decided, after reading plenty of new material, that I probably should have used the <article> element. The spec says that an article could be “a user-submitted comment”, but nested these inside the parent article.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.

These are headed with the date and the time of the comment and name of its author—if you want, you can wrap these in a <header>, too, if you feel like it but I feel that that could be bordering into the OCD stages of things. Remember, you don't need to add mark-up just because you can.

I think here's about as good a place as any to finish for now, we've covered the basics of how to layout a typical blog and hopefully I've been able to shed some light on troublesome areas of the spec. However, don't assume that this is that HTML5 can do. We haven't even touched on the capabilities of audio, video, drag and drop, inline editing, offline applications and local storage and other technologies such as web sockets and web workers.

Interested in checking out how page validation? If you've not already looked at the validator, in the yellow bar stuck to the bottom of the page, click here and validate your HTML5 pages and after that you can check your page outline.

Subscribe & Get Your Free Beginners Guide To Google SEO!

1 Response to "How to design a blog with HTML5"

Jack Osborne says: September 11th, 2009 at 1:43 pm

Add your comment to the regular blog post found here.

Hobo