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
