Wednesday, October 28, 2015

What are the key differences between HTML and HTML5? Which is better?

1. HTML5 Is a Work in Progress

2. Simplified Syntax

3. The New <canvas> Element

4. The <header> and <footer> Elements

5. New <section> and <article> Elements

6. New <menu> and <figure> Elements

8. New <audio> and <video> Elements

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.


Difference in Tags:


• <!DOCTYPE  html> : In  HTML 4.01, there are three different <!DOCTYPE> declarations  but  In HTML 5 there is only one  <! DOCTYPE html>

•  <a >:  In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.

• <acronym> : The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead. The <acronym> tag was used to define acronyms in HTML 4.01.

• <applet>: The <applet> tag is not supported in HTML5.  Use the  <object> tag instead.

• <strong>: In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text.

• <body> :   In HTML5, all <body> specific attributes are removed, while in HTML 4.01 they were deprecated.

• <hr>: In HTML 4.01, the <hr> tag represented a horizontal rule. In HTML5, the <hr> tag defines a thematic break. The <hr> element is used to separate content (or define a change) in an HTML page.


• <map> : In HTML5, if the id attribute of the <map> tag is also specified, it must have the same value as the name attribute.

• <meta> :  The scheme attribute is not supported in HTML5.


HTML5 has a new attribute, charset, which makes it easier to define charset:


HTML5 has a new attribute, charset, which makes it easier to define charset:

HTML 4.01: <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
            
HTML5 : <meta charset="UTF-8”>

• <script> : The "type" attribute is required in HTML 4, but optional in HTML5.

•<small >  : In HTML 4.01 the small element is displayed as smaller text. In HTML5 the small element defines small text and other side comments, and is displayed as smaller text.

•<table>:  Only the "border" attribute is supported in HTML5, and it only allows the values " " or "1".

New Semantic/Structural Elements :


HTML5 offers new elements for better structure:
      

           
<article>  :  Defines an article

           
<aside>  :  Defines content aside from   the page content

           
<bdi>   :  Isolates a part of text that might be formatted in a   different
direction from other text outside it
           

<command>   :   Defines a command button   that a user can invoke
           

<details>   :   Defines additional details   that the user can view or hide
           

<summary>    :    Defines a visible heading   for a <details> element
           

<figure>   :  Specifies self-contained   content, like illustrations, diagrams, photos, code listings, etc.
           

<figcaption>   : Defines a caption for a   <figure> element
           

<footer>   :  Defines a footer for a   document or section.

      
<header>   :   Defines a header for

Difference in Tags:


• <!DOCTYPE  html> : In  HTML 4.01, there are three different <!DOCTYPE> declarations  but  In HTML 5 there is only one  <! DOCTYPE html>

•  <a >:  In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.

• <acronym> : The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead. The <acronym> tag was used to define acronyms in HTML 4.01.

• <applet>: The <applet> tag is not supported in HTML5.  Use the  <object> tag instead.

• <strong>: In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text.

• <body> :   In HTML5, all <body> specific attributes are removed, while in HTML 4.01 they were deprecated.

• <hr>: In HTML 4.01, the <hr> tag represented a horizontal rule. In HTML5, the <hr> tag defines a thematic break. The <hr> element is used to separate content (or define a change) in an HTML page.


• <map> : In HTML5, if the id attribute of the <map> tag is also specified, it must have the same value as the name attribute.

• <meta> :  The scheme attribute is not supported in HTML5.


HTML5 has a new attribute, charset, which makes it easier to define charset:


HTML5 has a new attribute, charset, which makes it easier to define charset:

HTML 4.01: <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
            
HTML5 : <meta charset="UTF-8”>

• <script> : The "type" attribute is required in HTML 4, but optional in HTML5.

•<small >  : In HTML 4.01 the small element is displayed as smaller text. In HTML5 the small element defines small text and other side comments, and is displayed as smaller text.

•<table>:  Only the "border" attribute is supported in HTML5, and it only allows the values " " or "1".

New Semantic/Structural Elements :


HTML5 offers new elements for better structure:
      

           
<article>  :  Defines an article

           
<aside>  :  Defines content aside from   the page content

           
<bdi>   :  Isolates a part of text that might be formatted in a   different
direction from other text outside it
           

<command>   :   Defines a command button   that a user can invoke
           

<details>   :   Defines additional details   that the user can view or hide
           

<summary>    :    Defines a visible heading   for a <details> element
           

<figure>   :  Specifies self-contained   content, like illustrations, diagrams, photos, code listings, etc.
           

<figcaption>   : Defines a caption for a   <figure> element
           

<footer>   :  Defines a footer for a   document or section.

      
<header>   :   Defines a header for a   document or section

           
<hgroup>   :   Groups a set of <h1>   to <h6> elements when a heading has multiple levels.

           
<mark>   :   Defines marked/highlighted   text.

           
<meter>  :   Defines a scalar   measurement within a known range (a gauge).

           
<nav>   :    Defines navigation links.

           
<progress>   :   Represents the progress of   a task.

           
<ruby>    :   Defines a ruby annotation   (for East Asian typography).

           
<rt>   :  Defines an   explanation/pronunciation of characters (for East Asian typography).

           
<rp>   :   Defines what to show in browsers that do not support ruby   annotations
    

        
<section>   :  Defines a section in a   document
    

        
<time>  :  Defines a date/time
    

<wbr>  :  Defines a possible line-break .

New Media Elements :


HTML5 offers new elements for media content:
      

           
<audio>  :  Defines sound content.
           
<video>  :  Defines a video or movie.
           
<source>  :  Defines multiple media   resources for <video> and <audio>.
           
<embed>  :  Defines a container for an external application or   interactive content (a plug-in).
           
<track>  :   Defines text tracks for   <video> and <audio>.


Examples :


<video> :


<!DOCTYPE html>
<html>
<body>
<DIV id='abc' style="z-index:2; position:relative; right:0px; top:10px; background-color:#cccc33; width:400px; height:80px; padding:10px; color:White; border:#ffffcc 1px dashed; font-size:xx-large;">
LogicPace Technologies Pvt.Ltd,Jaipur</DIV><br>
<VIDEO src="atheora.ogv" width="320" height="240"  controls autoplay>
</VIDEO>
</body>
</html> a   document or section

           
<hgroup>   :   Groups a set of <h1>   to <h6> elements when a heading has multiple levels.

           
<mark>   :   Defines marked/highlighted   text.

           
<meter>  :   Defines a scalar   measurement within a known range (a gauge).

           
<nav>   :    Defines navigation links.

           
<progress>   :   Represents the progress of   a task.

           
<ruby>    :   Defines a ruby annotation   (for East Asian typography).

           
<rt>   :  Defines an   explanation/pronunciation of characters (for East Asian typography).

           
<rp>   :   Defines what to show in browsers that do not support ruby   annotations
    

        
<section>   :  Defines a section in a   document
    

        
<time>  :  Defines a date/time
    

<wbr>  :  Defines a possible line-break .

New Media Elements :


HTML5 offers new elements for media content:
      

           
<audio>  :  Defines sound content.
           
<video>  :  Defines a video or movie.
           
<source>  :  Defines multiple media   resources for <video> and <audio>.
           
<embed>  :  Defines a container for an external application or   interactive content (a plug-in).
           
<track>  :   Defines text tracks for   <video> and <audio>.


Examples :


<video> :


<!DOCTYPE html>
<html>
<body>
<DIV id='abc' style="z-index:2; position:relative; right:0px; top:10px; background-color:#cccc33; width:400px; height:80px; padding:10px; color:White; border:#ffffcc 1px dashed; font-size:xx-large;">
LogicPace Technologies Pvt.Ltd,Jaipur</DIV><br>
<VIDEO src="atheora.ogv" width="320" height="240"  controls autoplay>
</VIDEO>
</body>
</html>

 

 

 

 

 

 

 

No comments:

Post a Comment