Quick Tip: HTML5 Features you Should be Using Right Now

Jeffrey Way on Apr 19th 2010 with 125 comments

Tutorial Details

Technology: HTML5
Format: Video
Length: 4 Minutes

This entry is part 1 of 14 in the HTML5 and You Session
Next »

With all this talk about HTML5 not being complete until 2022, many people disregard it entirely – which is a big mistake. In fact, there are a handful of HTML5 features that we can use in all our projects right now! Simpler, cleaner code is always a good thing. In today’s video quick tip, I’ll show you a handful of options.

Subscribe to our YouTube page to watch all of the video tutorials!

Or, watch this video on Screenr.com.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Jeffrey Way

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

flashmac
Just changed my old style doctype to the new HTML5 doctype to see what happens..
My Firefox validator (set to SGML) hates it:
line 1 column 14 – Error: no internal or external document type declaration subset; will parse without validation
anyone else get this?

Adam
Add-on validators hate it because they haven’t been updated to reflect the new HTML5 doctype. That doesn’t mean that it isn’t parsed as valid HTML5.
Check it out using the W3 validator (http://validator.w3.org/) and you’ll see that it’s fine.

Jim
Thanks for the quick tip, Jeff! Keep ‘em coming.
http://www.profeval.com Derrick
I hadn’t heard of using HTML5 elements within older versions of IE… Very nice!
Val
it is nice but your design requires JS! so it is not useful for big projects :-/

http://BinaryKitten.me.uk Kathryn Reeve (BinaryKitten)
Val, the JS is only needed for support of old browsers.

http://www.freshclickmedia.com Shane
Good video Jeffrey.
I like these videos – they’re nice, 5 minute nuggets of information. I’m not using HTML5 at the moment, but am strongly considering it.
http://jose-mota.net José Mota
I didn’t know about the styles, scripts and charset simplifications. that’s awesome, my blog will look so much cleaner now. thanks Jeffrey!
Eric
1. Thanks for adding links to screenr.com since i cant get to youtube at work due to proxy settings. <3<3<3<3
2. Jeffery, what does removing type="text/css" and "text/javascript" do for strict vs quirks mode for IE6-8?. does failing to use the type attr throw it into quirksmode? Or does it automatically assume text/css and text/javascript? i dotn want to start pulling those attrs out willy-nilly if there are problems with IE or other browsers…
3.I've been using for a couple weeks now because i was told that it basically says to all browsers that DONT understand it as the HTML5 DOCTYPE, “Render in html STRICT/STANDARDS mode” and avoids rendering the page in quirks mode.
4. +1 to video tuts. I see you do SO MUCH on so many sites, that taking even 5 minutes out of your day to record a quick vid is time well spent. not to mention that it would take well more than 4x that to actually write up all the code in the post as mentioned in previous comments.
<3 <3 <3 nettuts

yozloy
Hey,Eric, Which country are you coming from?

chichibek
jeffry way soy un lector de tus aportes, podrias poner subtitulos a tus videos, creeme mas de una estaria agradecido
Bryce P
I am fairly new to the design industry, but I have noticed that my style sheet is available and accessible when viewing the page source;however, if I don’t add the rel=”stylesheet” and type=”text/css” to my stylesheet no styles are implemented from that stylesheet. Perhaps you can shed some light on my rookie mistake. I am all for faster and cleaner code, but like I said I get no stylesheet without keeping the rel and type.
Cheers
Thanks for your great tuts.
http://rockingthemes.com Francois
I was just thinking the amount of characters removed to save file size, was quickly replaced with adding all the additional code IE needs to understand the rendering.

http://www.taylordaughtry.com Taylor Daughtry
Great point, but you have to consider progressive enhancement. There’s no need to avoid HTML5 tags just because one browser needs Javascript. Yes, right now the code is about the same, but when HTML5 becomes more popular, you don’t have to worry about it – it’s already implemented. :)

Steven
Thanks for these tips but I would really really like to see a text version since I can’t see the videos with sound at this location.
http://www.dumidesign.com dumidesign
great Article!!
Dumidesign
http://www.dumidesign.com
http://noobowned.com/ CyrusKafaiWu
Thank you for telling us about this. I hope for this to be an text verison not just a video which is alot easier for me.
http://adrusi.com adrian
That’s a lot more efficient but I have a question, is it possible to omit type=”text/css” from link tags
()

Max
Yes you can omit type=”text/css”, even if you don’t close the tag it will be validated as html5 :

s.r.
Nice and useful post!! Thanks
Is anybody have heard about that google won’t support and crawling all websites with invalid markup?
Seems to me looks unbelievable !
Vasiliy
Jeffrey, you did not actually explain – what are real benefits of html5 for users of site? or may be for search engines?
i mean we can code in old div-css-style and don’t worry about IE without JS :)
why should we go to html5?

http://www.taylordaughtry.com Taylor Daughtry
By that logic, why should we go to CSS3? We can do the same things with a little javascript and CSS2. :)
It’s for progressive enhancement, and helping the web progress.

http://www.free-ebooks.gr Dimitris S.
WOW.. Html got much cleaner!
http://www.squidgemedia.com Andy White
Hi Jeff
I’m just getting into HTML5 today, mainly spurred on by jQuery tools’ new validator!
So, I’m just wondering… with the header/footer tags. The spec says that this isn’t a sectioning element but people seem to be using this, as you have, as a top level section. I’m getting a weird top margin that I can’t control with CSS when I do that and I was just wondering if you had come across it and had any ideas?
Cheers
Andy
Chris
What bundler are you using for Textmate to color code your HTML5?

Chris
Sorry, should clarify… I meant for it to color code in CSS. Right now if I do:
header {} then it shows up white instead of orange (the theme I have)

http://www.dmcgames.co.nz Best Online Games
Thanks for the post. Great tips!
Sherwin
Nice one, All of my html codes will be cleaner now xD
http://matthewmalone.co.cc Malone
Thanks for clarifying this. I watched your CSS: Noob to Ninja series and wasn’t sure what HTML5 elements would rely on js, so this is exactly what I needed. Already made the changes in the site I’m currently working on.
Tiki
Saw this great post when it first came out – and have since changed my coding ways. Infact – so inspired I took myself off to an awesome HTML5 Course in London. Thoroughly recommend it to anyone who wants to start future proofing their sites and to get an incite into what awaits. Check out: http://dndigital.net/training/html5/
http://www.fastlovespeeddating.co.uk/ matt
Nope; W3C online validator doesn’t like it when I add them to my site. Change the !DOCTYPE to the html5 version shown and it fails , mentioning the etf-8 decloration, so changed that to meta charset=”etf-8″, again, as shown, and I got even more validation errors, again, seemingly centering around the etf-8 decloration
COMIC SANS
What kind of people use comic sans in a text editor… seriously…

hahaha
What kind of people use Comic Sans in general…seriously…
Sans
if you’re referring to the video, that’s not comic sans.

http://www.bijusubhash.com Biju Subhash
Thank you for the great article…
THE DOUBL
Great!!!! HTML5 is amazing. but i’m coding with microsoft expression 2.0 and it seems, it does’nt support html5. Do you know any editor (windows) i can use???.

http://www.jaymanpandya.com Jayman Pandya
If you are pointing to syntax highlighting by using the word supporting HTML5 you can use the freeware application Notepad++. I don’t work on MS Expression Engine so cant suggest more on that.

HAD
why using JS can be bad for big projects?

http://www.jaymanpandya.com Jayman Pandya
Bigger projects normally target a wide range of audience and there are many people who opt to browse keeping the Javascript in their browser turned off. This thing can throw your project on toss if you rely on javascript to make the basic structural blocks of the page.

http://www.jaymanpandya.com Jayman Pandya
Hey Jeff,
Very nicely explained the difference between the HTML4 and HTML5. I really loved the idea of transforming the document from one spec to the other. I think thats the best way to identify the actual differences in the spec.
Duc Ngo Viet
Hey Jefrey,
I dont think that the shortened meta charset utf8 statement works for IE. I tested it and things like Ü, Ä, Ö arent displayed correctly.
cheers
http://www.esylhet.com/ sylhet
In this video there are no head tag in this tuts.
In html5 is where is the head tag ?
http://www.novasoftware.com/ Nova
2022? I don’t know if the web was dead then.
http://www.sylhostbd.com smrkaes
Sort of Lame CSS Text Changing
h1 { position: relative; }
h1:hover { color: transparent; }
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
Don’t Touch Me
Bob
Newbie alert! Why do you have the googleshiv script in the section, but the jquery script at the bottom of the html? Is it standard procedure to put certain at the end (before the )? Or doesn’t it matter?

http://www.facebook.com/profile.php?id=583178392 Raghu Kanchiraju
Because, with JQuery we are adding functionality for the website. To do that we need every element of the webpage to be present before jQuery does anything, so the page should load first and then the scripts. However with html5.js, we need it before anything loads, because we have to tell some (older) browsers beforehand how to display certain elements like header, article etc. That is why the order of script files is what it is.