50 HTML5 Interview Questions - Electronics Post

1. What are the new features introduced in HTML5?

HTML5 is one of the very popular versions of HTML. It has many features to build Web2.0 websites. Some of the new features introduced in HTML5 are as follows:

Forms 2.0: This is an improvement to support new attributes in Web based forms. These are added to <input> tag in <form>

Semantic Elements: There are new elements like <header>, <footer> and <section> etc introduced for semantic purposes.

WebSocket: HTML5 introduced WebSocket for bi-directional communication between multiple Web applications. This is a new technology with great usage.

Persistent Local Storage: In HTML5 we can use Local Storage for persisting information. We do not need to depend on 3rd party software for this purpose.

Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).

Drag and Drop: HTML5 provides Drag and Drop functionality for various items in a Web page. These are very convenient to design custom layout web pages.

Canvas: To provide 2 dimensional drawing option to users, we can use Canvas from HTML5. This is programmable with JavaScript.

Audio and Video: In HTML5 we can embed audio and video in our web page and use it for enriched user experience of Web2.0. Now we need not depend on 3rd party libraries for audio video support.

Geolocation: HTML5 also provides support for getting geographic location of visitors to a website.

Microdata: In case we want to extend the vocabulary of HTML, we can use Microdata to extend our HTML5 vocabulary.

2. What are the popular web browsers that support HTML5?

Some of the popular web browsers that support HTML5 are as follows:

Latest version of Google Chrome

Safari from Apple

Latest version of Firefox from Mozilla

Internet 9.0 and above version

Web-browser version on iPhone, iPad

3. Can we use HTML5 web pages on old versions of browsers?

Yes, HTML5 can work on old versions of browsers as well. We may not use new features of HTML5 on old browsers. But it can work easily on older versions.

We can also call a JavaScript function to check if HTML5 is supported on a browser or not.

4. Is HTML5 a Case-sensitive language?

No, HTML5 is not a case-sensitive language.

5. Why do we use <section> tag in HTML5?

This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.

6. Why do we use <article> tag in HTML5?

We use <article> tags to specify an independent portion of content. It can be the part of a document or a blog. For new sites, an article can be the part of a news item.

7. How can you force user to enter at least some value in an input in HTML5?

We can use required attribute in an input type to force user to enter at least some value in that input. This attribute is available since HTML5.

E.g. In following example emailId is a required input of this form.

EmailId: <input type=”text” name=”emailId” required>

</form>

8. Why do we use <aside> tag in HTML5?

In HTML5 <aside> tag represents the content that is partially related to the main content of the web-page.

E.g. <body> <p>This is an example of aside tag.</p>

<aside>

<h4>Aside Tag is kept aside.</h4>

<p>It is not supported in Internet Explorer 8 and versions before that.</p>

</aside></body>

9. What is MathML?

MathML is used for mathematical and scientific content on webpages. We can use MathML to encode mathematical notations and equations in high-quality content.

There are many xml tags in MathML that can be used to show scientific equations in web content.

E.g. Following code will output equation: x2 +y2 = z2

<mrow>

</mrow>

</math>

10. Do we need a plugin to use MathML tags in HTML5?

In HTML5, we can start using MathML elements in a document without the need of a plugin. We just use <math> tag and start using MathML tags to write scientific content.

11. Why do we use <header> tag in HTML5?

When we have to depict the top-level information of a section, we can use <header> tag. We can define different levels of headings in <header> tag. Heading with h1 number is the most important heading. After that we can define h2, h3 etc for lower levels of heading information.

E.g.

<body>

<h1>Very Important Header</h1>

<h2>Somewhat Important Header</h2>

<h3>Less Important Header</h3>

<h6>Least Important Header</h6>

<p>Just some relevant information.</p>

</header>

</article>

</body>

12. What are the main limitations of using cookies?

Some of the main limitations of using cookies are as follows:

Domain Specific: Cookies are specific to a web domain. We cannot use cookies created by one domain in another domain. This is a security limitation on cookies from web browsers.
Browser Specific: Cookies are specific to a browser. Every browser has its own location for storing cookies. Therefore cookies created by a browser (Internet Explorer) cannot be used by another browser (Google Chrome).
Clear Text: Most of the times Cookies are stored in clear text files. These files can be read by anyone who has access to the filesystem. Due to this, cookies are not secure and we should not store sensitive information in cookies.
Length Limitation: There is a size/length limitation on the total size of all cookies by browser. We have to follow this while storing large amount of information in a cookie.
Count Limitation: In some browsers, there is limit of the number of cookies that can be stored by a domain. This is also a limitation to the use of cookies.
Cookie Disable: Users can also choose to disable cookies. Due to this we cannot reliably work with cookies for all the features.
Case-sensitive: Cookies are case-sensitive. So we have to use exactly same name and case for storing and retrieving cookies.
Security: Cookies also transmit along with HTTL request. Due to this we may be sending unencrypted data over the Internet with a Cookie. This creates security loophole.

13. Why do we use <footer> tag in HTML5?

We can use <footer> tag to show information about copyright, footer, fan, privacy policy etc. This is the information present in footer of a web page.

E.g.

<body>

<p>Copyright: KnowledgePowerhouse</p>

<p>Web site: <a href=”www.knowledgepowerhouse.com”>www.knowledgepowerhouse.com</a>.</p>

</footer>

</body>

14. Why do we use <nav> tag in HTML5?

Any section of a web-page that is used for navigation can be represented by <nav> tag in HTML5.

E.g. In following example we have created Menu with different subjects:

<body>

<nav>

<a href=”/js/”>JavaScript</a> <br/>

</nav>

</body>

15. How will you migrate from HTML4 to HTML5?

HTML5 has introduced many changes to HTML. To migrate our existing code from HTML4 to HTML5 we can use following steps:

header: Change <div id=”header”> to <header> in HTML5.
menu: Replace <div id=”menu”> with <nav> in HTML5.
content: Change <div id=”content”> to <section> in HTML5.
article: Replace <div id=”article”> with <article> in HTML5.
footer: Change <div id=”footer”> to <footer> in HTML5.
Doctype: Change Doctype from <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> to <!Doctype HTML> in HTML5.
Encoding: Replace encoding <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″> to <meta charset=”utf-8″> in HTML5.

16. Why do we use <dialog> tag in HTML5?

Whenever we want to show some dialog or conversation in a document, we can use <dialog> tag.

The dialog tag is currently supported in Chrome version 37+, Safari 6+ and Opera 24+.

17. Why do we use <figure> tag in HTML5?

We can use <figure> tag to attach a caption with another content like- video, image etc.

18. Have you used custom attributes in HTML5?

Yes, we can use custom attributes in HTML5. We can use prefix data to define custom attributes in a tag.

E.g.

In following example, we have two custom attributes data-product and data-color defined in <div> tag.

…

</div>

Custom attributes work well with HTML5 parser. We can use further Java or JavaScript code to get the value of custom attributes in our program.

19. What is new in Web Forms 2.0 of HTML5?

Web Forms 2.0 has been superseded by Forms in HTML5. This is a new feature on top of Forms in HTML4.

There are new input types and input attributes in HTML5 that eliminate the need for complex scripting.

There are new input types like color, month, week, URL, email etc makes it much easier to build forms with enhanced functionality.

There are new attributes for input like- autocomplete, autofocus, pattern, placeholder etc. that can be used to add logic to regular input types. This increases the efficiency of web development.

20. What is the purpose of datetime input type in HTML5 Forms?

Datetime input type in HTML5 Form is used for taking data and time input from user. Datetime can have information on year, month, day, hour, minute, second and fractions of a second. It uses UTC timezone for time.

E.g.

<form>

Enter Date and time:

</form>

21. Why do we use datetime-local input type in HTML5 Forms?

We use datetime-local input type in HTML5 to represent date and time without timezone information. This is the main difference between date time and datetime-local. Datetime input type have UTC timezone, but datetime-local has no timezone information.

E.g.

<form>

Enter Date and time:

</form>

22. How will you take date as an input in HTML5 form?

We can use date input type in HTML5 form to get a date input (year, month and day). It is encoded in ISO standard.

E.g.

<form>

Enter a date:<br>

</form>

23. Why do we use month input type in HTML5 form?

We use month input type in HTML5 form to give user an option to select a Month and Year. Depending on web browser support a date picker is shown to user.

E.g.

<form>

Select a month:

</form>

24. How will you take week as an input from user in HTML5 form?

We use week input type to give used an option to select Week and Year. It gives us week and year in an ISO standard format.

E.g.

<form >

Enter a week:

</form>

25. How will you validate email address as input in HTML5 form?

We can use email input type for validating email address in HTML5 form. Users can enter only valid email address with this input type. It forces users to enter email in email@abc.com format.

E.g.

<form>

Enter email:

</form>

26. How will you take time as an input in HTML5 form?

We can use time input type to take hour, minute, seconds etc as input in a HTML5 form. It provides time in ISO standard format.

E.g.

<form >

Enter a time:

</form>

27. Why do we use number input control in HTML5 form?

Number control can be used for taking any numerical input like phone numbers etc.

E.g.

<form>

Quantity (greater than 1):

</form>

28. How will you take a range of numbers as input in HTML5 form?

We can use number input type to take a range of numerical numbers as input in HTML5 form. For a range we have to specify the min and max values of range.

E.g.

<form>

Quantity (between 1 and 10):

</form>

29. Why do we use URL input type in HTML5 form?

We use url input type to accept valid website addresses and url from users. It accepts only valid URLs or Webpage links.

E.g.

<form>

Website link:

</form>

30. Why do we use output tag in HTML5?

We use output tag in HTML5 to show the output from a script or from a form element in HTML5. We can show the output from a slider by using output tag.

E.g. Following example shows a slider with range from 0 to 10. When you move slider, the output tag will show the number at which slider is pointing.

<form oninput=”x.value=parseInt(a.value)”>0

<input type=”range” id=”a” max=”10″ value=”5″>10

=<output name=”x” for=”a”></output>

</form>

31. Why do we use autofocus attribute in HTML5?

When a user loads a webpage with multiple form fields, we can show focus on one specific field. In this way user can start typing or entering input in this field. We use autofocus attribute to focus on a specific field in form.

E.g. In this example, firstname input field is shown as selected. User can start typing in firstname field with this setting.

<form>

First Name <input type=”text” name=”firstname” autofocus><br>

Last Name <input type=”text” name=”lastname”><br>

</form>

32. How can you show a hint in an input type to user in HTML5?

We can use placeholder attribute with input type text to show a hint to user. In this was user can know what to enter in that field. It very common in search boxes. We can not use carriage return in placeholder text. So it is generally single line of text as a hint.

E.g. In following example user is given a hint to enter First Name in input firstname.

<form>

</form>

33. In HTML5, can we use Scalable Vector Graphics (SVG) without using any plugin?

Yes. In HTML5 we have support for SVG by using svg tag. We do not need any special plugin for SVG.

E.g. In following example we are drawing a green circle with black outline.

</svg>

34. What is session storage in HTML5?

HTML5 supports session storage. This can be used by sessionStorage attribute. Websites can add session data to sessionStorage. Once session level data is added, it can be used on different pages within same session. This saves network bandwidth by reducing the amount of data transfer.

Once the window or tab is closed, it closes the session. With the closing of session, any data stored in session storage is also lost.

35. What do you mean by local storage in HTML5?

HTML5 supports local storage in a webpage. This can be used by defining localStorage attribute.

Any local data of a web page can be stored in localStorage. We can access this data whenever we use this page. There is no time limit for keeping data in localStorage.

36. When does the data stored in session storage get deleted?

As soon as the session is terminated, the session storage data is deleted by browsers that were storing this session data.

When does the data stored in local storage get deleted?

As of now there is no time limit on data stored in local storage. Whenever we want to delete any data stored in local storage, we can call the method localStorage.remove(‘key’). Key is the data that we want to delete from the local storage.

In case we want to delete all the data stated in local storage we can call localStorage.clear() method.

37. What are Server Side Events in HTML5?

HTML5 has introduced events that flow from web server to web browser. Since these events start from web server, these are called server side events (SSE). With SSE we can push DOM based events from web server to web browser of a user. This can work as a stream of events as well.

In this approach, server opens a persistent connection between server and browser. By using this connection server can send data to browser whenever any new information is available.

This approach can be used in place of continuous polling by browser for getting any new information from web server.

As of now this is a standard approach to solve the problem of sending new data from server to client without any polling mechanism.

38. How can we use a Server Side Event in HTML5?

We can use <eventsource> element in HTML5 to use a Server Side or Server Sent Event.

In <eventsource> element, we use src attribute to specify the URL that is going to provide a persistent connection between Server and Browser for sending a stream of events from Server to Browser.

This src URL can point to a PHP, JSP, PERL or Python script that can take care of sending event data via a stream.

39. What are the steps in creating Server Side Events in a script?

We can use following steps to create a Server Side Event in a script:

Content-type: First we specify the type text/event-stream in Content-type header of server side script.

print “Content-Type: text/event-stream”;

Event: We can use Event tag in a script to send the event’s name.

E.g. print “Event: server-type”; In this example we are sending an event named server-type in Server Side Script.

We do this after setting the Content-type.

Data: Once content-type is a set and event name is defined, we can send event data by using Data tag in script. Data tag is followed by the value that we want to send.

E.g.

$servertype = ‘Apache’;

print “Data: $servertype”;

40. What is Web Socket in HTML5?

Web Socket is a communication option in Web applications. It provided bi-directional transfer of data between web applications. Generally web applications operate over a single socket. Web Socket works on top of this socket to facilitate communication.

A Web Socket is exposed by using a JavaScript interface in an HTML5 compliant browser.

With a Web Socket connection between Web server and Web browser, we can send from browser to server by calling send() method. We can receive data from server to browser by calling on message event handler.

E.g. In following example we are creating a new WebSocket object.

var Sock = new WebSocket(“www.google.com”, “HTTP” );

The first argument in this call is URL. This is the URL to which we want to connect.

The second attribute in this call is protocol. It specified a protocol supported by server to make the connection possible. This is an optional attribute.

41. What is the use of Socket.readyState attribute in WebSocket?

In WebSocket, readyState attribute shows the current state of the connection between server and client. It can have one of the following values:

0: The value of 0 means the connection has not yet established.
1: The value of 1 means the connection is established and communication can start on it.
2: The value of 2 means the connection is going through the closing handshake process.
3: The value of 3 means the connection is closed and it can not be opened.

42. Why do we use Socket.bufferedAmount atribute of WebSocket?

We use bufferedAmount attribute to specify the number of UTF-8 text bytes that are buffered/queued by using send() method. It is a read-only attribute.

43. Why do we use ‘canvas’ tag in HTML5?

In HTML5 there is an element <canvas> to draw graphics by using JavaScript.

A canvas is a rectangular area created on an HTML page. In default option, a canvas does not have any border or content.

We can assign an id as wells width and height to a canvas on creation. JavaScript code can refer the canvas by id and add more graphics like a line, circle etc to a canvas.

E.g. In this example we are creating a canvas of height and width 100 pixels with id testCanvas.

44. What is the functionality of <audio> element in HTML5?

HTML5 provides support for embedding sound/audio content in a web page. We can use <audio> tag for this purpose.

Generally we use mp3 and wav format audio content with <audio> tag in HTML5.

Within an <audio> tag we can use <source> tag to specify the media source and media type.

We can specify multiple <source> tags within same <audio> tag.

The controls attribute in <audio> tag adds video controls, like play, pause, and volume.

The text between the <audio> and </audio> tags is displayed in browsers that do not support the <audio> tag.

E.g. In following example we are specifying an audio tag with two sources for media.

</audio>

45. What is the use of <video> tag in HTML5?

In HTML5 we can use <video> tag to embed a video multi-media file in a web page.

Within an <video> tag we can use <source> tag to specify the media source and media type.

We can specify multiple <source> tags within same <video> tag.

The controls attribute in <video> tag adds video controls, like play, pause, and volume.

The text between the <video> and </video> tags is displayed in browsers that do not support the <video> tag.

E.g. In following example we are creating a video tag with two sources.

</video>

46. What is Geolocation API in HTML?

In HTML5, we can use Geolocation API to get the geographical location of a user. We can use JavaScript to capture the longitude and latitude of the user and send it back to web server by using Geolocation API.

By using this API we can implement location specific pages. E.g. We can show deals or shopping options local to a user based on the geolocation of user.

Currently, most of the browsers and mobile devices support Geolocation API. This helps in creating rich interfaces for user with the local information specific to a user’s geolocation.

47. What are the important methods in Geolocation API of HTML5?

Some of the important methods of Geolocation API in HTML5 are as follows:

getCurrentPosition(): This method returns the current geographic location of a user. The location is mentioned in terms of latitude and longitude of the position.
watchPosition(): This method returns the current position of a user. It continues to return the updated position of the user as and when the user moves (similar to GPS in a car).
clearWatch(): This method cancels the watch that we have set on user’s location by watchPosition() method.

48. What is a Web Worker?

A Web Worker is a JavaScript process that runs in background on a web page. It does not impact the performance of the Web Page.

In general, if we use JavaScript during the rendering of a page, the page may become unresponsive due to time taken by the script to execute. Where as, in a Web Worker the script runs in background. Therefore this does not impact the performance of the page.

User can continue to perform normal operations like clicking, selecting etc while a Web Worker is working in background.

Generally we use Web Worker to perform a computation intensive task on a Web Page.

49. What are the different kinds of plugins supported by HTML5?

In HTML5, we can add an <object> element to add a plugin. Some of the plugins that can be embedded in a page by using this tag are:

Java Applets
PDF Readers
Flash Players

E.g. In this example we are including a Flash content in a web page in HTML5.

We can even include another HTML content by using <object> tag.

E.g.

50. How will you add Google maps in an HTML5 page?

We can use <div id=”map”> tag to add Google maps in HTML5 web page. To show a map we have to also include Javascript for this.

Once we have <div id=”map”> we can specify map options like center on a location, zoom setting, map type etc. to display a map in our web page.