Differences between HTML4 and HTML5

10 Differences Between HTML4 & HTML5

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.

8. 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. ;-)

Location: Bangalore, Karnataka, India

Comments

Post a Comment

Popular posts from this blog

Gradient Border Colors with CSS

Image
CSS3 has all the new features. With these features, we are now able to build image-less websites. Earlier,  We were using image when it comes to showing gradient colors. Now, it becomes much leaner with the use of CSS3 Gradient Background. But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders? Let's see how to do this. First Method The first method is by applying CSS3 Gradient within pseudo-elements. Well, let’s see how the trick works. Top To Bottom Gradient Border We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div, as follows. HTML <div class="box"></div> CSS .box {       width: 400px;       height: 400px;       background: #eee;   } To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. And also create 2 rectangles ...
Read more

10 Useful Libraries and Resources for Responsive Web Design

Image
Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 10 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning! Basics Let’s start with these articles which explain the basic ideas of responsiveness. 1. Make it Responsive Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.                                                     Make it ...
Read more

The Easiest Way To Make Responsive Headers

Making pretty, responsive, headers is always a tricky process. Until now you needed to use floats or other complicated tricks and you even had to manually adjust pixel values. But not any more! The technique we are about to show you relies on the powerful flexbox layout mode to do all the dirty work for you. It uses just a handful of CSS properties to create a header that is properly aligned and looks good on all screen sizes, while leaving the code cleaner and less hacky. The Technique In our demonstrative example we’ve built a header, which is separated in three sections with typical header content nested within them: Left section – The company logo. Middle section – Various hyperlinks. Right section – A button. You can check out a simplified version of the code bellow. HTML code is where we group the sections in separate div tags. This makes it easier for CSS rules to be applied and generally produces a more organised code. <header> <div cl...
Read more