What are the New Elements in HTML5

In this article I have described the New Semantic/Structural Elements in HTML5
  • 2436

INTRODUCTION

HTML5 brings two new things to the table: that lately. Lots of talk about the "Flash killing" video element, animations with canvas location and much more.
new APIs that add essential new features to the open standards web development model, and new structural elements that define specific web page features.

HTML5 offers new elements for media content:

Tag Description
<audio> For multimedia content, sounds, music or other audio streams.
<video> For video content, such as a movie clip or other video streams.
<source> Defines multiple media resources for video and audio.
<embed> Defines a container for an external application or interactive content.
<track> For text tracks used in media players.

Example of  Audio and Video

<video width="640" height="360" src="/demo/video_file/fana.avi">
<div class="fallback">
<p>You must have an HTML5 capable browser.</p>
</div>
</video>
<audio src="
C:\Documents and Settings\All Users\Documents\My Music\Sample Music\New Stories .wma" type="audio/ogg">
Sorry, your browser does not support the <audio> element.
</audio>

The Canvas Element

The canvas element has been introduced in HTML5. It uses JavaScript to enable the user to draw on a web page.

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

Removed Elements

The following HTML 4.01 elements are removed from HTML5:

Tags Description
<acronym> Defines an acronym.
<applet> It was used to define an embedded applet.
<basefont> Use CSS instead.
<big> It was used to center align text and content.
<center> It was used to center align text and content.
<dir> It was used to define a directory list.
<font> It was used to specify font face, font size, and font color of text.
<frame> Defines a sub window (a frame).
<frameset> Defines a set of frames.
<noframes> Defines a noframe section.
<strike> It was used to define strikethrough text.
<tt> It was used to define teletype text.
<u> It was used to define underlined text.
<xmp> It was used to define preformatted text.

Putting it all Together HTML5 New Semantic Structure Example

The following HTML 4.01 elements are removed from HTML5:

Tags Description
<acronym> Defines an acronym.
<applet> It was used to define an embedded applet.
<basefont> Use CSS instead.
<big> It was used to center align text and content.
<center> It was used to center align text and content.
<dir> It was used to define a directory list.
<font> It was used to specify font face, font size, and font color of text.
<frame> Defines a sub window (a frame).
<frameset> Defines a set of frames.
<noframes> Defines a noframe section.
<strike> It was used to define strikethrough text.
<tt> It was used to define teletype text.
<u> It was used to define underlined text.
<xmp> It was used to define preformatted text.

Putting it all Together HTML5 New Semantic Structure Example

The following example is comprised of each semantic element described above to form a complete, valid HTML5 document:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 New Semantic Structure Elements Example </title>
</head>
<body>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph: <time>2011-10-02</time></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="Home.asp">Home</a></li>
<li><a href="contact.asp">Contact</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h1>Some Post</h1>
<p><time pubdate>2011-10-02</time></p>
</header>
<p>Simple example of the article.</p>
<p>…</p>
<section>
<h1>Comments</h1>
<article>
<header>
<p>Posted by: Ajay Raj</p>
<p><time>2011-10-13</time></p>
</header>
<p>Goog</p>
</article>
</section>
<aside>
<h1>Categories</h1>
<span><a href="www.Facebook.com">Facebook</a></span>
</aside>
</article>
</body>
</html>

 

OUTPUT :

html5.gif


© 2020 DotNetHeaven. All rights reserved.