There is a big role of cracking interviews in web design for every fresher. Successful selection in the interviews helps in starting a career. Thus, we have come up with the top 10 HTML5 common interview questions along with their answers. These questions are useful for all who are going for the profile of HTML developer. Let’s take a look.
Top 10 HTML5 Common Interview Questions & Answers
Q.1: Explain the Key Goals and Uses of HTML5.
Ans: HTML5 is the newest version of HTML. The major goals of HTML5 are making HTML code easier to read and staying updated with the latest multimedia formats. It also aims to define the processes for dealing with syntax errors, so that invalid code will be handled the same by all web browsers. One of the key goals of HTML5 is to support multimedia on mobile devices.
Q.2: Explain the key features of HTML5.
Ans: HTML5 offers so many new and advanced features to web designers and UI developers.
Canvas: This is the new feature of HTML5. Now one can achieve great graphics and visual images on the fly using <Canvas> element and JavaScript.
Video: Now we can put video on our web pages using HTML5. Advanced video galleries and video players can be designed using JavaScript and HTML5.
Local Storage: This is very similar to JavaScript Cookies, but this is designed to accommodate a large amount of information. Also unlike cookies it is not sent to the server every time the request is made. It remains on the local computer and can be loaded using JavaScript once the page is loaded.
Web Worker: This feature allows the browser to run JavaScript in the background so it can be used to boost the performance of HTML applications.
Offline Mode: This great feature allows users to create a website that can work even in offline mode.
Geo Location: With this we can trace the location of the user so that website owners can provide geography-based information to their users. It is the best feature to improve the user experience by offering user-expected information.
Input Types: HTML5 comes with more input types such as search, email, range, color, telephone(tel), and URL to name some. These new additions to the input type are going to make the life of developers a lot simpler.
Placeholder Text: It creates a watermark text for our input text box and ends up writing JavaScript code to handle it. This comes inbuilt with an HTML5 placeholder text attribute of input type.
Q.3: Explain the difference between the application model of HTML5 and HTML.
Ans: HTML 1.0 – 4.0 (and XHTML) were all specifications for laying out text and images on a page.
HTML5 strives to be something very different. It aims to be more of an application development platform, which includes not only laying out text and images, but also playing video and audio, interactive 2d and 3d graphics, storing data in the application, dealing with online and offline access to data, and real-time networking protocols for exchanging data as it happens.
Q.4: How do we indicate the character set being used by an HTML5 document? How does it differ from HTML standards?
Ans: In HTML5, the encoding can be indicated with the charset attribute of a <meta> tag inside the document’s <head> element:
<!DOCTYPE html> <html> <head> ... <meta charset="UTF-8"> ... </head> ... </html>
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> ... <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ... </head> ... </html>
Q.5: Please describe the following HTML5 elements:
- <header>
- <article>
- <section>
- <footer>
Ans:
<header>
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
- one or more heading elements (<h1> – <h6>)
- logo or icon
- authorship information
We can also have several <header> elements in one document
For Example:
<header class="top_header center"> <nav class="menu left"> <ul> <li><a class="selected" href="Index.html">Home</a></li> <li><a href="Wishlist.html">Wish List</a></li> <li><a href="Myaccount.html">My Account</a></li> <li><a href="Shoppingcart.html">Shopping Cart</a></li> <li><a href="Checkout.html">Check Out</a></li> <li><a href="Createanaccount.html">Create An Account</a></li> <li><a href="Login.html">Login</a></li> </ul> </nav> </header>
This example shows how to use a header tag in a web page.
<article>
The <article> tag specifies independent and self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the <article> element:
- Forum post
- Blog post
- News story
- Comment
For example:
<article class=”blog”> <h2>David</h2> <p>Hello! Good morning</p> </article>
This example shows how to use an article tag in a web page.
<section>
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
For example:
<section class="cart1 left"> <a href="#"><i class="fa fa-shopping-cart"></i></a> <a href="#"><p>ADD TO CART</p></a> </section>
Example of section tag. How to use a section for a web page.
<footer>
The <footer> tag defines a footer for a document or section.
A <footer> element should contain information about its containing element.
A <footer> element typically contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
We can also have several <footer> elements in one document.
For example:
In the above example of a footer on a web page. It shows all the possible content we can put into a footer.
Q.6: Can we insert multiple <header > in a web page?
Ans: Yes, we can insert multiple <header> in a web page.
For example:
<header class="header center"> <header class="top_header center"> <nav class="menu left"> <ul> <li><a class="selected" href="Index.html">Home</a></li> <li><a href="Wishlist.html">Wish List</a></li> <li><a href="Myaccount.html">My Account</a></li> <li><a href="Shoppingcart.html">Shopping Cart</a></li> <li><a href="Checkout.html">Check Out</a></li> <li><a href="Createanaccount.html">Create An Account</a></li> <li><a href="Login.html">Login</a></li> </ul> </nav> </header> <header class="bottom_header center"> <div class="logo left"> <img src="images/logo.jpg" alt="logo samples"> </div> <aside class="call_us right"> <ul> <li> <img src="images/phone.jpg" alt="samples"width="23px"height="35px"/> </li> <li> <p> <span style="color:#23d9c3; font-size:14px">Call us now toll free:</span><br/>1-800-234-5677 </p> </li> <li> <a href="#"> <img src="images/cart.jpg" alt="samples"width="98px"height="80px"/> </a> </li> </ul> </aside> </header> </header>
In this example, I am using multiple header tags in a single web page.
Q.7: What is the relationship between <header > and <h1> tag in HTML5?
Ans: The <header> element represents a group of introductory or navigational aids and usually contains the section’s heading in which <h1> elements represent a section’s heading.
Syntax:
<header class=”header”> <h1>Hello</h1> </header>
Q.8: What do you understand by web storage?
Ans: It is a simple client-side database that allows the users to persist data in the form of key/value pairs.
It has a fairly simple API to retrieve/write data into the local storage. It can store up to 10 MB of data per domain. Unlike cookies, the data stored are not included with every HTTP request.
IE7 and older versions do not support Web Storage. All the other browsers like Chrome, Opera, Firefox, Safari, and IE8+ support Web Storage.
There are two types of web storage:
Local storage: Stores data with no expiration date. The data will be available even when the browser/ browsing tab is closed or reopened.
Session storage: Stores data for one session. Data persisted will be cleared as soon as the user closes the browser.
Q.9: Explain new media-related elements in HTML5.
Ans:
- <audio>: Defines sound or music content.
- <embed>: Defines containers for external applications(like plug-ins).
- <source>: Defines source for <video> and <audio>.
- <track>: Defines track for <video> and <audio>.
- <video>: Defines video or movie content.
Q.10: What are some new input attributes in HTML5?
Ans: Some new input attributes in HTML5 are:
- autocomplete
- autofocus
- form
- form->action
- form->enctype
- form->method
- form->novalidate
- form->target
- height and width
- list
- min and max
- multiple
- pattern
- placeholder
- required
- step
Summary
HTML5 is a revolution in the web design and UI development industry. Although it is in beta development it has got a vast popularity in the world. After the introduction of various advanced features in it some of the established languages have been thrown out of the market such as Adobe ActionScript and Flash.
CSS3 provides a better company to HTML5 so don’t ignore the importance of it. Learn CSS3 transitions, animations, and pseudo selectors to get the maximum out of HTML5.
Interested in learning web designing at an advanced level? Please explore our web designing training in Rohini, Delhi, and choose the course that suits your needs.
