Wednesday, April 22, 2015

HTML5 Interview Questions and Answers

1. What is the use of Canvas Element in HTML5? 
HTML5 Canvas element can be used to draw graphics images on a web page by using JavaScript.
2. Can you give an example of Canvas element how it can be used?

<canvas id=“KCCanvas” width=“500″ height=“400″>
<script type=“text/javascript”>
var KCCanvas=document.getElementById(“KCCanvas”);
var KCText=KCCanvas.getContext(“2d”);
This book is far better than any other learning material. It has very basic information that includes both HTML5 and CSS3 with sample code and comprehensive examples.
3. What is the purpose of HTML5 versus XHTML?
HTML5 is the next version of HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX. Instead of using those plugins, it enables browser to serve elements such as video and audio without any additional requirements on the client machine.

4. What is the difference between HTML and HTML5?
HTML5 is nothing more than upgraded version of HTML where in HTML5 supports the innovative features such as Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do external plugin like Flash player or other library elements.
5. WHAT are some other advantages of HTML5?
a) Cleaner markup than earlier versions of HTML
b) Additional semantics of new elements like <header>, <nav>, and <time>
c) New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.

6. What is the <!DOCTYPE>? Is it mandatory to use in HTML5?
The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> tag does not have an end tag. It is not case sensitive.
The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag.  As In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).
7. What are the New Media Elements in HTML5?
New Media Elements in HTML5 are:
For multimedia content, sounds, music or other audio streams
For video content, such as a movie clip or other video streams
For media resources for media elements, defined inside video or audio
For embedded content, such as a plug-in
For text tracks used in media players

8. What is the major improvement with HTML5 in reference to Flash?
Flash is not supported by major mobile devices such as iPad, iPhone and universal android applications. Those mobile devices have lack of support for installing flash plugins. HTML5 is supported by all the devices, apps and browser including Apple and Android products. Compared to Flash, HTML5 is very secured and protected. That eliminates major concerns that we have seen with Flash.
9. What is the sessionStorage Object in html5? How you can create and access that?
The HTML5 sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. We can create and access a sessionStorage, created “name” as session
<script type=“text/javascript”>“KoolClasses”;

10. Can a <section> contain <article> elements? Can an <article> contain <section> elements? Provide usage examples.
The answer to both questions is yes; i.e., a <section> can contain <article> elements, and an <article> can contain <section>elements.
For example, a personal dashboard page might contain a <section> for social network interactions as well as a <section> for the latest news articles, the latter of which could contain several <article> elements.
Conversely, an <article> might contain a <section> at the end for reader comments.

11. Can a web page contain multiple <header> elements? What about <footer> elements?
Yes to both. In fact, both the <header> and <footer> tags are designed to serve their respective purposes in relation to whatever their parent “section” may be. So not only can the page <body> contain a header and a footer, but so can every <article> and <section> element. In fact, a <header> should be present for all of these, although a <footer> is not always necessary.

12. How do you indicate the character set being used by an HTML5 document? How does this differ from older HTML standards?
In HTML5, the encoding used can be indicated with the charset attribute of a <meta> tag inside the document’s <head> element:
<!DOCTYPE html>
<meta charset="UTF-8">
This is a slightly simpler syntax from older HTML standards, which did not have the charset attribute. For example, an HTML 4.01 document would use the <meta> tag as follows:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

13. Write the code necessary to create a 300 pixel by 300 pixel <canvas>. 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.
Here is one simple implementation:
<canvas id="c" width="300" height="300"></canvas>
  var canvas = document.getElementById( "c" );
  var drawing_context = canvas.getContext( "2d" );
  drawing_context.fillStyle = "blue";
  drawing_context.fillRect( 50, 50, 100, 100 );

14. Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>.
The <header> element is used to contain introductory and navigational information about a section of the page. This can include the section heading, the author’s name, time and date of publication, table of contents, or other navigational information.
The <article> element is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing its meaning. Individual blog posts or news stories are good examples.
The <section> element is a flexible container for holding content that shares a common informational theme or purpose.
The <footer> element is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author’s name, copyright information, and related links are typical examples of such content.

15. Describe the relationship between the <header> and <h1> tags in HTML5.
In previous specifications of HTML, only one <h1> element was typically present on a page, used for the heading of the entire page. HTML5 specifies that <h1> represents the top-level heading of a “section”, whether that be the page <body>, or an <article> or <section> element. In fact, every <header> element should at least contain an <h1> element. If there is no natural heading for the section, it is a good indication it should not use an <article> or <section> tag.

16. What are some of the key new features in HTML5?
Key new features of HTML5 include:
Improved support for embedding graphics, audio, and video content via the new <canvas>, <audio>, and <video> tags.
Extensions to the JavaScript API such as geolocation and drag-and-drop as well for storage and caching.
Introduction of “web workers”.
Several new semantic tags were also added to complement the structural logic of modern web applications. These include the <main>, <nav>, <article>, <section>, <header>, <footer>, and <aside> tags.
New form controls, such as <calendar>, <date>, <time>, <email>, <url>, and <search>.

17. What were some of the key goals and motivations for the HTML5 specification?
HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2.
Major goals of the HTML specification were 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).

18. What is the HTML5 email form field input?
In HTML5, there is a new type that is specifically for email inputs on a form. The markup <input type=”email”> basically tells the browser that it should not allow the form to be submitted if the user has not entered what the browser determines to be a correctly formatted email address.
Remember that the browser must do the validation – HTML5 is just a standard that means nothing until the browser actually implements it. Also, this doesn’t mean that the browser is supposed to actually check to see if the email address is a real email address (that would be very difficult to do), but only that it’s format is valid (like it contains an “@” sign, etc.).

Empty email form field inputs

Just like any other input type, a user can submit a form with an empty email input field – unless of course there is a “required” attribute for the input field.

The email input and “multiple” attribute

The HTML5 email input type can also have what’s known as the multiple attribute, which, when used inside an input tag with type “email”, basically means that the value of the field can be a list of comma -separated, valid email addresses. This would just look something like this: <input type=”email” multiple>. But, this functionality doesn’t mean that the user has to put in a comma separated list manually. The browser could possibly offer some suggestions for which emails to add to the input field – through a contacts list stored somewhere – the point is that it’s up to the browser to display other options to the user in this scenario.