Scribd
Upload
72 views

Html5: By: Namita Singh

This document provides an overview of HTML5, including its history and new features. Some key points: - HTML5 is the latest evolution of the HTML standard, still being developed jointly by the W3C and WHATWG. - New features include native audio and video elements, semantic elements like <header> and <nav>, canvas for 2D graphics, and forms improvements. - HTML5 aims to reduce plugin dependencies like Flash through new multimedia and graphic capabilities. - It introduces elements and attributes for structuring web pages in a more semantic and logical way. - The <canvas> element allows drawing using JavaScript, while <svg> defines 2D graphics in XML for scalability.

Uploaded by

Neha Thakur
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
72 views

Html5: By: Namita Singh

This document provides an overview of HTML5, including its history and new features. Some key points: - HTML5 is the latest evolution of the HTML standard, still being developed jointly by the W3C and WHATWG. - New features include native audio and video elements, semantic elements like <header> and <nav>, canvas for 2D graphics, and forms improvements. - HTML5 aims to reduce plugin dependencies like Flash through new multimedia and graphic capabilities. - It introduces elements and attributes for structuring web pages in a more semantic and logical way. - The <canvas> element allows drawing using JavaScript, while <svg> defines 2D graphics in XML for scalability.

Uploaded by

Neha Thakur
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

HTML5

BY: NAMITA SINGH

INTRODUCTION

HTML5 is a new standard for HTML

It is still a work in progress

Cooperation between W3C & Web Hypertext Application


Technology Working Group(WHATWG)

New features of HTML5 are based on HTML, CSS, DOM and


JavaScript

Reduce the need for external plugins (like Flash)

VERSIONS OF HTML
YEAR

VERSION

1991

HTML

1993

HTML+

1995

HTML2.0

1997

HTML3.2

1999

HTML4.01

2000

XHTML

2012

HTML5

2013

XHTML5

NEW FEATURES IN HTML5

Video & audio tags

Header & Footer

Nav, Section, article, aside

Drag & Drop

HTML canvas 2D context

HTML5 web messaging

VIDEO & AUDIO


The HTML5 <video> and <audio> element
specifies a standard way to embed a video &
audio in a web page respectively.
Supported file formats for audio : MP3, Wav and
Ogg.
Supported file formats for video : MP4, WebM
and Ogg.
Thecontrolsattribute adds controls like play,
pause, and volume.
Text between the <video></video> , <audio>
</audio>tags will only be displayed in browsers
that do not support that element.

EXAMPLE
AUDIO
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

VIDEO
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>

</body>
</html>

SEMANTIC ELEMENTS
TAG

DESCRIPTION

<header>

Defines a header for the document or a section

<nav>

Defines navigation links in the document

<article>

Defines an article in the document

<section>

Defines a section in the document

<aside>

Defines content aside from the page content

<footer>

Defines a footer for the document or a section

PAGE LAYOUT

FORM ELEMENTS
TAG

DESCRIPTION

<datalist>

Defines pre-defined options for input


controls

<keygen>

Defines a key-pair generator field (for


forms)

<output>

Defines the result of a calculation

Example- Semantic Elements


<!DOCTYPE html>
<html>
<body>
<form action="#" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input list="b" name="browser">
<datalist id="b">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
Encryption:
<br>
<keygen name="abc">

Continued.

Example
<br><br>
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<input type="submit">
</form>
</body>
</html>

HTML5 CANVAS

The HTML<canvas>element (introduced in HTML5) is


acontainerfor canvas graphics.

An HTML canvas is a rectangular area on an HTML page.

Canvas has several methods for drawing paths, boxes, circles,


text, and graphic images.

HTML5 SVG

SVG stands for Scalable Vector Graphics

SVG is used to define graphics for the Web

The HTML <svg> element (introduced in HTML5) is a container


for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text,
and graphic images.

Difference between SVG & Canvas

SVG is a language for describing 2D graphics in XML whereas


Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available


within the SVG DOM. You can attach JavaScript event handlers for
an element. On the other hand, Canvas do not support event
handlers.

Reasons to use HTML5

Accesibility

Video & Audio Support

DOCTYPE

Cleaner code

Smarter Storage

Better Interactions

Game Development

Legacy/Cross Browser Support

Mobile,Mobile,Mobile!

Its the future, get with it

THANK YOU

You might also like