Can acontainelements? Can ancontainelements? Provide usage
examples.Hide answerThe answer to both questions is yes; i.e., acan
containelements, and ancan containelements.For example, a personal
dashboard page might contain afor social network interactions as
well as afor the latest news articles, the latter of which could
contain severalelements.Conversely, anmight contain aat the end for
reader comments.CommentCan a web page contain multipleelements?
What aboutelements?Hide answerYes to both. In fact, both theandtags
are designed to serve their respective purposes in relation to
whatever their parent section may be. So not only can the
pagecontain a header and a footer, but so can everyandelement. In
fact, ashould be present for all of these, although ais not always
necessary.CommentWhat are web workers?Hide answerWeb workersat long
last bring multi-threading to JavaScript.A web worker is a script
that runs in the background (i.e., in another thread) without the
page needing to wait for it to complete. The user can continue to
interact with the page while the web worker runs in the background.
Workers utilize thread-like message passing to achieve
parallelism.CommentHow do you indicate the character set being used
by an HTML5 document? How does this differ from older HTML
standards?Hide answerIn HTML5, the encoding used can be indicated
with thecharsetattribute of atag inside the documentselement:
...
...
...
This is a slightly simpler syntax from older HTML standards,
which did not have thecharsetattribute. For example, an HTML 4.01
document would use thetag as follows:
... ... ...
CommentWrite the code necessary to create a 300 pixel by 300
pixel. Within it, paint a blue 100 pixel by 100 pixel square with
the top-left corner of the square located 50 pixels from both the
top and left edges of the canvas.Hide answerHere is one simple
implementation:
var canvas = document.getElementById( "c" ); var drawing_context
= canvas.getContext( "2d" ); drawing_context.fillStyle = "blue";
drawing_context.fillRect( 50, 50, 100, 100 );
CommentDiscuss the differences between an HTMLspecificationand a
browsersimplementationthereof.Hide answerHTML specifications such
as HTML5 define a set of rules that a document must adhere to in
order to be valid according to that specification. In addition, a
specification provides instructions on how a browser must interpret
and render such a document.A browser is said to support a
specification if it handles valid documents according to the rules
of the specification. As of yet, no browser supports all aspects of
the HTML5 specification (although all of the major browser
supportmostof it), and as a result, it is necessary for the
developer to confirm whether the aspect they are making use of will
be supported by all of the browsers on which they hope to display
their content. This is why cross-browser support continues to be a
headache for developers, despite the improved specificiations.In
addition, while HTML5 defines some rules to follow for an invalid
HTML5 document (i.e., one that contains syntactical errors),
invalid documents may contain anything, and it is impossible for
the specification to handle all possibilities comprehensively.
Thus, many decisions about how to handle malformed documents are
left up to the browser.CommentBriefly describe the correct usage of
the following HTML5 semantic elements:,,,.Hide answerTheelement is
used to contain introductory and navigational information about a
section of the page. This can include the section heading, the
authors name, time and date of publication, table of contents, or
other navigational information.Theelement is meant to house a
self-contained composition that can logically be independently
recreated outside of the page without losing its meaining.
Individual blog posts or news stories are good examples.Theelement
is a flexible container for holding content that shares a common
informational theme or purpose.Theelement is used to hold
information that should appear at the end of a section of content
and contain additional information about the section. Authors name,
copyright information, and related links are typical examples of
such content.CommentDescribe the relationship between theandtags in
HTML5.Hide answerIn previous specifications of HTML, only
oneelement was typically present on a page, used for the heading of
the entire page. HTML5 specifies thatrepresents the top-level
heading of a section, whether that be the page, or anorelement. In
fact, everyelement should at least contain anelement. If there is
no natural heading for the section, it is a good indication it
should not use anortag.CommentWhat are some of the key new features
in HTML5?Hide answerKey new features of HTML5 include: Improved
support for embedding graphics, audio, and video content via the
new,, andtags. Extensions to the JavaScript API such
asgeolocationanddrag-and-dropas well forstorageandcaching.
Introduction ofweb workers. Several new semantic tags were also
added to complement the structural logic of modern web
applications. These include the,,,,,, andtags. New form controls,
such as,,,,, and.CommentWhat were some of the key goals and
motivations for the HTML5 specification?Hide answerHTML5 was
designed to replace both HTML 4, XHTML, and the HTML DOM Level
2.Major goals of theHTML specificationwere to: Deliver rich content
(graphics, movies, etc.) without the need for additional plugins
(e.g., Flash). Provide better semantic support for web page
structure through the introduction of new structural element tags.
Provide a stricter parsing standard to simplify error handling,
ensure more consistent cross-browser behavior, and simplify
backward compatibility with documents written to older standards.
Provide better cross-platform support (i.e., to work well whether
running on a PC, Tablet, or Smartphone).CommentGive a simple
implementation of thetag to embed a video stored
athttp://www.example.com/amazing_video.mp4. Give the video a width
of 640 pixels by 360 pixels. Provide the user with controls.Hide
answerHere is one simple implementation:
Alternatively, the source file may be indicated with a
separatetag inside theelement, as in:
CommentWhat is HTML5 Web Storage? Explain localStorage and
sessionStorage.Hide answerWith HTML5, web pages can store data
locally within the users browser.Earlier, this was done with
cookies. However, Web Storage is more secure and faster. The data
is not included with every server request, but used ONLY when asked
for.The data is stored in name/value pairs, and a web page can only
access data stored by itself. Unlike cookies, the storage limit is
far larger (at least 5MB) and information is never transferred to
the server.The difference between localStorage and sessionStorage
involves the lifetime and scope of the storage.Data stored through
localStorage is permanent: it does not expire and remains stored on
the users computer until a web app deletes it or the user asks the
browser to delete it. SessionStorage has the same lifetime as the
top-level window or browser tab in which the script that stored it
is running. When the window or tab is permanently closed, any data
stored through sessionStorage is deleted.Both forms of storage are
scoped to the document origin so that documents with different
origins will never share the stored objects. But sessionStorage is
also scoped on a per-window basis. If a user has two browser tabs
displaying documents from the same origin, those two tabs have
separate sessionStorage data: the scripts running in one tab cannot
read or overwrite the data written by scripts in the other tab,
even if both tabs are visiting exactly the same page and are
running exactly the same scripts.Comment* There is more to
interviewing than tricky technical questions, so these are intended
merely as a guide. Not every A candidate worth hiring will be able
to answer them all, nor does answering them all guarantee an A
candidate. At the end of the day,hiring remains an art, a science
and a lot of
work.http://www.toptal.com/html5/interview-questions
HTML5Local Storage PreviousNext Chapter
HTML local storage, better than cookies.
What is HTML Local Storage?With local 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. Local storage is more secure, and large amounts of
data can be stored locally, without affecting website
performance.Unlike cookies, the storage limit is far larger (at
least 5MB) and information is never transferred to the server.Local
storage is per domain. All pages, from one domain, can store and
access the same data.
Browser SupportThe numbers in the table specify the first
browser version that fully supports Local Storage.API
Web Storage4.08.03.54.011.5
HTML Local Storage ObjectsHTML local 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 tab is closed)Before
using local storage, check browser support for localStorage and
sessionStorage:if(typeof(Storage) !== "undefined") { //Code for
localStorage/sessionStorage.} else { // Sorry! No Web Storage
support..}
The localStorage ObjectThe localStorage object stores the data
with no expiration date. The data will not be deleted when the
browser is closed, and will be available the next day, week, or
year.Example// StorelocalStorage.setItem("lastname", "Smith");//
Retrievedocument.getElementById("result").innerHTML =
localStorage.getItem("lastname");Example explained: Create a
localStorage name/value pair with name="lastname" and value="Smith"
Retrieve the value of "lastname" and insert it into the element
with id="result"The example above could also be written like
this:// StorelocalStorage.lastname = "Smith";//
Retrievedocument.getElementById("result").innerHTML =
localStorage.lastname;The syntax for removing the "lastname"
localStorage item is as
follows:localStorage.removeItem("lastname");Note:Name/value pairs
are always stored as strings. Remember to convert them to another
format when needed!The following example counts the number of times
a user has clicked a button. In this code the value string is
converted to a number to be able to increase the counter:
Exampleif (localStorage.clickcount) { localStorage.clickcount =
Number(localStorage.clickcount) + 1;} else {
localStorage.clickcount =
1;}document.getElementById("result").innerHTML = "You have clicked
the button " +localStorage.clickcount + " time(s).";The
sessionStorage ObjectThe sessionStorage object is equal to the
localStorage object,exceptthat it stores the data for only one
session. The data is deleted when the user closes the browser
window.The following example counts the number of times a user has
clicked a button, in the current session:Exampleif
(sessionStorage.clickcount) { sessionStorage.clickcount =
Number(sessionStorage.clickcount) + 1;} else {
sessionStorage.clickcount =
1;}document.getElementById("result").innerHTML = "You have clicked
the button " +sessionStorage.clickcount + " time(s) in this
session.";
ContentsIntroductionWhat is the difference between Canvas and
SVG graphics?How to draw rectangle using Canvas and SVG using HTML
5 ?What are selectors in CSS?How can you apply CSS style using ID
value?What is the use of column layout in CSS?Can you explain CSS
box model?Can you explain some text effects in CSS 3?What are web
workers and why do we need them ?How can we add and remove data
from local storage?What is the lifetime of local storage?What is
the difference between local storage and cookies?What is difference
between session storage and local storage?What is WebSQL?Is WebSQL
a part of HTML 5 specification?So how can we use WebSQL ?So how do
we implement application cache in HTML 5 ?What is fallback in
Application cache?References for other interview question
articlesIntroductionI am ASP.NET MVC developer and recently when I
was looking for a job lot of questions were asked connected to HTML
5 and its new features. So below are 40 important questions which
would help you brush up your knowledge on HTML 5.These questions
are not silver bullet to get a job but yes they are helpful when
you want to quickly brush up the topic.Happy job hunting.
Courtesy: -www.questpond.comWhat is the relationship between
SGML,HTML , XML and XHTML?SGML (Standard generalized markup
language) is a standard which tells how to specify document markup.
Its only a Meta language which describes how a document markup
should be. HTML is a markup language which is described using
SGML.So by SGML they created DTD which the HTML refers and needs to
adhere to the same. So you will always find DOCTYPE attribute at
the top of HTML page which defines which DTD is used for parsing
purpose.HideCopy Code
Now parsing SGML was a pain so they created XML to make things
better. XML uses SGML. For example in SGML you have to start and
end tags but in XML you can have closing tags which close
automatically ().XHTML was created from XML which was used in HTML
4.0. So for example in SGML derived HTML is not valid but in XHTML
its valid. You can refer XML DTD as shown in the below code
snippet.HideCopy Code
What is HTML 5?HTML 5 is a new standard for HTML whose main
target is to deliver everything without need to any additional
plugins like flash, Silverlight etc. It has everything from
animations, videos, rich GUI etc.HTML5 is cooperation output
between World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).If I do not putwill
HTML 5 work?No, browser will not be able to identify that its a
HTML document and HTML 5 tags will not function properly.Which
browsers support HTML 5?Almost all browsers i.e. Safari, Chrome,
Firefox, Opera, Internet Explorer support HTML 5.How is the page
structure of HTML 5 different from HTML 4 or previous HTML?A
typical web page has headers, footers, navigation, central area and
side bars. Now if we want to represent the same in HTML 4 with
proper names to the HTML section we would probably use a DIV
tag.But in HTML 5 they have made it more clear by creating element
names for those sections which makes your HTML more readable.
Below are more details of the HTML 5 elements which form the
page structure. : Represents header data of HTML. : Footer section
of the page. : Navigation elements in the page. : Self-contained
content. : Used inside article to define sections or group content
in to sections. : Represent side bar contents of a page.What is
datalist in HTML 5?Datalist element in HTML 5 helps to provide
autocomplete feature in a textbox as shown below.
Below is the HTML code for DataList feature:-HideCopy Code
What are the different new form element types in HTML 5?There
are 10 important new form elements introduced in HTML 5:-1.
Color.2. Date3. Datetime-local4. Email5. Time6. Url7. Range8.
Telephone9. Number10. SearchLets understand these elements step by
step.If you want to show color picker dialog box.HideCopy Code
If you want to show calendar dialog box.HideCopy Code
If you want to show calendar with local time.HideCopy Code
If you want to create a HTML text with email validation we can
set the type as email.HideCopy Code
For URL validation set the type as url as shown in the below
HTML code.HideCopy Code
For URL validation set the type as url as shown in the below
HTML code.If you want to display textbox with number range you can
set type to number.HideCopy Code
If you want to display a range control you can use type as
range.HideCopy Code
Want to make text box as search engine box.HideCopy Code What to
only take time input.HideCopy Code If you want to make text box to
accept telephone numbers.HideCopy Code What is output element in
HTML 5?Output element is needed when you need calculation from two
inputs to be summarized in to a label. For instance you have two
textboxes( see the below figure) and you want to add numbers from
these textboxes and send them to a label.
Below goes the code of how to use output element with HTML
5.HideCopy Code
+ =
You can also replace parseInt with valueAsNumber for simplicity.
You can also use for in the output element for more
readability.HideCopy Code What is SVG?SVG stands for scalable
vector graphics. Its a text based graphic language which draws
images using text, lines, dots etc. This makes it lightweight and
renders faster.Can we see a simple example of SVG using HTML 5?Lets
say we want to display the below simple line using HTML 5 SVG.
Below is how the code of HTML 5. You can see the SVG tag which
encloses the polygon tag for displaying the star image.HideCopy
Code
What is canvas in HTML 5?Canvas is an HTML area on which you can
draw graphics.