HTML5 Features that you must implement right now

View code Play Walkthrough

Description

Are you using HTML5 yet? If not then this walkthrough will drive you through some of the very basic features of HTML5 which you can start implementing right away to make your code shorter and cleaner.

Points discussed:

  1. Simpler doctype declaration.
  2. XML namespaces and attributes no longer needed.
  3. New way to declare document charset.
  4. Easier and shorter stylesheet and script declaration.
  5. No more self closing syntax.

Feel free to apply the features/changes shown in the walkthrough in your existing html4 or xhtml code without worrying much, as your website will definitely not break in older browsers like IE6-IE8, etc.

Add New Comment

18 Comments

(close)
Devils Backyard

Devils Backyard

Great work! I didn’t knew many things like getting rid of “type=text/css” etc.

Thanks for this!
Cheers

Ahmad Alfy

Ahmad Alfy

I don’t think omitting the / from br and img is a good idea. I prefer the XHTML syntax myself cause it makes the code much more cleaner and compatible with the XML standards. But that’s something we shouldn’t have debates on, it’s a personal opinion. Thanks for the informative video

Golden Tiger

Golden Tiger

Nice stuff.

George

George

This code player is absolutely amazing! How did you make it?

Kyle Bradshaw

Kyle Bradshaw

Ahmad++
Great walkthrough of the HTML5 changes, but I also like to keep the xhtml syntax for consistency throughout. (What were those self-closing tags again??)

heryien

heryien

How about the others elements? such as header, article, does it effect on IE6-IE8?

merlin

merlin

nice start , you can also push some , …
+ by exemple
can be tag on ccs3 with footer declaration + role declaration wihich improve flexibility and layout opportunities.
less div with class declaration.
one good start is bootstrap from twitter and others grid stuff for flexible layout (same dev for desktop/smartphone/tab & tv screen).
did you know that you have a tag for title / subtitle group ?

CSS Dude

CSS Dude

This website is awesome. One thing I’d add is some sort of highlight so we can see where the mouse pointer is going and refined controls to go back a step to better enable seeing what code is changing and how it reflects that in the browser. Thanks!

Anonymous

Anonymous

Thanks for your tutorial, I too was disappointed by the lack of html5 elements such as header, article etc

Julien CROUZET

Julien CROUZET

This codeplayer doesn’t learn anything …
Just how to make your code the ugliest accepted in HTML5.

Self close, attributes and so on are always nice to have

Jorge

Jorge

Really NICE TIPS! THANKS! :)

Szabolcs Szasz

Szabolcs Szasz

Just a typo: “…get rid of backslash (/)” It’s just a (forward) slash. Cheers!

Shaun

Shaun

You’re starting to become one of my favorite websites for web techniques. Keep up the good work :)

Chevalier

Chevalier

great site and great tutorial! keep up the good work! ;)

ramnath

ramnath

worth watching

keith reddog

keith reddog

When removing fwd slash from closing tag, w3c validation flags it as an error……..

k.

5x 10x 15x 20x

18 Comments

Description