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:
Code:
<video src="http://dillonchristensen.info/cinema/ap.mp4" poster="http://dillonchristensen.info/cinema/ap.jpg" 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 bar.search, 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';}" />
...in 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.
Tel:
Email:
Url:
Search:
Number:
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>
<html>
<head>
<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.
