Quick Tip: HTML5 Features you Should be Using Right Now
videos

Quick Tip: HTML5 Features you Should be Using Right Now

Tutorial Details
  • Technology: HTML5
  • Format: Video
  • Length: 4 Minutes
Share

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.

Related Posts

Add Comment

Discussion 106 Comments

Comment Page 2 of 2 1 2
  1. flashmac says:

    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 says:

      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.

  2. Jim says:

    Thanks for the quick tip, Jeff! Keep ‘em coming.

  3. Derrick says:

    I hadn’t heard of using HTML5 elements within older versions of IE… Very nice!

  4. Val says:

    it is nice but your design requires JS! so it is not useful for big projects :-/

  5. Shane says:

    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.

  6. José Mota says:

    I didn’t know about the styles, scripts and charset simplifications. that’s awesome, my blog will look so much cleaner now. thanks Jeffrey!

  7. Eric says:

    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

  8. chichibek says:

    jeffry way soy un lector de tus aportes, podrias poner subtitulos a tus videos, creeme mas de una estaria agradecido

  9. Bryce P says:

    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.

  10. Francois says:

    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.

  11. Steven says:

    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.

  12. CyrusKafaiWu says:

    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.

  13. adrian says:

    That’s a lot more efficient but I have a question, is it possible to omit type=”text/css” from link tags
    ()

    • Max says:

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

  14. s.r. says:

    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 !

  15. Vasiliy says:

    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?

  16. Dimitris S. says:

    WOW.. Html got much cleaner!

  17. Andy White says:

    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

  18. Chris says:

    What bundler are you using for Textmate to color code your HTML5?

    • Chris says:

      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)

  19. Thanks for the post. Great tips!

  20. Sherwin says:

    Nice one, All of my html codes will be cleaner now xD

  21. Malone says:

    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.

Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.