Thursday, August 2, 2012

HTML5 Features


1.      New Doctype

( HTML )       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
( HTML5 )    <!DOCTYPE html>

2.      The Figure Element

( HTML )       <img src="image/image.jpg" alt="image" title=” image” />
        <p>Image of Mars. </p>
( HTML5 )
<figure>
    <img src="image/image.jpg" alt="image" title=”image” />
    <figcaption>  
        <p>This is an image of something interesting.</p>  
    </figcaption>  
</figure>  

3.      No More Types for Scripts and Links

( HTML )     <link rel="stylesheet" href="css/ stylesheet.css" type="text/css" />  
      <script src="path/to/script.js" type="text/javascript"></script>
( HTML5 )  <link rel="stylesheet" href="css/stylesheet.css" />
     <script src="path/to/script.js"></script>  
  

4.      To Quote or Not to Quote.

( HTML )     <p class=”myclass” id=”someId”> Welcome.</p>
( HTML5 )  <p class=myclass id=someId> Welcome.</p>
 

5. Email Inputs

( HTML5 )
                 <!DOCTYPE html>  
                       <html lang="en">  
                            <head>  
                                  <meta charset="utf-8">  
                                      <title>untitled</title>  
                            </head>  
                            <body>  
                                  <form action="" method="get">  
                                      <label for="email">Email:</label>  
                                          <input id="email" name="email" type="email" />
                                          <button type="submit"> Submit Form </button>  
                                   </form>  
                            </body>  
                       </html>

6.  The Semantic Header and Footer

( HTML )      <div id="header">    ...  </div>    
                       <div id="footer">       ...  </div>  
( HTML5 )    <header>       ...      </header>  
                        <footer>          ...      </footer>

7.Audio Support

( HTML5 ) HTML5 now offers the <audio> element.
                        <audio autoplay="autoplay" controls="controls">  
                             <source src="file.ogg" />  
                             <source src="file.mp3" />  
                             <a href="file.mp3">Download this file.</a>  
                        </audio>  

8. Video Support

( HTML5 ) HTML5 now offers the <vidio> element.
                        <video controls preload>  
                             <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />  
                             <source src="filename.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />  
                             <p>Your browser is old.<a href="cohagenPhoneCall.mp4">Download this video instead.</a></p>  
                        </video>  

No comments:

Post a Comment