Quick Tip: HTML5 Features you Should be Using Right Now

I thought the video was great, guess you have to see it to understand why it works as a video.

You’re using an iPad aren’t you…

Actually they do offer tutorials, usually labeled as “How to” programs. And, at least in the U.S., PBS offers whole classes in diverse topics such as science, languages and sociology. Some televised instruction works in conjunction with real world class rooms with text and workbooks. They have done this since the 1970′s. People seem to like video tutorials. I personally like both so I can see your point of wanting text though.
DED

I agree, there seems to be quite a few videos on here recently that would make a lot more sense as text tutorials. Videos are great for demonstrating visual concepts, but IMO don’t make much sense when explaining code or theoretical concepts. Much harder to come back to as well because you need to search through the video for the specific piece of information you’re after.

I know this is a quick tip, but this just seems a bit lazy.

What you don’t have flash installed!!!!! Are you a web designer ?

You misspelled “script”.

Simply assume you’re using more then just the header element, but also the article, aside, nav, section and footer elements.

All you need to do is link to html5shiv and apply a display:block; to all these elements in your css file. If you use now 10-20 html5 elements on your page I think this equals with the time you would normally spend writing div=”header”, etc.

The biggest advantage here is that you make your web site future-proof and more semantic.

I don’t really think Google Analytics can measure javascript-support, considering that it is based on javascript itself or am I wrong here? As far as I know the figure is somewhere in between 3 and 7%.

The html5shiv script is actually only needed for IE, all the other browsers will work just fine with html5 elements, even with deactivated javascript.

You can actually wrap the script within a conditional comment, so only IE will load it:

I use this and just add other elements as required.

/* Note: Make HTML 5 elements block-level for consistent styling */

article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section, title
{
display: block;
}

The header tag is *much* more semantic for an element at the head of the page. Looking through source code, a div could be anything, but a header is a header.

Sure you can use class names and that gives some meaning div class=”header” does tell us its a header, but you shouldn’t need to do that. You’ll say that you need the class for styling, but header { rules:etc; } is almost identical to .header { rules:etc; } And what about with multiple class names, it could just get silly when you end up with 5 class names on it…

the fact that IE doesn’t understand it almost convinces me that it is a good thing! Don’t take your cues about what elements (or styles) to use from IE of all browsers! That’s like deciding what clothes to wear based on ronald macdonald ;)

It can be made to work in IE, if it takes some extra CSS and some extra javascript to work right then so be it – pages may be marginally slower with IE as it has to read these extras, but I’m sure most IE users are used to a slow experience by now…