Thursday, November 25, 2010

5 Reasons HTML5 is Awesome

1: Video and Audio

What is that exactly? — Well, the video tag and audio tag are embeddable into your html5 page and make use of the browser's media player instead of requiring the browser to have a specific plugin to playback any video or audio.

It's also great because it's fully styleable as well. You can use javascript, or CSS to manipulate the size, color, etc. on the fly. Another really cool feature of the new video tag is called "poster". You can add a screenshot frame for when the movie isn't playing. Look at the example below:

Sorry, your browser doesn't support the HTML5 Video tag yet :(

<video src="" poster="" width="320" height="280" controls></video>

2: New Input Types and Attributes

What's so great about these? Well, for a few they add extra features to the generic inputs. tel, for iPhones make the telephone keypad come up instead of the full keyboard forcing the user to have only numbers, star and pound as options. email, again for the iPhone makes the keyboard with "@" and ".com" appear in place of the space bar.url, makes the iPhone keyboard with ".com" and "/" take the place of the space, isn't iPhone exclusive. Search-type input gives the user an 'x' button, or a clear field button, inside the input after the user has typed something.number, requires the user to use numbers only, no letters or special symbols can be inserted.

Besides new types though, there's a new attribute called "placeholder". This one is great! How many of you can type:
<input type="text" name="user" onfocus="if(this.value=='Username'){this.value='';}" onblur="if(this.value==''){this.value='Username';}" /> your sleep?

But it was pretty awesome to do that! Well, now it's soooo much easier. You literally set the placeholder attribute to what you want your example value to be and you can forget javascript altogether.
<input type="text" name="user" placeholder="Username" />

iPhone users, test these fields out.






3: Cut Out Extra Meta Crap

I didn't know to describe this one. But for me it's a plus. Basically I'm trying to refer to how the doctype declaration was shortened, meta charset was shortened, and stylesheet's types aren't necessary, neither is declaring your <script> as type="text/javascript".

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

This makes it easier to remember how to properly code without needing a template. You could just start it up from scratch. Not a huge deal, but I like it.

4: Phasing Out <div>

Html5 started using a <section> tag which is basically the same thing as a div, but sounds cooler. With section, you can add a <header> tag and place your h1,h2,h3's and so forth inside to signify the heading of the section. You can also add a <footer> to signify the about properties of the section. All in all, weak, but new.

5: Five Reasons is Hard

I really was excited for the video and audio tags, but, really that's all that's awesome. When I write a CSS3 post, I will have almost unlimited reasons why I'm looking forward to CSS3 becoming standard! So reason five will be, canvas. I totally forgot about canvas. Canvas is actually pretty cool. Basically it's like the browser rendering an image based off math. So, if you're good a math, it's cool. I made a square. Then again, canvas isn't made to replace img but still, that's what I want!