(Frequently Asked Questions) : Html5 - Nextgen Web Faq
(Frequently Asked Questions) : Html5 - Nextgen Web Faq
Table of Contents
S# Question
1. What is WHATWG?
2. What is HTML5?
3. When to use DOCTYPE in XHTML?
4. Do all browsers support HTML5?
5. What is new in HTML5?
6 Why CSS1 to CSS3?
7. What is JavaScript?
8. What is a Single Page Application (SPA)?
9. Does HTML5 have any limitations?
10. Does HTML5 provide persistence?
11. Can HTML5 work with Audio and Video?
12. Are there elements in HTML 4 that are removed from HTML5?
13. Is the term HTML5 Video significant?
14. What happened to IE and HTML5?
15. What is the use of Autofocus in HTML5?
16. Does HTML5 have facility for creation of graphics?
17. Does HTML5 support adaptive streaming over HTTP?
18. What is Geolocation in HTML5?
19. What is a Wrapper Application?
20. Are there any new input type attributes in HTML5?
21. Is HTML5 supported in mobiles?
22. What are the tools available for creating HTML5 based mobile applications?
23. What are the issues of HTML5 in mobile devices?
24. Which scripting mistakes are frequently made by a developer?
25. Can we render a string value of a String object in bold?
26. Can we remove the underline of a hyperlink text?
27. Is there any difference between the id and class attributes?
28. How can one remove the blue border that surrounds the linked images?
29. Can there be multiple Submit buttons in a form?
30. Is it possible to keep a background image static when a page is scrolled?
What is WHATWG?
The Web Hypertext Application Technology Working Group (WHATWG) is an
emerging community of people involved in evolving the Web. Its efforts are focused
largely on the improvement and development of HTML and APIs required for Web
applications.
The WHATWG was set up in 2004 by individuals of the Mozilla Foundation, Apple,
and Opera Software, after conduction of a W3C workshop. Mozilla, Apple, and
Opera were concerned about W3C’s direction towards XHTML, lack of interest for
HTML and apparent neglect and disregard for the needs of real-world authors.
Hence, as a response, these organizations set out with an objective to address
these concerns and eventually gave rise to the Web Hypertext Application
Technology Working Group.
HTML5 is a cooperative project between the W3C and the Web Hypertext
Application Technology Working Group (WHATWG). W3C was busy working with
XHTML 2.0 and WHATWG was working with Web forms, new HTML features, and
applications. In 2006, the two groups decided to work together and develop a new
version of HTML.
What is HTML5?
HTML5 is a snapshot of HTML being developed by the WHATWG community and
also the W3C HTML Working Group.
HTML5 is a new version of HTML 4, XHTML1, and DOM Level 2 HTML that addresses
many of the issues related to these specifications. At the same time it enhances
(X)HTML to address Web applications more adequately. It defines a markup
language that can be written in both HTML and XML (XHTML) and also provides
many APIs that form the base of the Web architecture. Some of these APIs were
never acknowledged before and were known as ‘DOM Level 0’. Nevertheless, they
are very important for browser vendors to support existing Web content and also
for authors to develop Web applications.
HTML5 includes many features that Web browsers have supported for many years
but were never formally documented or standardized or were available only through
plug-in technologies such as Shockwave or Flash.
However, the major browsers, such as Chrome, Firefox, Opera, Safari, Internet
Explorer, and so on, are trying to add new HTML5 features to the latest versions of
the browsers at varying rates.
Apple (Safari) and Google (Chrome) are the two most aggressive browsers adapting
HTML5 features, followed by Opera and Firefox. Recently, Microsoft previewed
HTML5 in the IE upgrade Internet Explorer 9.
Apple and Google are facing some opposition for launching HTML5 ‘showcase’ sites
demonstrating HTML5 functionality optimized for their individual browsers. As a
result, the Web Hypertext Application Technology Working Group (WHATWG) is
keeping a running note of which features are supported in which browsers.
CSS is used to add style such as colors, fonts, and spacing to Web documents. CSS
consists of many levels and profiles. Every CSS version is updated by adding new
features. The CSS versions are listed as CSS 1, CSS 2, CSS 3, and CSS 4, where
each version is identified with a version number.
HTML was never projected to format the entire Web page, but only the individual
elements. The formatting requirement is addressed by CSS which allows the
developer to create a style once and use it throughout the whole site or selected
Web pages. CSS3 is the latest version of CSS.
CSS 3 is divided into multiple documents called ’modules’. Each of these modules
has new capabilities or extends the features present in CSS 2. Drafting of CSS 3
started when publication of the original CSS 2 recommendation was released. The
first CSS 3 drafts were released on, June 1999. CSS 3 extends variety of new ways
to create an impact with any designs, with quite a few important changes.
What is JavaScript?
Web programming is divided into sections that reside on the client browser and that
which reside on the server. JavaScript is an interpreted language used to program
interactivity into client browser Web pages such as displaying popping a dialog box
or displaying a dynamic table of data. Several JavaScript libraries and APIs are
provided by third party vendors provide to ensure their functionality is supported
and implemented consistently across the different browsers.
JavaScript is a scripting language that allows you to build dynamic Web pages by
ensuring maximum user interactivity.
The first version of JavaScript was developed by Brendan Eich at Netscape in 1995
and was named JavaScript 1.0. Netscape Navigator 2.0 and Internet Explorer 3.0
supported JavaScript 1.0. Over the period, it gradually evolved with newer versions
where each version provided better features and functionalities as compared to
their previous versions.
With HTML5, the browser application can be made to look and behave just like a
native application. Most of the SPAs download all the client-side code on the first
request or use, and store it in a special area of the browser’s cache for later
requests. Communication to the server is made using JavaScript on an as-needed
basis, usually only for update-check purpose by using services.
Also, the security of the locally-stored data is still not broadly accepted as being
fool-proof with HTML5. The interpreted JavaScript and rendered HTML and CSS
code provides a slower execution as compared to a compiled native app.
By trying different tactics with HTML5 deployment mixes such as SPA vs. server-fed
along with providing coverage by using wrapper, native, and hybrid apps helps to
improve HTML5 functionality.
Web storage was originally a part of the HTML5 specification, but now it is present
in a separate specification. It enables to store a maximum of 5 MB of information
per domain.
Local storage enables the user to save data for longer periods on the user’s
computer, through the browser. The data is persistent and can be retrieved when a
user revisits a site at a later date. In other words, local storage is used if you want
the data to be stored for more than a single session. A simple scenario would be to
count the number of times a person has visited a Web page.
To provide an easier solution for this behavior, HTML5 has introduced autofocus
attribute for the form elements. The autofocus attribute will focus on the input field
on page load. However, depending upon the situation, it will not move the focus
away if the user has selected some other field. Only one element can be focused
with autofocus attribute on a particular page while loading.
The <canvas> in HTML5 is like the <div>, <table>, or <a> tag except that the
content used in it are rendered through JavaScript. The <canvas> element is
simple and easy to use with JavaScript. The <canvas> element does not contain
any drawing abilities; instead the drawing is done using a JavaScript code. To make
use of the <canvas> element, the user has to add the canvas tag on the HTML
page.
To draw a <canvas> element the user can use the context object. The context
object contains the drawing functions for a specific style of graphics. 2d
(Two-dimensional) context is used to work with two-dimensional operations. The
<canvas> element in DOM exposes the HTMLCanvasElement interface. This
interface provides the methods and properties for changing the presentation and
layout of canvas elements.
The object that holds the implementation of the Geolocation API is the Geolocation
Object. This object is used in JavaScript to retrieve programmatically the
geographic information about the devices. The browser processes the JavaScript
and returns the location to the Geolocation API. The Geolocation API is supported
on most of the modern browsers available on the desktop and mobile phones.
The location information can be retrieved using any of the properties of the position
object such as:
• coords.longitude
• coords.latitude
• coords.accuracy
• coords.altitude
• coords.altitudeAccuracy
• coords.speed
• coords.heading
• timestamp
The new input types supported by HTML5 are listed in the following table that
specifies the kind of input expected from the users on the Web page.
Type Description
email Represents an e-mail input field.
search Represents a text field with no line breaks.
url Represents a text field to accept Web addresses.
tel Represents a text field to accept telephone
numbers.
number Represents a numeric value in the input field.
range Represents a numeric value to be selected from
a range of numbers.
date Represents a calendar.
Offline support allows mobile browsers to cache static pages. Browsers depend
more on HTTP response headers sent by Web servers for fetching HTML, CSS, and
multimedia that is required to render the Web page. If all the required data to
render a page is cached, then a page loads quickly. However, if even one item does
not get cached then everything slows down dramatically.
What are the tools available for creating HTML5 based mobile
applications?
With development of HTML5 and mobile Web development, new frameworks and
tools have come up to provide a more comprehensive and consistent HTML5
support in mobile browsers. Some HTML5 mobile Web frameworks are as follows:
jQuery Mobile: It is a cohesive user interface system for all the popular and
commonly used mobile device platforms, built on jQuery and jQuery UI.
Sencha Touch: It is the first HTML5 framework that allows building Web
applications that are user friendly for mobile devices. It provides a
comprehensive UI widget library, extensive data package, and a complete
touch event management with CSS transitions.
jQTouch: It is a jQuery plugin for mobile Web development on the iPod Touch,
iPhone, Android 2.3+, and other devices. This framework is more inclined
towards CSS and less on JavaScript.
HTML5, and native mobile applications. The Worklight Studio IDE provides
mobile developers with full use of all existing HTML5 functionality as well as
enhancement of these features with utilities required by modern organizations
such as offline authentication, data encryption, third party library integration
with frameworks such as Sencha Touch, JQuery, and so on, and combined
HTML5 and native coding.
Google Web Toolkit: It is a Web app framework used for developing HTML5-
based mobile apps in Java in combination with mobile widget libraries such as
m-gwt.
Apple's operating system iOS 3.2 powering iPod Touches, iPhones, and iPads
has several issues with HTML5 video as follows:
If a poster attribute is included, iOS does not recognize the video. The
poster attribute of the <video> element helps to display a custom image
while the video is loading or till the user presses ‘play’. This problem has
been resolved in iOS 4.0.
When there are multiple source elements, iOS recognizes only the first one.
Since iOS devices support only H.264+AAC+MP4, it means MP4 has to be the
first. This problem has also been resolved in iOS 4.0.
It did not support the controls attribute. Though, there were no issues in
including it, but Android did not display any user interface controls for a
video. It was required to provide your own user interface controls. At a most,
one could provide a script that started playing the video when clicked. This
issue is also resolved in Android 2.3.
The video element did not load the video source when transferred over
HTTPS. This issue was resolved in Android 3.1.
How can one remove the blue border that surrounds the linked
images?
The blue border surrounding the linked image can be removed by using the border
shorthand property. The following code demonstrates how to remove the blue
border:
body
{
background-attachment: fixed;
background-image: url(“nature.jpg”);
background-repeat: no-repeat;
}