Monday, 13 February 2017

HTML 4 VS HTML 5

HTML 4 VS HTML 5 Example

This is about live example of what is exactly page wise difference between HTML 4 and HTML 5. In HTML 4 we use div as page structure schema which is old now. Normally we make CSS classes for header,menu,section,article,footer etc. HTML 5 minimize this complexity by introducing new page structure element like header,footer,menu,section,acticle etc. these new tags simplified your page structure which was mess in previous for beginner. In upcoming example you will see a complete web page design separately in HTML4 and HTML5. After this example I am sure you will be able to understand what exactly difference between HTML 4 and 5 .

HTML 4


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

HTML 5 SVG

SVG is a standard for drawing shapes in browsers. However, SVG is at a fundamentally higher level because each drawn shape is remembered as an object in a scene graph or DOM, which is subsequently rendered to a bit map. This means that if attributes of an SVG object are changed, the browser can automatically re-render the scene.
SVG images are represented in XML, and complex scenes can be created and maintained with XML editing tools

HTML 5 Audio

In HTML 4 audio was play using any plugin like flash or Microsoft silver light but in HTML 5 audio player is updated so no need to install any other plugin browser automatically plays it.

<audio controls>
  <source src="xxx.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

HTML 5 Video

Video is new tag added in HTML 5. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads and video will in its original resolution and if resolution is high or HD it will disturb all other element position of your page.

Syntax :


<video width="XX" height="XX" controls>
  <source src="XX" type="video/mp4">
  
<source src="XX" type="video/ogg">
Your browser does not support the video tag.
</video>