Falling for HTML5: Finding Love in the Little Things

Advertisement

I’ve lost count of the number of posts that have been written about the big features of HTML5: amongst the most anticipated being rich media (video, audio, canvas) and JavaScript APIs. However, call me a woman of simple tastes, but this is not the sort of thing that gets me swooning. What does? The small additions to the spec that will make the world of difference to the way I code day-in, day-out. This is the stuff fairy tales are made of.

The ugly duckling

HTML has had a troubled past. It was never really designed for what we are now accomplishing with it. This is in part a testimony to its flexibility and adaptability, but there have been inevitable growing pains.

So what was it originally intended for? Well it’s there in the name: Hyper-Text Markup Language. Yes, text; hyper-text to be more exact. Not layout, or images, or video, or fonts, or menus — or any of the other frippery that it now incorporates.

All these techniques started as “hacks” — ways of extending the language which were not accounted for in the original spec. Some of the hacks were uglier than others. For example tables for layout (eek!) were a workable (and reliable) way to manipulate the display of information. Similarly, sIFR1 and other JavaScript techniques often account for things that would more naturally be handled natively by the browser, but at the time were not.

The handsome prince

What we need is someone to come to our rescue. In steps HTML5.

The spec is full of ‘a-ha’ and ‘of course’ moments, and that’s not a surprise seeing as one of its founding design principles is that of paving the cowpaths2:

“When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing
something new.”

— HTML Design Principles, W3C Working Draft 26 May 2009

What this means on the ground is that many of the hacks which are used to bend the existing HTML Doctype to our will are now being legitimised in HTML5. Let’s take a look at three examples which are guaranteed to make every front-end developer smile:

The <a> element

This little beauty is fundamental to how the whole web operates, but up until HTML5 it has been very limited. Limited, in fact to being solely inline. Want to create a large clickable banner which wraps around a title, image and text? Well, you’re out of luck. plain ol’ HTML4.01 won’t let you — not without JavaScript that is.

However, now that the <a> tag has been declared a block-level within HTML5, there is no end to the elements you can wrap it with. You can confidently (and legitimately) have your <p> and link it too!

Forms: the place-holder

Web forms are complex things, and we have developed a number of JavaScript add-ons to make them more usable: date pickers, auto-completes, required elements, validation. A lot of these have a new home in HTML5 but I’m going to focus on one common technique: placeholder text.

This is used where you have a text field but you want to prompt the user — either with the format you would like the text entered (such as a date) or with an example. It is sometimes used in-place of a label when space is premium. Up until now, using placeholder text has required a JavaScript function that auto-clears on focus, and reinstates when the element loses focus (if it has not been replaced by user-entered text). Quite a complex task, one which is now accomplished by the following snippet:

<input id=”examples” name=”examples” type=”text” placeholder=”Enter the things you love about HTML5” />

input showing placeholder attribute3
The placeholder attribute removes the need to add JavaScript to input elements

Section element

Have you ever run a validation on a page and died inside when the following error has come back?

“WCAG v1 3.5 (AA)] Nest headings properly (H1 > H2 > H3”…”

It might be just me, but this error is particularly hard to fix. Imagine a scenario where you have a main column with heading levels inside the content, followed by a right-hand column containing featured items e.g.

<div id=”mainCol”>
<h1>Main title</h1>
<h2>Secondary title</h2>
</div>
<div id="featureCol”>
<h4>Title of feature</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque</p>
</div>

Without knowing what content will be entered in the main column, how do you choose the correct level of heading to start the following column with? You could play it safe and use an h2, but does this really signify the correct semantic importance of this content? Probably not.

HTML5 introduces something called a section element. Each section has its own hierarchy, so you can now have multiple h1s on a page. Do I hear you saying ‘a-ha’? As well as eliminating the above error, this also means that content can be more easily reused. For example, when using a CMS, the modules and components can be reordered on a page without having to consider how this might upset the existing hierarchy. Genius.

Happily ever after

Ensuring you code 'happily ever after'4

The best news by far is that we can start implementing many parts of the HTML5 spec right now. This is due to another founding design principle; graceful degradation5:

“On the World Wide Web, authors are often reluctant to use new language features that cause problems in older user agents, or that do not provide some sort of graceful fallback. HTML 5 document conformance requirements should be designed so that Web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.”

— HTML Design Principles, W3C Working Draft 26 May 2009

That means no more waiting for IE6 to fall of its perch, or constantly asking ‘is HTML5 ready yet?6’ like the impatient child in the back car seat. It means continuing to support IE6 (for most of anyway) but shattering the myth that a website should look exactly the same in all browsers7. It means carefully considering which HTML5 elements to use, which CSS3 selectors and properties to adopt to ensure we are building websites for tomorrow, not today.

Changing habits

In the short term it’ll mean a bit more work for us in the templating process, and we might need to adapt our workflow accordingly. Here are some questions you might need to ask yourself:

  • Have I adjusted my estimates to allow for adapting the design in different browsers?
  • Have I given myself enough time during build to familiarize myself with new processes and techniques?
  • Have I set the right expectations with my client / the designer / my manager about how the website will look across different browsers?
  • Are there few enough users to degrade support for IE6?
  • Do I need to include JavaScript to add support for CSS3 and HTML5 features in older browsers?

It might seem like a lot of hard work, and something to be put off, but ignore the changing landscape at your peril. Besides, you’ll have plenty of time on your hand as soon as you stop slicing up all those images to add rounded corners, drop shadows and gradients to your design!

So how will this fairytale end? Crack-open your favourite code-editor, type “<!DOCTYPE html>” and you get to write it…

Footnotes

  1. 1 http://www.mikeindustries.com/blog/sifr
  2. 2 http://dev.w3.org/cvsweb/~checkout~/html5/html-design-principles/Overview.html?rev=HEAD#pave-the-cowpaths
  3. 3 http://coding.smashingmagazine.com/wp-content/uploads/2011/01/html5falling.gif
  4. 4 http://coding.smashingmagazine.com/wp-content/uploads/2011/01/rings3_optimised.jpg
  5. 5 http://dev.w3.org/cvsweb/~checkout~/html5/html-design-principles/Overview.html?rev=HEAD#degrade-gracefully
  6. 6 http://ishtml5readyyet.com/
  7. 7 http://dowebsitesneedtolookexactlythesameineverybrowser.com/

↑ Back to topShare on Twitter

Lead Interface developer at Fairfax Media focused on delivering usable, standards-compliant and innovative web solutions. My role is to advise on accessibility and front-end coding practices; create opportunities for my team of developers and get my hands dirty in the code too. I don't always strike the right balance but I nearly always have fun trying!

Advertising
  1. 1

    Great article very much makes sense!

    I have been using HTML5 for some time now and love it. One thing I particularly like is now I am using HTML5 I find myself very much focused on semantics (where I wasn’t in the past), I am taking the time to ensure I am using the best possible element and everything is in the right place.

    One thing I have noticed about the normal comments you get on posts about HTML5 is everyone seems to focus on Video, Audio or Canvas and how they are not supported enough to be used on clients sites thus you can not use HTML5.

    I have now developed several sites using HTML5 and only one of them required video. So my use of HTML5 is really based on the new semantic elements such as nav, article etc of which the shiv is the only thing needed for support in IE, so I don’t see any reason not to be using HTML5 if only to make use of these new elements.

    Another little thing which is overshadowed by Video, Audio and Canvas is the “data-*” attribute so you do not need to store information in class’s, ID’s or other attributes for use with jQuery (or another library), just makes your code feel clean.

    0
  2. 2

    I agree with Shaun – it’s nice to read about HTML5 rather than CSS3, JavaScript and video formats.

    It is also nice to see good reasons for people to use HTML5 right away – rather than waiting for some magical date in the future. Especially as there are methods for making it work in older browsers already:

    http://www.stevefenton.co.uk/Content/Blog/Date/200907/Blog/HTML-5-Browser-Test/

    Hope to read more from you on this subject soon.

    0
  3. 3

    Nice article, thanks.

    I agree with Shaun, it’s nice to see a post that doesn’t bang on about the canvas tag all the time!

    I have not started using HTML5 yet put your post is encouraging me to pull my finger out and start implementing it!

    0
  4. 4

    I am now officially an HTML5 convert. I have also been quite unimpressed with the flashy HTML5 presentations all over the Web, evangelizing the coming of the new age of the web or whatever. This down-to-earth article was spot on – why HTML5 is so great for the day to day development operations and why we should start using it now.

    Thank you, Felicity.

    Joakim Lidström
    Web designer, Sweden

    0
  5. 5

    I totally agree with you, Felicity (cool name btw)!!!

    I just started a month ago dabbling into HTML5. Before that, I have to admit, I was also more negative about it then positive. After reading Hardboiled Web Design from Andy Clarke, I got exited and started to experiment (also with CSS3) and now I think why the hell did I wait so long for it to happen. I look now more forward in my development process then backward. I just use now what is save to use and it will only get better and better. Of course I do support still the older and less capable browsers, but I’m not going to spend endless hours anymore writing hacks or workarounds for them. They just get a simplified version of the site… as simple as that!

    0
  6. 6

    @Joakim thing is all those online presentations of HTML5 are pure Javascript using some HTML5, they do not show nor do they explain something about HTML5.

    Articles like this one here are the real deal, making us designers want to try HTML5 right now, so thank you Felicity, I will follow your advice :)

    0
  7. 7

    HTML5 should very much be about the semantics of the markup. People get easily carried away by new technologies and think its all about pushing limitations of what current platforms can do – it’s not!

    A well written article Felicity, thanks for bringing people back down to earth.

    Lets hope people focus on what matters and implement HTML5 today, in the way it was intended.

    0
  8. 8

    Placeholders are one of the worst inventions ever, they suck for usability. First they get in your way in the field, and are too easy to confuse with pre-filled fields. As soon as you type one letter the placeholder disappears unexpectedly. And of course, as soon as the placeholder text disappears, you’ve lost whatever instruction was there.

    I’m of the opinion that if you need placeholder text you are doing something wrong. Stop trying to cram your form into the tiniest of spaces; let is breathe and add some proper labels.

    0
    • 9

      @Scott I never meant to imply that a placeholder should replace a label – indeed if we’re talking semantics a label should always be present (although sometimes it’s visually hidden).

      However I think there is a legitimate use for placeholder within the spec, for example if you want a phone number to be input in a certain format e.g. including international codes then a placeholder can indicate what would otherwise take an entire sentence to explain.

      0
  9. 10

    I do like the new article and section elements, but I’m not sold on the multiple H1′s on a page yet. It just feels dirty to me.

    I definitely see search algorithms changing a bit as there will be an influx of pages starting to adopt and use this ability. This could mean that source order will hopefully become a bigger priority to those who may not pay complete attention to it now.

    0
    • 11

      @vernon I’m not in a position where I can use a lot of the new elements in my day-to-day work, however long-term I think this approach is one that acknowledges how the use of the web has changed. It was originally an academic medium for publishing papers (so a single H1 fits this scenario) however it has moved to becoming a method of curating a number of streams of information (often within one page), so we need a fundamental shift in how we semantically mark-up content.

      0
  10. 12

    If you want a large clickable area with block level elements, HTML4 has always had a solution for you. The button tag allows practically any content with the exception of form elements and the anchor. Now you’re probably saying to yourself, “Yeah, but without a form or Javascript, a button doesn’t DO anything.” Well, sure, until you wrap it with an anchor!

    [a href="http://www.smashingmagazine.com"][button]block content[/button][/a] works perfectly in every browser except one. Right, IE. It’s always IE. Even IE8 fails with buttons wrapped by anchors. Unfortunately, redefining the anchor tag to allow block content doesn’t make IE a better browser. If only it were that easy…

    0
  11. 13

    Congratulations. It´s a very good article. I don´t use HTML5 at this time, but i’ll test it soon…

    Cheers.

    0
  12. 14

    “Want to create a large clickable banner which wraps around a title, image and text? Well, you’re out of luck.”

    Well, it has always worked but not validated.

    Which begs the question where the problem actually was. Another way of putting what is expressed in this article with respect the ‘a’ tag might be that validation is finally catching up with what people are actually coding?

    Evidently design and programming practice lead validation.

    If validation actually led designers and programmers then that would be like saying that we won’t do anything until we are told that we are absolutely categorically allowed to do it.

    Not a sure fire way of inspire creativity. I pray that the creative of you all find ways to bend the html5 rules even further . Validation is for sissies ;-)

    0
  13. 15

    What I’m seeing is that the markup written with HTML5 is being more and more tied to the presentational aspect of a website, unlike in the old xHTML days.

    I believe the content of a website should be marked up in a way that is purely semantic, that is, *what it is* instead of *how it looks like* or *how it behaves*. That’s the job of another layer in the tool chain, i.e. JavaScript for behavior. By putting placeholder text in the HTML, for example, you are already committing to a certain look and feel of the input box, determined by however browsers end up implementing it, instead of semantically structuring the information -in this case, what the heck a user is supposed to enter in the box-.

    0
  14. 16

    Great reading your article. I started working on HTML5 and found it quite revolutionary in the way we work with HTML. I also recommend the book “HTML for Web designer” which gives a good introduction on the subject.

    0
  15. 17

    so can I start using something like placeholder text now? which browsers support it? if not all support it, does it play nice with the old javascript way of doing it?

    This sort of the thing can’t be dealt with using gracefull deradation (eg rounded corners for modern browsers, hard corners for older ones) it has to be provided to all users.

    0
  16. 18

    This is f* annoying!
    By the time i finished reading the comment’s i’ve clicked 50 times (by mistake of course) the smashing book ad on the sides (which is blank)!

    Have mercy people!

    0
  17. 19

    HTML5 is by far the best markup specification with CSS3. Now everything is more oriented to presentational and the amount of time needed for slicing reduces a lot.

    You can start using HTML5 now, just using the propper DOCTYPE and thanks to graceful degradation all your XHTML code remains validated. Starting this point you cand insert as much HTML5 as you can or want.

    0
  18. 20

    Great article. Very much appreciated. Has everyone seen the new HTML5 logo recently released by the W3C. Check it out.

    http://www.w3.org/html/logo/

    Also, check out my latest illustration supporting it.

    http://www.sleekdesignstudio.com/html5poster

    0
  19. 21

    My next site will be html5 and I’ve always done graceful degradation allowing to use CSS3 wherever I can with the knowledge all sites will not look exactly. That’s OK, they still work and function beautifully. I know the new html5 now just putting it into practice is another thing. Good ending piece about time allocation during the build process.

    0
  20. 22

    Like the statement, there’s another one that is short and sweet: . I use this all the time.

    0
  21. 23

    Yes, very cool to read about some of the “smaller” features of HTML5 and how it’ll help us build better websites, rather than another doom-and-gloom about Google not supporting H264 video in Chrome anymore, etc.

    P

    0
  22. 24

    Just wanted to point out to those who are using it, HTML 5 there are still some issues with screen readers, which you may want to take into consideration depending upon your client and what laws/regulations they are subject to.

    More info: http://www.accessibleculture.org/research/html5-aria/

    0
  23. 25

    Audrius Jankauskas

    January 21, 2011 11:34 am

    Very nice and easy to read article. As for web software developers it’s always a hard decision which browsers we need to support. HTML5 is a very big step forward.

    However, graceful degradation still takes more time than we would want. Everything goes around IE. You want it or not. In one way or another. IE6 gave us a very hard time. I hope IE9 will be a relief.

    0

↑ Back to top