Quick Tip: HTML5 Features you Should be Using Right Now
Tutorial Details
- Technology: HTML5
- Format: Video
- Length: 4 Minutes
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.
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
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
Cloud Networks Australia - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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?
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.
Thanks for the quick tip, Jeff! Keep ‘em coming.
I hadn’t heard of using HTML5 elements within older versions of IE… Very nice!
it is nice but your design requires JS! so it is not useful for big projects :-/
Val, the JS is only needed for support of old browsers.
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.
I didn’t know about the styles, scripts and charset simplifications. that’s awesome, my blog will look so much cleaner now. thanks Jeffrey!
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
Hey,Eric, Which country are you coming from?
jeffry way soy un lector de tus aportes, podrias poner subtitulos a tus videos, creeme mas de una estaria agradecido
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.
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.
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.
great Article!!
Dumidesign
http://www.dumidesign.com
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.
That’s a lot more efficient but I have a question, is it possible to omit type=”text/css” from link tags
()
Yes you can omit type=”text/css”, even if you don’t close the tag it will be validated as html5 :
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 !
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?
WOW.. Html got much cleaner!
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
What bundler are you using for Textmate to color code your HTML5?
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)
Thanks for the post. Great tips!
Nice one, All of my html codes will be cleaner now xD
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.