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.