It’s going to be a while before HTML5 is the new standard and everything HTML5 has to offer is supported by all the important browsers.
If you’re a web dev, what should you do? If you’re new to the game or you’re an old pro, you eventually have to ask yourself when and how to begin transitioning over.
Perhaps the first thing that you should learn and keep in mind is exactly what the differences between the two are.
Here are ten important differences between HTML4 and HTML5:
1. HTML5 Is a Work in Progress
As cool as it is to see what HTML5 can do for you, it hasn’t been standardized like HTML4. You don’t have to worry about updating pages built using HTML4. It’s more than ten years old and it’s a set standard.
If you jump into HTML5 with both feet, you’re going to be making updates. Elements and attributes are added and modified several times a year. Of course, this is dependent how much you depend on rich elements, but it’s certainly a risk you must take into consideration when using a fluid language.
Build with HTML4, play with HTML5.
2. Simplified Syntax
The simpler doctype declaration is just one of the many novelties in HTML5. Now you need to write only: <!doctype html> and this is it. The syntax of HTML5 is compatible with HTML4 and XHTML1, but not with SGML.
3. The New <canvas> Element
This is what killed Flash.
Although it isn’t as … uh … flashy … most assume that it will eventually make Flash obsolete.
Only time will tell.
4. The <header> and <footer> Elements
For good or bad, HTML5 has acknowledged the new web anatomy. With HTML5, <header> and <footer> are specifically marked for such. Because of this, it is unnecessary to identify these two elements with a <div> tag.
5. New <section> and <article> Elements
Again, HTML5 has adopted the popular web standard. <section> and <article> allows you to mark specific areas of your layout as such, and should have a positive effect on on your SEO in the end.
6. New <menu> and <figure> Elements
<menu> can be used for your main menu, but it can also be used for toolbars and context menus. The <figure> element is another way to arrange text and images.
7. New <audio> and <video> Elements
Embedind audio and video has never been easier.
There are also some new multimedia elements and attributes, such as <track>, that provides text tracks for the video element. With these additions HTML5 is definitely getting more and more Web 2.0-friendly. The problem is that by the time HTML5 becomes widely accepted, Web 2.0 might be old news.
8. New Forms
The new <form> and <forminput> elements are looking good. If you do much with forms, you may want to take a look at what these have to offer.
9. Kiss <b> and <font> Goodbye!
CSS, all the time.
All the time, CSS.
10. No More <frame>, <center>, <big>
I bet you’re going to miss these. 😉
Conclusion
Use HTML5 with caution and be ready to make updates. Stop using elements that HTML5 has kicked from the code, and try using new HTML5 elements that are sure to stick (<header>, <footer>, etc …). You might as well start getting into the habit of using these, now.
If you want to keep up to date on the differences, keep checking W3C.
[via Developer Drive]
Ravi says
Thanks Eric I was searching on this difference and found your blog and it answer a lot of question.
Here is my blog post regarding it:
http://ravisinghblog.in/key-difference-between-html-and-html-5/
Thanks,
Ravi
Eric Dye says
Awesome, thanks!
Suganth G says
Awesome Article Eric 🙂 I like it
Eric Dye says
Thanks. 🙂
Daniel Keith says
Hi Eric,
Great post. It shows that html5 is much better than its earlier versions, but I am wondering that one of my websites is built in html4. Would it harmful if I not change it to the latest version?
Thanks for sharing your professional experience.
chinna says
yes
susanta besra says
hi sir,
thanks for your article i was thinking about making website with html4 but, it change my mind 🙂
Vineet says
After so many years i have to start a fresh and soon i realized that times have changed. Its HTML5 now, so i tried to search for the differences and found a very long article on w3schools. It was boring and almost killed my interest but then i found your article. Its super duper simple and now i have a basic idea how to proceed.
Thanks Eric 🙂
Eric Dye says
That’s awesome! So glad it helped. 🙂
Bhagirath Kumar says
HTML5 introduced new tag and form elements. What are the benefits of all these? Except essay writing and identification and grouping of elements. How all these beneficial for end user?
Eric Dye says
At this point in the game, it’s really all about clean, maintainable code. Setting standards, using them, making room for a day when browsers and SEO can relay on these new tags.
sivarajumani says
awesome article bro……..
jatinder says
thanku
Ravi Sankar says
Hey Eric…..Greetings from India. Did you realize that all the commentators so far, on this post, are from India. Thanks for this post and cheers!
Kazmi says
I would like to point out a few errors in this post. Firstly, the list number 8 has been appears twice. Secondly under ‘8. New and Elements’, the starting word should be ‘Embedding’ instead of ‘Embedind’. Overall nice article, good information for absolute beginners, keep it up 🙂
Seerat Abbas Khan says
Sir,What is differesnce between html5 and earlier version of html?