HTML5 Features

posted in: HTML5 | 0

Summary:

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>

Previous Post
Next Post

Leave a Reply