Complete Computer Knowledge Portal

Wednesday, June 4, 2014

Difference Between HTML 4 and HTML 5


Parameter
HTML 4.01
HTML 5.0
Doctype Declaration
Three Types of <!DOCTYPE> declarations are used in HTML 4.01 and that are:
i) HTML 4.01 Strict
ii) HTML 4.01 Transitional
iii) HTML 4.01 Frameset
There is Only one type of <!DOCTYPE> declaration in HTML 5 and that is <!DOCTYPE html>only.
Plugin Requirement
External Plugins are required to play audio and video files on HTML 4.01.
HTML 5 does not require any external plugin to play audio and video files.
Attributes
Accept, Accept-charset, Action, Enctype, Method, Name, Target.
Accept-charset, Action, Enctype, Method, Name, Target, Autocomplete, Novalidate.
Input Types
Button, Checkbox, File, Hidden, Image, Password, Radio, Reset, Submit, Text.
Button, Checkbox, File, Hidden, Image, Password, Radio, Reset, Submit, Text, Color, Date, Datetime, Datetime-local, email, Month, Number, Range, Search, Tel, Time, Url, Week
Automatic Validation
Not Supported in HTML 4.01 and is achieved by other Scripting Languages.
Automatic Filed Validation is Supported in HTML 5.0

Semantic Elements
These are those elements that clearly describe its meaning to both browser and the developer. Supported Semantic Elements in HTML 4.01 are:
<form>,<table>, <img>.
Supported Semantic Elements in HTML 5 are:
<header>, <nav>, <section>, <article>, <aside>, <figure>, <figcaption>, <footer>, <details>, <summary>, <mark>, <time>
Browser Support
It is a Standard version and supported by all web browsers.
It is not yet official standard but all major browsers support most of its features.
<frame>,<frameset>,<no frames> Tags
These tags are supported in HTML 4.01.
These Tags are not present in HTML 5.
<font> Tag
Supported in HTML 4.01.
EXAMPLE:
<font size="3" color="red">Tech-Experts<font>
Not available, use CSS instead for defining, font, color and size of the text. EXAMPLE:
<p style="color:red; font-family:verdana; font-size:30px">This is a paragraph.</p>
<dir> Tag
Supported in HTML4.01.
EXAMPLE:
<dir>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</dir>
Not supported in HTML 5 and is replaced by <ul> tag for directory listing. EXAMPLE:
<ul>
  <li>Football</li>
  <li>Cricket</li>
  <li>Hockey</li>
</ul>
<keygen> Tag
Not Available in HTML 4.01
Available in HTML 5 and specifies a key-pair generator field used for forms.
EXAMPLE:
<form action="register.php " method="post">
  Username: <input type="text" name="usr ">
  Encryption: <keygen name="secure">
  <input type="submit">
</form>
<main> Tag
This Tag is not available in HTML 4.01
This Tag is used in HTML 5 to specify the main content of the document.
EXAMPLE:
<main>
  <h1>Colors</h1>
  <p>Red, Green, White.</p>
<article>
    <h1>Red</h1>
    <p>Color of Love p>
  </article>
<article>
    <h1>Green</h1>
    <p>Color of Progress </p>
  </article>
<article>
    <h1>White</h1>
    <p>Symbol of Peace </p>
  </article>
</main>
<strike> Tag
This tag is used to define Strikethrough text.
EXAMPLE:
<p> <strike>Tech-Experts </strike><p>
This Tag is replaced by <del> tag in HTML5.
EXAMPLE:
<p> <del>Tech-Experts </del><p>
<track> Tag
This Tag is not available in HTML 4.01
It Defines text track for media elements(<audio>,<video>)
EXAMPLE:
<video width="300" height="200" controls>
  <source src="oreore.mp4" type="video/mp4">
  <source src="oreore.ogg" type="video/ogg">
  <track src="subtitles1.vtt" kind="subtitles" srclang="en" label="Sub1">
  <track src="subtitles2.vtt" kind="subtitles" srclang="no" label="Sub2">
</video>
<video> Tag
This Tag is Not present in html 4.01
This Tag is Supported by HTML 5 and is used to specify videos or movie clips.
<audio> tag
Not Supported in HTML 4.01
Tag is used to specify 3 file formats for the <audio> element: MP3, Wav, and Ogg
<tt> Tag
This Tag is used to specify teletype text.
EXAMPLE:
<p><tt>Tech-Experts</tt></p>
This tag is not supported in HTML 5 and CSS is used.
EXAMPLE:
<p style="font-family:'Lucida Console', monospace">Tech-Experts</p>
<source> Tag
This tag is not supported in HTML 4.01.
This tag is used to specify multiple media resources for media elements. i.e. <audio>,<video>
EXAMPLE: <audio controls>
 <source src="ohmygod.mp3" type="audio/mpeg">
  <source src="hohoho.mp3" type="audio/mpeg">
audio element is not supported by your browser.
</audio>
<section> Tag
Not Supported in HTML 4.01.
Used to Specify sections in documents such as Chapters, headers, footers.
EXAMPLE:
<section>
  <h1>Tech-Experts</h1>
  <p>The Complete Computer Education </p>
</section>
<progress> Tag
Not Present in HTML 4.01
Used to represent progress of a task.
EXAMPLE:
<progress value="70" max="100"></progress>

<canvas> Tag
This Tag is Not Present in HTML 4.01
This Tag is Present in HTML 5 and creates a fixed size drawing surface that exposes one or more rendering contexts.
EXAMPLE:
<canvas id="techno"></canvas>
<script>
var canv=document.getElementById(Techno);
var ctx=canv.getContext('2d');
ctx.fillStyle='#FFFF00';
ctx.fillRect(0,0,90,100);
</script>
 These are some very few differences between HTML 4.01 and HTML 5 and there are lot more differences that we have not covered in this comparison such as Local Storage, 3D Printing etc.