5.

HTML5 and Features

5.1 Introduction

HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a
programming language, but rather a markup language.
It is used to design web pages using markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the web pages.
Markup language is used to define the text document within tag which defines the
structure of web pages. HTML 5 is the fifth and current version of HTML. It has improved
the markup available for documents and has introduced application programming
interfaces(API) and Document Object Model (DOM).
Features of HTML 5
 HTML 5 has introduced new multimedia features which supports audio and video
controls by using <audio> and <video> tags.
 In HTML 5 user can grab an object and drag it further dropping it on a new location.
 It has Geo Location Service.
 It has Web storage facility which provides web application methods to store data
on web browser.
 It uses SQL database to store data offline.
 It allows to draw various shapes like triangle, rectangle, circle, etc.
 HTML 5 is capable of handling incorrect syntax.
 In HTML 5 there are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
5.2 HTML 5 New elements

 <article> tag is used to represent an article. More specifically, the content within
the <article> tag is independent from the other content of the site (even though it
can be related).
 <aside> tag is used to describe the main object of the web page in a shorter way
like a highlighter. It basically identifies the content that is related to the primary
content of the web page but does not constitute the main intent of the primary page.
The <aside> tag contains mainly author information, links, related content and so
on.
  <figurecaption> tag in HTML is used to set a caption to the figure element in a
document.
 <figure> tag in HTML is used to add self-contained content like illustrations,
diagrams, photos or codes listing in a document. It is related to main flow but it can
be used in any position of a document and the figure goes with the flow of the
document and if remove it then it should not affect the flow of the document.
 <header> tag contains the section heading as well as other content, such as a
navigation links, table of contents, etc.
 <footer> tag in HTML is used to define a footer of HTML document. This section
contains the footer information (author information, copyright information, carriers
etc). The footer tag is used within body tag. The <footer> tag is new in the HTML
5. The footer elements require a start tag as well as an end tag.
 <main > delineates the main content of the body of a document or web app.
 <mark> tag in HTML is used to define the marked text. It is used to highlight the
part of the text in the paragraph.
 <nav> tag is used to declaring the navigational section in HTML documents.
Websites typically have sections dedicated to navigational links, which enables
user to navigate the site. These links can be placed inside a nav tag.
 <section> demarcates a thematic grouping of content.
 <details> tag is used for the content/information which is initially hidden but could
be displayed if the user wishes to see it. This tag is used to create interactive widget
which user can open or close it. The content of details tag is visible when open the
set attributes.
 <summary> tag in HTML is used to define a summary for the <details> element.
 <time> tag is used to display the human-readable data/time.
 <svg> is the Scalable Vector Graphics.

5.3 Semantics

Elements such as <header>, <footer> and <article> are all considered semantic because
they accurately describe the purpose of the element and the type of content that is inside
them.
Examples:
<header></header>
<section>
 <article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>

Different Semantics Elements

 <section> element defines a section in a document.

 <article> element specifies independent, self-contained content. An article should
make sense on its own, and it should be possible to distribute it independently from
the rest of the web site.
 <header> element represents a container for introductory content or a set of
navigational links.
 <footer> element defines a footer for a document or section.
 <nav> element defines a set of navigation links.
 <aside> element defines some content aside from the content it is placed in (like a
sidebar). The <aside> content should be indirectly related to the surrounding
content.
 <figure> tag specifies self-contained content, like illustrations, diagrams, photos,
code listings, etc. The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or as the last child of
a <figure> element.

5.4 Graphics (Canvas, SVG, Google maps)

In HTML5 we can draw graphics using HTML elements instead of depending on images
or third-party components like Flash. There are three types of HTML 5 Graphics Canvas,
SVG and Google Maps.
 Canvas

The HTML <canvas> element is used to draw graphics on a web page.

 Examples:

<! DOCTYPE html>

<html>
<head>
<title> Canvas Demo </title>
</head>
<body>
<canvas id="canvasDemo" width="200" height="100"
style="border:1px solid #c3c3c3;">
Browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("canvasDemo");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0,0,200,100);
</script>
</body>
</html>

Output:

 SVG

SVG stands for Scalable Vector Graphics and used to define graphics for the web
The svg element is a container that defines a new coordinate system and viewport. It is used
as the outermost element of SVG documents, but it can also be used to embed an SVG
fragment inside an SVG or HTML document.

Examples 1:

<! DOCTYPE html>

<html>
<head>
<title> SVG Circle Demo </title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="30"
stroke="#000000" stroke-width="1" fill="#FF0000" />
Sorry, this browser does not support inline SVG.
</svg>
</body>
</html>
Output:
Examples 2:
<! DOCTYPE html>
<html>
<head>
<title> SVG Rectangle Demo </title>
</head>
<body>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,255,0);stroke-width:1;
stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Output:

 Google Maps

Google Maps is a web mapping platform and consumer application offered by

Google. It offers satellite imagery, aerial photography, street maps, 360° interactive
panoramic views of streets (Street View), real-time traffic conditions, and route
planning for traveling by foot, car, air (in beta) and public transportation.
This topic describes how to add google maps in web page using html tag.

Examples:

<! DOCTYPE html>

<html>
<head>
<title> Google Map Demonstration </title>
</head>
<body>

<h1>My First Google Map</h1>

<div id="googleMap"
style="width:100%; height:400px;"></div>

<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(27.2046,77.4977),
zoom:5,
};
var map = new google.maps.Map(document.getElementById
("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js
? key=YOUR_KEY&callback=myMap">
</script>
</body>
</html>
 Output:

5.5 Media (Audio and video)

The media elements, as the HTML5 audio and video elements are generically termed, are
a way of embedding playable media files directly into a web page without having to use
Flash or a plug-in.
 Audio

HTML5 supports <audio> tag which is used to embed sound content in an HTML.
MP3 is the best format for compressed recorded music. The term MP3 has become
synonymous with digital music.

Different audio file format

 MIDI (Musical Instrument Digital Interface). Main format for all electronic
music devices like synthesizers and PC sound cards. (. midi or .mid)
 RealAudio. Developed by Real Media to allow streaming of audio with low
bandwidths. Does not play in web browsers.(.ram or .rm)
 WMA (Windows Media Audio). Developed by Microsoft. Plays well on
Windows computers, but not in web browsers. (.wma)
 AAC (Advanced Audio Coding). Developed by Apple as the default format
for iTunes. Plays well on Apple computers, but not in web browsers.(.aac)
 WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML.(.wav)
 Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.(.ogg)
  MP3 files are actually the sound part of MPEG files. MP3 is the most popular
format for music players. Combines good compression (small files) with
high quality. Supported by all browsers.(.mp3)

Example:

<! DOCTYPE HTML>

<head>
<title> Audio Demo </title>
</head>
<html>
<body>

<audio controls autoplay>

<source src = "maisap.mp3" />
</audio>
</body>
</html>

Output:

 Video

There are many video formats out there. The current HTML5 draft specification
does not specify which video formats browsers should support in the video tag. But
most commonly used video formats are (ogg and mpeg4).
We can use <source> tag to specify media along with media type and many other
attributes. A video element allows multiple source elements and browser will use
the first recognized format.
Different file format:

 MPEG. Developed by the Moving Pictures Expert Group. The first popular
video format on the web. Not supported anymore in HTML.(.mpg, .mpeg)
 AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in
video cameras and TV hardware. Plays well on Windows computers, but not
in web browsers.(.avi)
 WMV (Windows Media Video). Developed by Microsoft. Commonly used
in video cameras and TV hardware. Plays well on Windows computers, but
not in web browsers. (.wmv)
 QuickTime. Developed by Apple. Commonly used in video cameras and TV
hardware. Plays well on Apple computers, but not in web browsers.(.mov)
 RealVideo. Developed by Real Media to allow video streaming with low
bandwidths. Does not play in web browsers. (.rm , .ram)
 Theora Ogg. Developed by the Xiph.Org Foundation. Supported by
HTML.(.ogg)
 WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by
HTML.(.webm)
 MP4. Developed by the Moving Pictures Expert Group. Commonly used in
video cameras and TV hardware. Supported by all browsers
and recommended by YouTube. (.mp4)

Example:

<! DOCTYPE HTML>

<html>
<head>
<title> Video Demo </title>
</head>
<body>
<p> Kutuma Kutu Song </p>
<video width = "300" height = "200" controls autoplay>
<source src = "kutu.webm" />
Your browser does not support the <video> element.
</video>
</body>
</html>
Output: