The document provides an overview of HTML5 including why to use HTML5, basic HTML5 tags and their descriptions, HTML5 block level elements like header, footer, nav, main tags and their usage, HTML5 multimedia elements like audio and video tags, HTML5 advance tags like progress, meter tags, and HTML5 graphics elements like canvas and SVG tags to draw shapes. It also discusses the differences between HTML and HTML5 and provides examples of usage of various HTML5 elements.
2. OVERVIEW
• Why use HTML5
• HTML5 Basic
• HTML5 Block Level Elements
• HTML5 Multimedia
• HTML5 Advance Tag
• HTML5 Graphics
3. Why use Html5
• Html5 is more power full and easier than Html4.
• It allows to play audio and video on browser
• Using Html5 you can draw shapes like circle, rectangle, triangle.
Which is not possible in Html previous version
• In Html5 direct you can use header and footer tag for define Header
and footer section
• Here <nav> tag are available for declare navigation.
• Html5 allow to run JavaScript code in background Using web workers.
• It provides local storage in place of cookies.
5. HTML Tags
Html5 Tags Description
<header> Defines a header for a document
<footer> Defines a footer for a document
<article> Defines an article in your document
<aside> Defines content aside from the page content
<audio> Allow to play audio on browser.
<canvas> Used to draw Graphics on web.
<figure> Specifies self-contained content
<meter> Defines a scalar measurement within a known range
<nav> Defines navigation links
<section> Defines a section in a document
<source> Defines multiple media resources for media elements (audio and video)
<video> Defines a video or movie
6. HTML Tags
Html5 Tags Description
<progress> Represents the progress of a task
<mark> Defines marked/highlighted text
<details> Used to create an interactive widget that the user can open and close
<bdi>
Full form of BDI is Bi-Directional Isolation. This element is useful when embedding user-
generated content with an unknown directionality.
<summary> It specifies a visible heading for <detailed> element.
<wbr> Used for possible line bread
<time> Used for define date and time
<track> Used for defines text tracks for media elements (<video> and <audio>)
<source> Used for defines multiple media resources for media elements (<video> and <audio>)
<ruby> Used for defines a ruby annotation
<output> Used for represents the result of a calculation
7. Difference Between Html and Html5
Html Html5
Doctype declaration in Html is too longer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE declaration in Html5 is very simple "<!DOCTYPE html>
character encoding in Html is also longer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
character encoding (charset) declaration is also very simple <meta
charset="UTF-8">
Audio and Video are not part of HTML4
Audio and Videos are integral part of HTML5 e.g. <audio> and <video>
tags.
Vector Graphics is possible with the help of technologies such as VML,
Silverlight, Flash etc
Vector graphics is integral part of HTML5 e.g. SVG and canvas
It is almost impossible to get true GeoLocation of user browsing any
website especially if it comes to mobile devices.
JS GeoLocation API in HTML5 helps identify location of user browsing
any website (provided user allows it)
Html5 use cookies. It provides local storage in place of cookies.
Not possible to draw shapes like circle, rectangle, triangle. Using Html5 you can draw shapes like circle, rectangle, triangle.
Does not allow JavaScript to run in browser. JS runs in same thread as
browser interface.
Allows JavaScript to run in background. This is possible due to JS Web
worker API in HTML5
Works with all old browsers Supported by all new browser.
8. Doctype in Html5
Syntax
<!doctype html>
Example of using Doctype
<!DOCTYPE>
<html>
<body>
<p>This is my first Html5 code.</p></body></html>
Result
This is my first Html code.
9. Html5 Comment
Syntax
<!-- Html comment -->
Example
<html>
<body>
<!-- Html page -->
<p>This is simple html page<p>
<p>Html is simple and easy to learn<p>
</body>
</html> Result
This is simple html page
Html is simple and easy to learn
10. Multiline Comment
Syntax
<!-- Html Multi Line Comment -->
Example
<html>
<body>
<!-- Html page
Start from here -->
<p>This is simple html page<p>
<p>Html is simple and easy to learn<p>
</body>
</html>
Result
This is simple html page
Html is simple and easy to learn
11. Save and Compile in HTML 5:
Save and Run Html5 code
• Html5 code are save with .html or .htm extension.
• For run Html5 code you need any web browser (chrome, firefox etc).
No others software are required for run Html code web browser are
enough.
Compile Html5 Code
• No need to compile manually Html5 code, When you open your code
in any web browser then Html code are interpreted by browser
interpreter.
20. audio tag
• Html <audio> tag defines sound, such as music or other audio
streams.
• Now, there are three supported audio file formats for the <audio>
tag; those are given below;
• MP3
• Wav
• Ogg
22. Video Tag in HTML5
• <video>tag are used to add video on web page. Html5 added new tag
for add video files on web page, befor html5 it is achieve by using
<embed> tag
Attributes of meter
• mp4
• webM
• ogg
24. Attributes of Video Tag
Atrribute Description
controls Used to defines the video controls which is displayed with play/pause buttons.
height Used to set the height of the video player.
width Used to set the width of the video player.
poster Used to specifies the image which is displayed on the screen when the video is not played.
autoplay Used to specifies that the video will start playing as soon as it is ready.
loop Used to specifies that the video file will start over again, every time when it is completed.
muted Used to mute the video output.
preload Used to specifies the author view to upload video file when the page loads.
src Used to specifies the source URL of the video file.
25. Html5 plug-ins
• A plug-ins are mainly used to extend the functionality of the Html
browser.
• Using html you can add or show your Youtube video on web page.
• Steps to add video on web page.
• Upload video on youtube.
• get video id.
• Define an <iframe> element in your web page.
• Specify hight and width of iframe for display video.
27. Progress Tag in HTML5
• The <progress> tag is used to display the progress of a task.
• Using this tag you van create a progress bar on web page.
• The main purpose of this tag is to show file uploading progress.
Attributes Description
Value It is defined how much task has been completed.
Max It define how much task required.
Attributes of Progress Tag
29. Example with value and max attribute
<!doctype html>
<html>
<body>
<p>Download progress:</p>
<progress value="40" max="100">
</progess>
</body>
</html>
OUTPUT
30. Set height and width of progress
<!doctype html>
<html>
<head>
<style>
progress{
height: 40px;
}
</style>
</head>
<body>
<p>Download progress:</p>
<progress> </progess>
</body>
</html>
OUTPUT
31. Meter Tag
• <meter>tag are used to measure data within given range. This is also
known as a gauge.
• Uses of meter tag
• Meter tag are use to measure disk usage, same like in you computer
show how much a particular drive (on hard disk) full with data.
32. Attributes of meter
Attributes value Description
form form_id
Specifies one or more forms the <meter> element belongs
to
low number Specifies the range that is considered to be a low value
high number Specifies the range that is considered to be a high value
max number Specifies the maximum value of the range
min number Specifies the minimum value of the range
optimum number Specifies what value is the optimal value for the gauge
value number Required. Specifies the current value of the gauge
34. <details> tag
• Html <details> tag is used for specify the additional details about any
contents on web page that the user can view or hide.
<!DOCTYPE>
<html>
<body>
<details>
<h3>III CSE</h3>
<p>Very Good and Hyperactive students</p>
</details>
</body>
</html> OUTPUT
36. <canvas> tag
• Html5 introduce new tag <canvas> which is used to draw graphics on the web
page. It draw graphics on web by using JavaScript.
• canvas is only a container for graphics you must need to write a script to draw
graphics on web page.
<!DOCTYPE>
<html>
<body>
<canvas id="canvasid" width="200" height="100" style="border:3px solid #F00;">
</canvas>
</body>
</html> OUTPUT
37. <svg> tag
• Html5 introduce new tag <svg>, SVG stands for Scalable Vector
Graphics. It is used to define graphics for the Web. <svg> tag is
container for SVG graphics.
• SVG has several methods for drawing paths, boxes, circles, text, and
graphic images. It is mostly used for vector type diagrams like pie
charts, 2-Dimensional graphs in an X,Y coordinate system etc.
38. Draw circle using svg tag
• To draw a circle you need <circle> tag with cx, cy and r attributes.
<!DOCTYPE>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red"
/>
</svg>
</body>
</html>
OUTPUT
39. Draw rectangle using svg tag
• To draw a rectangle you need <rect> tag with it's attributes.
<!DOCTYPE>
<html>
<body>
<svg width="200" height="100">
<rect width="200" height="100" stroke="yellow" stroke-width="4"
fill="red" />
</svg>
</body>
</html>
OUTPUT
40. Draw polygon using svg tag
• To draw a polygon you need <polygon> tag with points attribute of polygon
tag.
<!DOCTYPE>
<html>
<body>
<svg width="210" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:blue;stroke:black;stroke-width:5;fill-rule:nonzero;" />
</svg>
</body>
</html> OUTPUT
