« Windows 7 reviewed in a strange manner
Designing the future »

  • A Quick Look at HTML5

    Website Design
    5th October 2009 - By Dan

    There’s a lot of buzz about HTML5 at the moment and the spec is changing everyday! Let’s take a quick look at it by marking up a blog!

    Firstly, credit where credit is due – this post is based on Bruce Lawson’s talk at Future of Web Design Bristol.

    Jumping right in

    <!DOCTYPE html>
<meta charset=utf-8>
<title>FOWD</title>
<style>
  body {color: black; background: white;}
  header,nav,article,footer {display: block;}
  header{background: yellow;}
  nav {background: orange; float: left; width: 20%;}
  article {background: lightblue; float: right; width: 79%;}
  footer {background: pink; clear: both;}
  article header {background: white;}
</style>
<script>
  document.createElement("header");
  document.createElement("nav");
  document.createElement("article");
  document.createElement("footer");
</script>
<header>
  <h1>Wuup</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
  </ul>
</nav>
<article>
  <header>
    <h2>I like pizza</h2>
    <p>Published on <time datetime="2009-10-04">4 Oct</time></p>
  </header>
  <section>
    <h3>Toppings</h3>
    <p>I like Pepperoni and olives and mushrooms and ham and beef and peppers
                  and beef and chicken and cheese and tomato and when they put
                  BBQ sauce instead of tomato, well that's just dandy.</p>
    <footer>
      <article>
        <header>
          <h4>What about pineapple?</h4>
          <cite>Alan Hamlyn</cite>
        </header>
        <p>You left Pineapple off your list</p>
      </article>
    </footer>
  </section>
</article>
<footer>
  <p>Here's some footer content</p>
</footer>

    Right, let’s take a look at what’s going on.

    The Doctype

    Remember the XHTML1.1 Strict doctype? No, me neither; mercifully the HTML5 one is dead simple.

    Woah, no HTML tag!

    That’s not a typo – you don’t need that anymore.

    What, no quotes?!

    Look at the meta tag right at the top – there’s no quotes around the attribute! Scary huh? The truth is browsers really down care whether the attribute has quotes or not, it’s only the validators that do – with HTML5 you’re free to make your own choice – you can put in quotes if that’s what your comfortable with, or if you can’t be assed to type them then that’s OK too.

    Erm…the style tag is missing it’s type attribute…

    That is is – the browser knows that the styles are in CSS so you don’t need this anymore!

    What about the script tag? No language or type there…

    Very true – the browser knows the script is Javascript, you don’t need to tell it again.

    And what is that code anyway?

    IE (naturally) doesn’t yet recognise the shiny new tags we’ll be using so we have to use a workaround to make it play ball; this obviously means if someone in IE has Javascript turned off it won’t understand the markup, however it will be able to see content.

    No body tag either…

    Uhuh – every browser adds in it’s own body tag, no need for that either!

    Ok…when I say every browser what i actually mean is every good browser…IE doesn’t so you’ll still need to include the body tag until Microsoft catches up with everyone else (allow for 3-4 decades) – I’ve just left it out here to illustrate it’s not needed by the spec anymore.

    <header>?

    Here’s the first of our new tags – it’s pretty straight forward to understand in that it tells the browser that this is the header for this section (more on that later).

    <nav>

    No more <div class=”nav”>! This handy tag will take care of that for you – there can be multiple nav tags on any single page.

    <article>

    In this case the article tag is defining a blog post. Notice how an article can have a header…

    <time>

    This is a handy one – when you display dates at the moment they can be display in loads of different ways which can make it pretty tricky for search angines and other machines to figure out when you’re blog posy was published – the time tag solves this – by suing the datetime attribute you can specify the time in a machine readable format, because you’re nice like that.

    <section>

    And here’s that later! HTML5 documents are broken up into sections, defined by the aptly named section tag. As mentioned above a header tag within this section will tell whatever is reading the source code that that is the header of the current section – the page itself (which would normally be contained within the body tag) is a section hence the previous header tag contained within the page and not a section is the header of the page itself. I hope that makes sense…

    An <article> within an <article>

    Yup – an article tag within and article tag (you heard me) defines a comment.

    Footer

    Similar to header except it’s a footer – as with header, every section can have a footer.

    <small>?! BLASPHEMY!

    Woah, cool down! In HTML5 small is used to define content such as small print as opposed to text that is supposed to appear small. No presentational mark-up here!

    Other cool stuff

    Forms deserve a special mention – when this was shown at FOWD you could sense the excitement in the room…I give to you the required attribute!

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

    Now I don’t know about you but my least favourite thing to do is write form validation. It’s tedious…check out that above code though – that will validate that field as an email within the browser and display an error message (this error message is currently not editable) – no Javascript required! There wasn’t far off a cheer when that was shown to us!

    Unfortunately because of (you guessed it) IE it’ll likely be years before we can rely and that (it also won’t eliminate the need for backend validation). Cool though!

    placeholder

    This is another form field attribute – you know when you want a form field to contain text and then it to disappear once the field is clicked? At the moment you have to write some Javascript to take care of it however with the placeholder attribute you can add this text within the HTML and the functionality will be taken care for you! This currently only works in Safari.

    <canvas>

    I haven’t talked about the new canvas tag here but I just want to quickly mention it as I’ve been enjoying playing with it recently – the canvas tag allows you to draw bitmap images (and animations) with Javascript – it’s pretty fun!

    Shameless plug: Check out this blog post I wrote on the canvas tag!

    Wrapping up

    That’s that then – HTML5 has been designed with todays apps in mind, hence how a lot of it appears to be geared towards blog type websites so it should hopefully make app development a whole lot simpler in the future (fingers crossed).

  • 2 Comments to “A Quick Look at HTML5”

    Leave a Reply