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
I'm the editor of Nettuts+, and help out on the Envato marketplaces.. I also (very infrequently) blog on my personal site. Feel free to check that out as well...if you're bored. Follow us on Twitter, and subscribe to the official Nettuts+ YouTube page if you want to live.
Join our newsletter!
Freelance Jobs
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
Great post 1!! cheers !!
Is this W3C Valid?
Thank you very much, very informative tip!
Great tips, I already use all of these in all my projects.
Why make this a video? I don’t have flash installed, and HTML is by it’s nature much more suitable to be shared via text, hence the reason why radio and TV don’t offer tutorials.
I thought the video was great, guess you have to see it to understand why it works as a video.
Why read it when you can watch it, video baby, ya got to love it!
You’re using an iPad aren’t you…
Absolutely should have been a text. Especially considering this tutorial is all about coding and displays nothing in a browser, nor has any changing browser effects from one version to the other.
I’m sorry, but I could have saved myself some trouble if this were a text tutorial because I wouldn’t have to wait for an explanation before the next bullet or point is introduced.
Also, it becomes a pain to refer back to later to check these techniques before they become embedded in my brain because I can scan a text tutorial in 60 seconds max, while I need to reserve 5 minutes for this video every time I want to refer back to it.
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
Well, it is called a quick tip, remember? If you wanted Jeff to write it in html, check for error spellings, taking screenshots, cropping images, create a demo, etc.. then it would have taking longer then 5 minutes which aint no quick tip no more.
Oh and just install flash gvd.
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.
I love these quick tips and I prefer video format for almost all tutorials. Either way seems like a lot of moaning over nothing. It’s only 4 minutes long and if you don’t have flash installed then it’s kind of your problem
What you don’t have flash installed!!!!! Are you a web designer ?
Wow! Great stuff. Thank you Jeff. Are there more features like that? What about css? Anything we should be using?
Well 2022 is quite a long wait (darn), yet you are right Jeff of disregarding it. HTML5 and CSS3 is good to use already.
Thanks for this nice quick tip.
A nice addition to HTML5 that you can use today is custom data attributes..
e.g.
London
This is also very useful when working with web apps and means your not limited to the elements ID attribute
Becomes…
Not sure about CSS selectors, but jQuery picks this up as just another attribute. It’s not new functionality, just valid now
Mmmmm HTML5, thanks for this tut.
But, it is not valid by W3C HTML5 checker :|
http://validator.w3.org/check?uri=http://astrastudio.info/html5.html&charset=(detect+automatically)&doctype=HTML5&ss=1&group=0&verbose=1&user-agent=W3C_Validator/1.767
You misspelled “script”.
I like the tips on the doctype, meta and style/script tags but I don’t really feel that the header example was that great. Instead of me just using a tag I have to instead do , add some style so that it works, and then add another script just so I can use headers. Doesn’t seem that advantageous. Unless there is something that the header tag now allows me to do using html5, I am not really sure why I should use it now over one tag with no added 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.
Also, over time, using specific elements to declare different parts of the site, and specific content will be getting picked up in search engines. This will improve your SEO, and improve the ratio of html to text on your page.
So what’s the benefit of using js to render new HTML5 elements vs. the traditional way (“<div id="header")? Would the traditional way be more accessible? Is this just a "hey, cool" moment or am I missing something?
I'll start putting the new doctype, style, and script right away.
Thanks for the tut! Extremely informative.
I really liked these.. Gotta agree with previous comment about the header-tag tho. At the time being I dont think it’s a nice feature considering so many people actually dont support js (atleast not according to my google-analytics) but I suppose the js wont be necessery when its finalized (?)
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:
Your “js” that you refer to is “JAVA” according to google analytics. totally different than javascript.
because as Ximi says, google analytics RELYS on javascript to run, you wont ever show a visit to your webpage with javascript turned off.
you could find your % of users visiting your site without javascript enabled by comparing your GA visits to your raw server visits.
Thanks Jeff, I will start using them now.
@Jonathan Call me crazy, but I’m pretty sure Google Analytics requires javascript to track. So, if someone doesn’t have it installed their not going to show up as a visitor in the first place. I think you’re confusing javascript with java which are two entirely different things and would make for some really skewed views on your users.
I wasn’t thinking of using html5 in any coming projects, but I guess I’ll have to give it a try :)
Thanks for video.
Do we still need to display block the header tag after including the html5.js ? and if so, do we need to do the same with all the new html5 tags?
Jeffrey, I’m interested to know why i *should* be using HTML 5 and it is safe to do so. I’ve seen no final versions or atleast no documentation announcing the release of HTML 5 being official.
I may have entirely missed something, but I thought the implementations of -webkit -moz where entirely in the hands of those developing upon those standards as desired by the community on the whole thus pushing for these features to be implemented in HTML 5.
Whilst you never mentioned -webkit or -moz as these are browser specific, surely this is why we aren’t seeing things like in IE as it is still a draft. I know IE is painfully slow, but surely if HTML was solidified they would have got to these landmark tags had it been official and not subject to change.
Obviously there are many more browsers out there that need to be considered when working with standards. Look at how anything prior to blue-ray 2.0 became obsolete. Similarly WIFI draft-N.
The chances may be slim, but this is how i’m interpreting it.
What do you think?
You should use HTML 5 because it doesn’t require so much code, thus it reduces the chance for something to go wrong.
The spec for CSS2.1 is only a candidate recommendation and yet IE8 (apparently) has a full implementation of it. The standard doesn’t have to be complete for browsers to start using it, in fact that’s the only way it can become a standard.
Don’t get confused between CSS and HTML, Jeffrey didn’t mention CSS because this video is specifically about HTML. Furthermore IE9 already uses a notable amount of CSS3 and HTML5, but only because people are using these languages already.
If you ignore the Javascript-specific tips from this video then you’re still left with other HTML 5 features that work correctly across all browsers.
Hi Ron,
Thanks for clearing that up.
“The spec for CSS2.1 is only a candidate recommendation and yet IE8 (apparently) has a full implementation of it. The standard doesn’t have to be complete for browsers to start using it, in fact that’s the only way it can become a standard.”
This part here was particularly enlightening. So what you are saying here is once the browser vendors make an active choice to include a community called upon feature. Like -moz-radius and html 5 tags like it’s up to the other vendors to follow suit quickly.
When the big browsers have a common base for features the boundary gets pushed more and the competitive advantage begins to show.
Hence the browser wars. :)
Awesome, thanks.
*canvas* , *video*, *header*, *section*, *footer* and so on.
Jeffrey, could you please add a text description of the video too? You used to do this with other “Quick tips” in the past.
Great! I’ve been hesitant to dig in to HTML5 just because it seems so far off. Now I have somewhere to start.
Thanks a lot, Jeff. Found it very useful, as I really didn’t dig deeper into that, thinking it’s not worth it to use it if it’s not widely supported.
If I use google JS do I need to put that header display: block ;
So you cleaned up some code, but added more code to account for the lack of IE support. HTML5 is going to be a nightmare if the browsers don’t start supporting the same tags and the same attributes within those tags, especially if those tags are somewhat mission critical, like the video tag. Have you tried the video tag in various browsers? Not cool.
Please stop with video tutorials -.-
Great little video, Jeff.
I like these Quick Tip videos even if, as some suggest, the info could be presented more efficiently as text.
All I do, all day, is read text—be it client content, client code, client content inside code, or the text on the half-dozen or so tech blogs I read every day. Seriously, it’s enough already.
It’s nice to just sit back and watch and listen for a change. Very relaxing … and I learn something, too.
Your Quick Tip videos are my intellectual Doritos … please don’t stop making them (and I won’t mind if you don’t include the text below the video) :)
Intellectual doritos – I like that. :)
Nice tutorial as always Jeff!
Personally, I don’t mind if the tuts are in video or text format. It’s a shame some people aren’t more grateful for the large amount of help they’re given via these FREE tutorials.
Please keep up the great work!
Hm ok there is that “shiv” js file that takes care about creating that ( in this case ) “” tag for IE, but we still need to set it to “display : block”. Do i`m missing something or why doesn`t that “.js” files do it for us?
At the moment it creates that element it should set it to “display : block”.
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;
}
Thats like extending your (re)set.css hm? I guess that will work good enought but i will love that day when i dont have to start with 50 lines of code only to start from scratch.
Yeah – you set display:block on the new elements to ensure that they all render them correctly as block level elements. But IE will still be confused. That’s why you use HTMLShiv to help IE understand.
Nice tips…not sure I think it’s worth using the tags though because of all the extra code that needs to be used in order for it to work in certain browsers…specifically, IE.
IE Will be the death of US. Watch for IE9 even.
None the less, keep up with the quicktips Jeff.
Is there anything I can do with a refernece to an external CSS file to clean it up with HTML5?
Example:
Can I remove the type here as well?
Thank you for this tutorial!
Love these quick tips Jeff. Keep it up.
Video is great. but it contain only overview….I need some advanced feature of html5 with demo….. any website?
I don’t want to imagine what entry-level web development is like in 2022 :/
I hope compensating for compatibility doesn’t scare the younger ones away
Love these tips i’m using it already. thanks for sharing
Wow, cool tipp! I will use it for sure.
Nice Tips. Thanks for sharing.
Great tips. Thanks for sharing.
Hi Jeff!
Wow, didn’t know the type-thing, thanks for sharing!
What I consider a great advantage too are the new input types. I found a really great tutorial at http://diveintohtml5.org/forms.html – best thing: You can use them all & every one will fall back to type=”text” if the browser doesn’t know what to do with type=”url” or the others.
Nice
Thanks
What is the point of the header tag, You spend the time saying how certain code elements can be shortened which is great, Why the need for the header description, if the most popular browser doesn’t even support it why type it. When creating web pages I use the fundamentals that work with all browsers,
If IE doesn’t understand it – why put it in, your killing your audience otherwise, but then we go into usability issues and designing your sites that work on all browsers.
Will be checking this out tho……
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…
@Dan
I don’t agree with you on this. If a designer created such a mess of a code that he’s only able to find his header based on the header tag he failed anyway. The semantic tags make the most sense when the page is about to be consumed by another application. There are not many applications (robots or whatever) that do make use of those tags yet. So if the point of the article is what HTML 5 elements to use now, than in my opinion the drawbacks of using the semantic elements is higher than their benefits. Of course this might change in the next few months.
@Markus
It’s not about the cleanliness of your code (that was mentioned a lot in the screenscast, but it’s not what I’m referring to). I’m not talking about a looking through the code for his own pages that he coded himeself. It’s not about being able to find your own header element.
Semantics is all about what things *mean* and I’m sorry, but a header tag instantly conveys more meaning than a div tag.
@Dan
Quote “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…”
What a statement to make, shame on you……..
@Predator I’ve been using conditonal comments to supply an extra stylesheet to IE to fix its layout bugs for years – what’s the difference between supplying an extra stylesheet to fix broken css and an extra js file to fix markup?
What about the other JS files that were used by many a developer to fix things in IE7? Scripts like ie7.js (http://code.google.com/p/ie7-js/) that were widely popular not so long ago?
html5.js is a 1.5kb JS file. That’s microscopic compared to most mainstream JS libraries regularly used by developers. A single additional http request, and that’s only in IE remember. I really don’t see the problem….
can we have transcript / summary of the video please? otherwise i’m gonna have to watch it again and makes notes. on paper. with a pencil.
how quaint.
Very good Video, but wouldnt use the js file, because many companies don’t have js enabled..
I think *many* may be a slight exaggeration…
According to W3CSchools only 5% of web users have JS disabled at the last count.
There are a lot of companies (especially banks) that force the use of a proxy, that strips javascript from a site if the site isn’t white listed at the proxy.
Thx Jeff, great vid as always.
Please keep those video’s! Text tutorials are all over the place, I go to NETtuts for the video’s!
Lighten up on the text over video comments guys. This was a great tip. It was concise, topical and well presented. There are so many designers who can’t speak well on video out there and it’s nice to see someone who does it professionally.
Keep up the good work Jeffery!!
Would prefer it as text/images so I could quickly scan through
Excellent tutorial – HTML5 is a great way to improve progressive enhancement.
Thank you! I am done with my learning for the day :)
Amazing tutorial. This just taught me a lot of things. Even though it;s only five there. LOL. Thanks a lot!
Thanks! Your videos are always informative and helpful. Please keep the videos coming, I personally prefer them to text and I know they are a ton faster to make than typing it all out. I’ll be implementing this to all my sites.
Cheers
There is an irony though, in posting a youtube flash video for HTML5 tips.
Anyway, great tips Jeffrey, I am really starting to like HTML5 ;)
Agreed. :) Unfortunately, it’s not 100% feasible for our screencasts just yet. But I’m pushing for it!