HTML5 – Opera’s Bruce Lawson has some key tips

HTML5 – Opera’s Bruce Lawson has some key tips

/ 2 minutes of reading
Bruce Lawson
Bruce Lawson

Yesterday I went to see a Skills Matter HTML5 talk by Bruce Lawson, a member of the HTML 5 User Group, self proclaimed ‘open web standards evangelist’ for Opera and co-author of ‘Introducing HTML5‘.  Here are some of his tips for using the new markup language:

  • HTML5 doesn’t require quotes like XHTML1
  • Use html5.validator.nu to validate your code, it’s one of the most up to date validators available
  • The ‘language’ element isn’t essential in the spec, but do use it so that screen readers can ascertain what language to read
  • No <head> and <body> tags are required
  • You can use HTML5 tags now is all browsers, as they simply ignore tags they don’t understand, rather than throwing error messages like php or xml
  • There are a new array of tags to use, but the <div> tag still has a purpose.  Use it to group together items which you want to apply the same style to.
  • <small> has been redefined, it’s now used for small print, such as the copyright notice in the footer
  • Think of <article> as an item of clothing, rather than a newspaper piece
  • You can have multiple <header> and <footer> tags
  • The <time> tag is a place for you to put a date which can then be read by computers (useful for indexing content for instance)
  • In current browsers (bar IE), use the following code to show any HTML5 tags you use:

&amp;lt;style&amp;gt;

header, footer, article, section {
      display: block
}

&amp;lt;/style&amp;gt;



&amp;lt;script&amp;gt;

document.createElement('header');
document.createElement('footer');
document.createElement('article');
document.createElement('section');

&amp;lt;/script&amp;gt;


  • With Forms:
    • Error checking is built in.  Add the ‘req’ attribute for required fields, ‘type=email’ and ‘type=url’ to validate email addresses and links
    • There are some new input types too: ‘type=range’ gives you a slider and ‘type=date’ gives you a calendar
  • The <video> tag enables you to embed video without the need for flash.  The codecs used in the browsers vary at the moment which means you have to encode the browsers in two different ways to ensure it is cross browser compatible.  However as the video is rendered by the browser rather than Flash, this means you can manipulate the video itself, for instance reversing the pixel colours of the video – very interesting indeed!
Anyway, it was a great introduction to the new language, showing that it effects which are currently difficult to achieve will become much easier, in turn giving us the opportunity to push the boundaries further again.  I imagine when IE9 is released the usage of HTML5 will increase dramatically.  Looking forward to it.
Scroll to Top