How To Develop Using HTML5: Demo Part 2

Posted: 28 Jul 2011 05:30 AM PDT

The new semantic elements in html5 are fairly easy to understand, but to really become comfortable using them you need to actually use them in documents. To get myself started I created a demo page representing a typical blog post and developed it using html5.

Last time we started looking at that demo page and I was explaining some of my choices. As a quick reminder here’s the high level structure of the page.

 <div id="wrapper"> 	<header id="masthead" role="banner"></header> 	<div id="content"></div> 	<aside class="primary"></aside> 	<div id="footer"></div> 	<footer class="contentinfo" role="contentinfo"></footer> </div>

We already talked about why I chose this structure and then dug into the header and aside elements. Let’s pick right up and move on to the main content div.

Content Div

There’s quite a bit going on inside this div so let’s first look at the general structure.

 <div id="content"> 	<article class="post"> 		<header class="post-9 hentry"></header> 		<section></section> 		<footer class="meta"></footer> 		<section id="comments"></section> 	</article> </div>

As an article should be self-contained content it probably seems intuitive that it would include a header, footer, and sections of content. The inclusion of the comments might seem a little odd and it was another place I went with my gut.

You could make the argument that comments on the post should be a separate article instead of being included in the main article.

When you currently subscribe to a blog you’re delivered posts, though typically not the comments. You could also subscribe to the comments, but then those are usually considered a different subscription and are delivered without the post.

The above is suggesting the use of 2 separate articles in html5 and perhaps that would have been the better choice.

Ask me again in a few weeks and I might recommend taking the comments out of the post article and placing them instead in another article (instead of a section) below the post article.

Header

As you’d expect the header begins with an h1 tag. I want to call your attention to a couple of other things.

 <header class="post-9 hentry"> 	<h1></h1> 	<small class="meta"> 	<time datetime="2011-07-07" pubdate>Wednesday, July 7, 2011</time> <address class="vcard">by <a class="url n fn" rel="author" href="" title="View Steven Bradley's profile">Steven Bradley</a></address>	</small> 	<p class="intro"></p> 	<p></p> </header>

First is that I’ve used the time and address tags. The the former because I was adding a date and the latter to mark up my name as an hCard.

The other thing to note is that this header closes with a couple of paragraphs of introductory text. It could have been included in a new section following the header, but sections typically (though not always) will include a header or at least a new heading.

Since these paragraphs are falling under the main h1 and are meant to be introductory text, it made more sense to me to include them here.

Section

Most of the post content follows the same pattern. Each time a new heading is encountered I set up a new section, with that heading and some paragraphs of text. The paragraphs could also be lists and blockquotes, etc.

 <section> 	<h2></h2> 	<p></p> 	<section> 		<h3></h3> 		<p></p> 	</section> 	<section> 		<h3></h3> 		<p></p> 	</section> 	<p></p> </section>

When the new heading is lower in the hierarchy its section is nested. h3 sections are nested inside h2 sections. Had I used an h4 it would have been nested inside the h3 that came before.

Headings that are siblings get their own section relative to the parent heading.

Footer

Footers are meant to include content describing the main content. Think meta information. Here I included a paragraph showing how the post was archived and then included a short author bio.

 <footer class="meta"> 	<p>This post is archived…</p> 	<section> 		<h1>About Steven Bradley</h1> 		<p></p> 	</section> </footer>

Since author name and description are related I enclosed both inside a new sections.

As I could envision moving the author bio to other types of pages I used an h1. I wouldn’t rely on the outline algorithm currently, but here I was pretending it had better browser support in order to play around with it in the demo.

Comments

Since each comment is coded the same I’ll just include one in full in the code below. Each new article at the end would be a new comment. Above all the comments is a heading for the section.

Everything is enclosed in a section since comments on a post are clearly related. I debated whether or not the entirety of comments should be a single article instead of a section. I think you can make a good argument for that, especially as a full comment stream is often syndicated via rss.

 <section id="comments"> 	<h1> 3 Comments</h1> 	<article class="comment"> 		<div class="comment-meta" id="comment-1"> 			<a href="" rel="external nofollow">Homer Simpson</a> 			<img src="" alt="" class="avatar" /> 			<time datetime="" pubdate></time> 		</div> 		<div class="comment-body"> 			<p></p> 		</div> 	</article> 	<article class="comment"></article> 	<article class="comment"></article> 	<article class="comment"></article> </section>

I decided to call it a section, though.

Part of that choice comes from looking at how others treated comments and part because it felt more like the individual comment was the self-contained unit as opposed to all the comments.

Explaining it now I’m thinking it would have made more sense to consider the entire comment stream as an article with each comment being a nested article within.

What’s inside each comment isn’t anything special at this point. I wrapped the comment meta and the comment body in divs. These probably should have been sections instead of divs as the content is related.

Footer Div

This is the footer div that includes the links and the ad. All of this information is tangential, much like the sidebar and so each is an aside.

Remember that we’re choosing these new semantic elements based on the content they enclose, not the location of the content within the document.

I probably should have chosen a different name for the id to avoid confusion with the html5 footer. A better choice might have been id=”subfooter”

 <div id="footer"> 	<aside class="sub-footer"> 		<h1></h1> 		<p></p> 		<ul> 			<li><a href=""></a></li> 			<li><a href=""></a></li> 			<li><a href=""></a></li> 			<li><a href=""></a></li> 		</ul> 	</aside> 	<aside class="sub-footer"> 		<h1></h1> 		<p></p> 		<ul> 			<li><a href=""></a></li> 			<li><a href=""></a></li> 			<li><a href=""></a></li> 			<li><a href=""></a></li> 		</ul> 	</aside> 	<aside class="advertising"> 		<h1></h1> 		<a href=""><img src="" alt="" /></a> 	</aside> </div>

Since the three different sets of content aren’t related I chose to wrap all three in a div instead of a section. The aside is enough to show that the content inside each is related to itself.

Once again I chose not to use a header element inside and just went with the h1. Whether or not headers are needed is something I still need to work out.

Footer

Finally we get the document footer. Since the content here is information about the entire page it’s enclosed in the main footer for the entire page.

 <footer role="contentinfo" class="contentinfo"> 	<p></p> </footer>

After walking through all of the above code I’ll assume no additional explanation is needed here.

Above: The demo as viewed in Internet Explorer 7 on Windows XP

Additional Thoughts

This demo is really one of my first attempts at coding a page in html5. I learned quite a bit, made some observations, and raised a few questions for myself.

Overall it wasn’t too difficult to get used to html5. The elements themselves are easy to use and for the most part it isn’t too difficult to know when to use them. Of all of the new elements nav, aside, and footer created the least confusion for me.

It will take some time getting used to the new tags, especially when it comes to developing new best practices, but it was like that when moving from tables to divs and I suspect the transition will be easier this time around.

The header element while simple to use raised questions about how often to use it. Should each new group of sectioning content start with a header? Only when an hx element is present? Can it safely be left out? What advantages does it hold without more support for the outline algorithm?

The most confusing part was deciding when to use div, section, and article. The definitions of each seems clear enough, but in practice it can be hard to decide which is best to use at times. It’s not hard to see that I could redevelop this same demo and end up with a new structure of div, section, and article.

I suspect this is what you’ll find the most challenging and I’m providing some links to help you sort it out below.

However this really isn’t all that different from what goes on now. If you and I develop the same design we’ll likely structure things differently even when only using divs as our main block level element. There really isn’t a right or wrong way to use the 3 tags and accepting that will probably help clear away the confusion more than anything.

What we’ll likely see in the coming months and years is a series of best practices for using all of the new elements and we’ll each pick and choose which best practices work best for us.

After having worked through the demo I’m much more convinced that we can use these new semantic elements in real projects now.

Above: The demo as viewed in Internet Explorer 6 on Windows XP

Browsers

Throughout this 2 part post I’ve included some screenshots of the demo in Internet Explorer. For the most part they look pretty good. IE6 was the only time the demo looked off as you can see in the screenshot above and the one below.

However as poor as the demo looks in those images it’s really only a few minor tweaks to fix. Also as I’ve said a few times here I’ve dropped support for IE6 so I’m not really concerned with making those tweaks unless a client specifically requests it.

Unfortunately my Windows testing machine has been on the fritz lately and I wasn’t able to get good screenshots of how the demo looks in IE when Javascript is disabled.

I managed to grab screenshots where I had removed the link to the html5shiv. The IE6 screenshot is the last image in this post. I suspect that’s not how it really looks though.

Perhaps the divs I used were enough to keep the layout intact, but I expected the demo to look much worse with Javascript disabled. If someone can grab a screenshot and send it to me I’ll include it here.

My testing machine should be up and running again in a few days too so I’ll see if I can grab a screenshot as well.

Above: The bottom of the demo page as viewed in Internet Explorer 6 on Windows XP

Additional Resources

Here are some of the articles I read trying to sort out using divs, sections, and articles. This post by Oli Studholme, HTML5 structure—div, section & article, probably helped me the most with the following 3 questions and answers.

Would the enclosed content would make sense on it’s own in a feed reader? If so use <article>
Is the enclosed content related? If so use <section>
Finally if there’s no semantic relationship use <div>

I also leaned on the articles below quite a bit.

The section element read through the comments
<section&gt: is not just a “semantic &lt:div&gt:”
HTML5 test results You’ll see you aren’t alone in your confusion
Article of doubt
Sections and outlines of an HTML5 document
HTML5 articles and sections: what's the difference?

Above: My best attempt at collecting a screenshot in Internet Explorer with Javascript disabled. This is IE6 on Windows XP. I expect this image looks better than the reality.

Summary

Hopefully this 2 part walk through of my demo has helped make html5 sectioning elements easier to understand and even better I hope it’s convinced you to create your own demo page. You’ll understand these tags much, much better through actual use than reading about what I’ve done.

Start with a trip through some of the html5 boilerplate templates that are readily available and beginning with one as a shell, develop what might be a typical web page in your workflow.

At first I fell back to using divs as I do now, just to get some kind of structure in place. I then began replacing some of those divs with the new elements and rearranging a few things here and there as I iterated the development of the page.

It really won’t take long to get used to he new elements, but the only way that will happen is if you take the time to start using them.

For those of you who have started developing with html5 how have you handled the issue of using too many or not enough headers? Have you found it easier to decide when it’s best to use div, section, and article as you’ve worked with them more? Are there specific issues that continue to arise for you that I haven’t mentioned here?