HTML5 on Beanstalk’s landing site

I was excited and eager to try HTML5 in a real project for a long time, so when Gilbert redesigned the Beanstalk landing site I was fully armed for coding it. The web doesn’t need one more HTML5 overview, so this post will focus on 5 things I liked the most during the project.

1. Semantic tagline and subtitles

<hgroup>
  <h1>Beanstalk</h1>
  <h2>Version Control with a Human Face</h2>
</hgroup>

The hgroup element saved me twice during this work – first for coding our logo and then for marking up subtitles on pages like Partners or Security. It was a pleasure to ditch <p class="tagline"> and other mess like that.

2. Using <h1> as section header

<section>
  <h1>Mom, look at this header!</h1>
</section>

In HTML5 each section can have its own <h1> element, so it’s much easier to maintain the correct page outline.

3. Better forms

<label for="fname">Full name</label>
<input type="text" id="fname" placeholder="First">
<input type="text" id="lname" placeholder="Last">

The Placeholder attribute was a nice and painless way to add text placeholders without any JS.

<input type="email">
...
<input type="url">

On the signup and blog comments forms we used new input types – email and url. I especially love how they improve the user experience on the iPhone with customized keyboards.

<input type="text" required="required">

Finally there is a way to semantically mark required fields!

4. figure element in features tour

<figure>
  <img src="../images/ss-repositories.png" alt="Beanstalk Repositories">
</figure>

This element may be used for much more than images, but I decided to use it in our feature tour. Sadly, optional <figcaption> child element didn’t allow titles and paragraphs, so I wasn’t able to use it for captions. The <figure> element may not suit the feature tour 100%, but I believe that so far this is the most appropriate element in HTML5.

5. Meaningful dates in blog

<time datetime="2010-03-18" pubdate="pubdate">Mar 18</time>

This speaks for itself. A great way to add semantic meaning to dates.

* * *

Overall, this project went really well. I had only 3 minor issues:

  • Wrapping several block elements (like H1 and H2) in A element still doesn’t work well in most browsers.
  • Textmate incorrectly highlights HTML5 elements in CSS.
  • HTML5 elements code folding doesn’t work in Textmate, too.

After spending couple of weeks with HTML5 it’s painful to get back to old XHTML 1.0 projects – I miss all these funky features!

Comments

Our products