HTML5 Project: WIREFRAME SERIES #1 – HOME PAGE

Read the entire “Wirefame Series”
Intro»  Page 1»  Page 2»  Page 3»

This is the first in a series of articles reviewing the wireframes for my HTML5 project, which is designing my web design & development online portfolio using pure HTML5 (see the article announcing the series). This was the toughest page to lay out: I had multiple page elements that needed to be positioned exactly to the current HTML5 specification, which will now be referred to as the spec.

(Important: I’ll be sending the final site to HTML5 Doctor and/or HTML5 Gallery for review when it’s done. While I’m confident that my site conforms to the HTML5 specification, these guys may say it doesn’t. Please keep that in mind when reading this.)

This article is structured as follows:

• Wireframe Review
• The Main <nav> tag
• The Social Networking Navigation tag
• The Footer navigation tag
• HTML5′s <header> and <footer> tags
• HTML5′s <article> and <section> tags
• All the older <div> tags and their usage
  • The Container <div> tag
  • The Page Content <div> tag
  • The Feeds <div> tag
• The <small> tag
• Summary

Wireframe Review

First, let’s look at the home page:

Now, let’s break it all down…

Navigation

There are three navigation elements, each appearing on every page of the site:

• The main navigation at the top of the page in the <nav role=”navigation”> tag
  
  
  • The spec calls for only one <nav> on the page. As this is the main navigation, this where <nav> is going. role=”navigation” just makes the navigation more accessible to wider array of devices.
• The <div id=”socialNetworkingNav”> tag directly below the main navigation which contain links to my Facebook, Twitter and blog pages
  
  
  • The spec calls for the <nav> tag to only contain links that go to pages within the site. Since both the Facebook and Twitter links leave the site, they need to be placed outside of <nav> and into a <div>.
    
    This portfolio will mostly likely live in a sub-domain: something like “work.kaidez.com.” This blog link goes to this site’s home page so when you click it, you go from “work.kaidez.com” to “kaidez.com.” Since it’s not going to page within the current site but still stays within the primary domain, I wasn’t sure if it should go in the <nav> tag.
    
    I asked HTML5 Doctor about this and they said that it’s okay to put the blog link into <nav>, but I’m opting to put it with the social networking stuff. I may end up putting it back into <nav> at the end of the day though.
• A reappearance of the main navigation in a <ul> tag in the <footer> tag at the bottom of the page
  
  • Again, the spec allows for only one <nav> tag per page. Since a <nav> tag already exists, putting these links in the <footer> as I did here seems to be the way to go.

The <header> & <footer> Tags

You guessed it right. <header> should go at the very top of the page and contain header content…


while <footer> should go at the very bottom of the page and contain footer content.

The <article> & <section> Tags

Almost all unique page content goes into either one or both of these tags, making them the two most exciting and most confusing aspects of HTML5 in terms of how the spec tells us to use them.

First, let’s see what what HTML5 Doctor has to say about this:

There’s been a lot of confusion over the difference (or perceived lack of a difference) between the <article> and <section> elements in HTML5. The <article> element is a specialised kind of <section>; it has a more specific semantic meaning than <section> in that it is an independent, self-contained block of related content. We could use <section>, but using <article> gives more semantic meaning to the content.

By contrast <section> is only a block of related content, and <div> is only a block of content…To decide which of these three elements is appropriate, choose the first suitable option:

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

Read the whole article (no pun intended) »

 

So…

I want to display four different samples of my work on the home page. Since I believe all my work is related on some level, I’m putting all of it into a <section> tag.

I think each sample would make sense on its own in a feed reader if needed, so I’m putting each one in their own individual <article> tag.

HTML5 Doctor may shoot this down when the time comes, but I think I did this right.

The <div> Tag

The two organizations overseeing the creation of the HTML5 spec, W3C and WHATWG, want you to use the <div> tag as little as possible and, instead, use one of the newer tags. But they’re fine with you using <div> if it’s your only option.

With the social networking and blog links I discussed above, <div> was my only option. Let’s look at some other <div> tags on the home page:

• The Container <div>
  
  
  • It’s common practice to wrap every single solitary page element into a single <div> tag, usually with an ID of either “container” or “wrapper” (I used “container”). This has not changed…you should always do this for an HTML5 page.

• The Page Content <div>
  
  
  • I used this to neatly contain both the <section> tag that contains all my work and another <div> tag with an ID called called “feeds”.
    
    Why is the “feeds” content in a <div> instead of <section> or <article>? Let’s talk about it…

• The Feeds <div>
  
  • I’d want to display RSS feeds of my most recent, Facebook, Twitter and blog posts on the home page and I want them above the fold. I guess I could put them in either an <article> or <section> tag, but let’s go back and review what HTML5 Doctor told us earlier:
     

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

     

    So…

    • These Facebook, Twitter and blog posts are already in a feed. Having them stand alone in another feed seems repetitive to me so I think this cancels out #1.
    • The content being displayed here are snippets from my blog and the social networking world. I don’t think they’re really related so I think this cancels out #2.
    • With #1 and #2 canceled out, I’m going with #3.

The <small> Tag

In terms of how this tag renders text, there’s nothing new here. But in terms of how to use it as per the spec, there’s a difference.

The <small> tag does exactly as it implies: it makes text smaller. In HTML 4.01, you could use it whenever and wherever you wanted.

But according to the spec, <small> should only appear in an HTML5 page if it’s applied to small print…things like legal disclaimers and, in this case, copyrights.

Summary

As you can see, HTML5 is very big on semantics. The spec has many rules, regulations and best practices to follow when it comes to setting up the page tags. HTML5 Doctor does a great job of taking the somewhat verbose HTML5 spec and translating it into easy-to-understand terms, so they should be your first stop in understanding HTML5 as a whole.

A major major characteristic of HTML5 has to do with how all the page content relates to one another. I briefly discussed this in the <article> and <section> paragraphs above, but the <aside> tag plays a big role here as well. This will be discussed in my next article (again, no pun intended).

Read the entire “Wirefame Series”: Intro» | Page 1» | Page 2» | Page 3»