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!