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!