HTML5

Migration
Typical HTML4 Typical HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>

<div id="footer"> <footer>

 The Difference Between <article> <section> and <div>

 There is a confusing (lack of) difference in the HTML5 standard,
between <article> <section> and <div>.
 In the HTML5 standard, the <section> element is defined as a block of
related elements.
 The <article> element is defined as a complete, self-contained block of
related elements.
 The <div> element is defined as a block of children elements.
New Elements
 New Semantic/Structural Elements
Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text
outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element

Shatabdinalini Page 1
<time> Defines a date/time
<wbr> Defines a possible line-break

 New Form Elements

Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

 New Attribute Syntax

Type Example
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>

 New Input Types

New Input Types New Input Attributes

color autocomplete
date autofocus
datetime form
datetime-local formaction
email formenctype
month formmethod
number formnovalidate
range formtarget
search height and width
tel list
time min and max
url multiple
week pattern (regexp)
placeholder
required
step

Shatabdinalini Page 2
  Graphics

Tag Description
<canvas> Draw graphics, on the fly, via scripting (usually
JavaScript)
<svg> Draw scalable vector graphics

 Media Elements

Tag Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie
Semantics
 What are Semantic Elements?
 A semantic element clearly describes its meaning to both the browser and the
developer.
 Examples of non-semantic elements: <div> and <span> - Tells nothing about
its content.
 Examples of semantic elements: <form>, <table>, and <article> - Clearly
defines its content.
 New Semantic Elements in HTML5
 Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer"> to indicate navigation, header, and footer.
 HTML5 offers new semantic elements to define different parts of a web page:
<article>,<aside>,<details>,<figcaption>,<figure>,<footer>,<header>,<main>
<mark>,<nav>,<section>,<summary>,<time>

 HTML5 <section> Element

 The <section> element defines a section in a document.
 A section is a semantic grouping of content, typically with a heading.

Shatabdinalini Page 3
  HTML5 <article> Element
 The <article> element specifies independent, self-contained content.
 An article should make sense on its own, and it should be possible to read it
independently from the rest of the web site.
 Examples of where an <article> element can be used:
 Forum post
 Blog post
 Newspaper article
 HTML5 <header> Element
 The <header> element specifies a header for a document or section.
 The <header> element should be used as a container for introductory content.
 You can have several <header> elements in one document.
 HTML5 <footer> Element
 The <footer> element specifies a footer for a document or section.
 A <footer> element should contain information about its containing element.
 A footer typically contains the author of the document, copyright information,
links to terms of use, contact information, etc.
 You may have several <footer> elements in one document.
 HTML5 <nav> Element
 The <nav> element defines a set of navigation links.
 HTML5 <aside> Element
 The <aside> element defines some content aside from the content it is placed in
(like a sidebar).
 The aside content should be related to the surrounding content.
 HTML5 <figure> and <figcaption> Elements
 The purpose of a figure caption is to add a visual explanation to an image.
 Why Semantic Elements?
 With HTML4, developers used their own id/class names to style elements:
header, top, bottom, footer, menu, navigation, main, container, content, article,
sidebar, topnav, etc.
 This made it impossible for search engines to identify the correct web page
content.
 With the new HTML5 elements (<header> <footer> <nav> <section>
<article>), this will become easier.
Tag description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can
view or hide
<figcaption> Defines a caption for a<figure> element
<figure> Specifies self contained content like
illustrations, diagrams,photos,code listing etc
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text

Shatabdinalini Page 4
 <nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details>
element
<time> Defines a date /time

Canvas
 What is HTML Canvas?
 The HTML <canvas> element is used to draw graphics, on the fly, via scripting
(usually JavaScript).
 The <canvas> element is only a container for graphics. You must use a script to
actually draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
 Canvas Examples
 A canvas is a rectangular area on an HTML page. By default, a canvas
has no border and no content.
 <canvas id="myCanvas" width="200" height="100"></canvas>
SVG
 What is SVG?
 SVG stands for Scalable Vector Graphics
 SVG is used to define graphics for the Web
 SVG is a W3C recommendation
 The HTML <svg> Element
 The HTML <svg> element is a container for SVG graphics.
 SVG has several methods for drawing paths, boxes, circles, text, and graphic
images.
 Differences Between SVG and Canvas
 SVG is a language for describing 2D graphics in XML.
 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.
 In SVG, each drawn shape is remembered as an object. If attributes of an SVG
object are changed, the browser can automatically re-render the shape.
 Canvas is rendered pixel by pixel.
 In canvas, once the graphic is drawn, it is forgotten by the browser. If its position
should be changed, the entire scene needs to be redrawn, including any objects
that might have been covered by the graphic.
 Comparison of Canvas and SVG

Canvas SVG
Resolution dependent Resolution independent

Shatabdinalini Page 5
No support for event handlers Support for event handlers

Poor text rendering capabilities Best suited for applications with large
rendering areas (Google Maps)

You can save the resulting image as .png or Slow rendering if complex (anything that uses
.jpg the DOM a lot will be slow)

Well suited for graphic-intensive games Not suited for game applications

Google maps
 Google Maps allows you to display maps on your web page:
 The mapOptions variable defines the properties for the map.
 The center property specifies where to center the map (using latitude and
longitude coordinates).
 The zoom property specifies the zoom level for the map (try to experiment
with the zoom level).
 The mapTypeId property specifies the map type to display. The following
map types are supported: ROADMAP, SATELLITE, HYBRID, and
TERRAIN.
Multimedia
 What is Multimedia?
 Multimedia comes in many different formats.
 It can be almost anything you can hear or see.
 Examples: Images, music, sound, videos, records, films, animations, and more.
 Web pages often contain multimedia elements of different types and formats.
 Multimedia Formats
 Multimedia elements (like audio or video) are stored in media files.
 The most common way to discover the type of a file, is to look at the file
extension.
 Multimedia files have formats and different extensions like: .swf, .wav, .mp3,
.mp4, .mpg, .wmv, and .avi.
 Common Video Formats
Format File Description
MPEG .mpg MPEG. Developed by the
.mpeg Moving Pictures Expert
Group. The first popular video
format on the web. Used to be
supported by all browsers, but
it is not supported in HTML5
(See MP4).
AVI .avi AVI (Audio Video Interleave).
Developed by Microsoft.
Commonly used in video
cameras and TV hardware.

Shatabdinalini Page 6
 Plays well on Windows
computers, but not in web
browsers.
WMV .wmv 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.
QuickTime .mov QuickTime. Developed by
Apple. Commonly used in
video cameras and TV
hardware. Plays well on Apple
computers, but not in web
browsers. (See MP4)
RealVideo .rm RealVideo. Developed by
.ram Real Media to allow video
streaming with low
bandwidths. It is still used for
online video and Internet TV,
but does not play in web
browsers.
Flash .swf Flash. Developed by
.flv Macromedia. Often requires
an extra component (plug-in)
to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the
Xiph.Org Foundation.
Supported by HTML5.
WebM .webm WebM. Developed by the web
giants, Mozilla, Opera, Adobe,
and Google. Supported by
HTML5.
MPEG-4 .mp4 MP4. Developed by the
or MP4 Moving Pictures Expert
Group. Based on QuickTime.
Commonly used in newer
video cameras and TV
hardware. Supported by all
HTML5 browsers.
Recommended by YouTube.

Shatabdinalini Page 7
  Audio Formats

Format File Description

MIDI .mid MIDI (Musical Instrument Digital
.midi Interface). Main format for all
electronic music devices like
synthesizers and PC sound cards.
MIDI files do not contain sound, but
digital notes that can be played by
electronics. Plays well on all
computers and music hardware, but
not in web browsers.
RealAudio .rm RealAudio. Developed by Real
.ram Media to allow streaming of audio
with low bandwidths. Does not play
in web browsers.
WMA .wma WMA (Windows Media Audio).
Developed by Microsoft. Commonly
used in music players. Plays well on
Windows computers, but not in web
browsers.
AAC .aac AAC (Advanced Audio Coding).
Developed by Apple as the default
format for iTunes. Plays well on
Apple computers, but not in web
browsers.
WAV .wav WAV. Developed by IBM and
Microsoft. Plays well on Windows,
Macintosh, and Linux operating
systems. Supported by HTML5.
Ogg .ogg Ogg. Developed by the Xiph.Org
Foundation. Supported by HTML5.
MP3 .mp3 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.
MP4 .mp4 MP4 is a video format, but can also
be used for audio. MP4 video is the
upcoming video format on the
internet. This leads to automatic
support for MP4 audio by all
browsers.

Shatabdinalini Page 8
APIs
 Geolocation
 The HTML Geolocation API is used to get the geographical position of a user.
 The getCurrentPosition() method is used to return the user's position
 The getCurrentPosition() Method - Return Data
 The getCurrentPosition() method returns an object on success.
 The latitude, longitude and accuracy properties are always returned
 The other properties are returned if available:
Property Returns
coords.latitude The latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if
available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)

 Geolocation Object - Other interesting Methods

 The Geolocation object also has other interesting methods:
 watchPosition() - Returns the current position of the user and continues
to return updated position as the user moves (like the GPS in a car).
 clearWatch() - Stops the watchPosition() method.
 Drag and Drop
 Drag and drop is a very common feature. It is when you "grab" an object and
drag it to a different location.
 What is HTML Web Storage?
 With web storage, web applications can store data locally within the user's
browser.
 Before HTML5, application data had to be stored in cookies, included in every
server request.
 Web storage is more secure, and large amounts of data can be stored locally,
without affecting website performance.
 HTML Web Storage Objects
 HTML web storage provides two objects for storing data on the client:
window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is
lost when the browser tab is closed)
 What is a Web Worker?
 When executing scripts in an HTML page, the page becomes unresponsive
until the script is finished.

Shatabdinalini Page 9
  A web worker is a JavaScript that runs in the background, independently of
other scripts, without affecting the performance of the page.
 You can continue to do whatever you want: clicking, selecting things, etc.,
while the web worker runs in the background.

Shatabdinalini Page 10