UPDATE: Although this tutorial targets top 10 most important and frequently asked HTML5 interview questions, but I have prepared an additional series of MUST HAVE Interview Questions on HTML5 as:
Also, I have added Recent HTML5 Web/Mobile Developers Jobs at the end of this article that will definitely help you finding your dream job in Dubai, UAE.
- What’s new HTML 5 DocType and Charset?
- How can we embed Audio in HTML 5?
- How can we embed Video in HTML 5?
- What are the new media element in HTML 5 other than audio and video?
- What is the usage of canvas Element in HTML 5?
- What are the different types of storage in HTML 5?
- What are the new Form Elements introduced in HTML 5?
- What are the deprecated Elements in HTML5 from HTML4?
- What are the new APIs provided by HTML 5 standard?
- What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?
More Interview Questions on HTML5 ….
- Briefly explain cache manifest file with an example?
- Is it possible to get the geographical location of a user using HTML5?
- What are HTML5 Semantic Elements? Explain with Example.
- How to use HTML5 details and summary elements?
- Article Vs Section tags in HTML5?
- What is an HTML5 Web Worker?
- What are the limitations of HTML5 Web Worker?
- Canvas Vs SVG?
1.What’s new HTML 5 DocType and Charset?
Normally for HTML files first line of code is DocType which basically tells browser about specific version of HTML. HTML5 is now not subset of SGML. As compared to previous version/standards of HTML, DocType is simplified as follows:
And HTML 5 uses UTF-8 encoding as follows:
You can see a very simple HTML5 page below:
2.How can we embed Audio in HTML5?
HTML 5 comes with a standard way of embedding audio files as previously we don’t have any such support on a web page. Supported audio formats are as follows:
Below is the most simple way to embed an audio file on a web page.
<source src=”jamshed.mp3″ type=”audio/mpeg”>
Your browser does’nt support audio embedding feature.
In above code, src value can be relative as well as absolute URL. We can also use multiple <source> elements pointing to different audio files. There are more new attributes for <audio> tag other than src as below:
- controls – it adds controls such as volume, play and pause.
- autoplay – it’s a boolean value which specifies that audio will start playing once it’s ready.
- loop – it’s also a boolean value which specifies looping (means it automatically start playing after it ends).
- preload – auto, metadata and none are the possible values for this attribute.
- auto means plays as it loaded.
- metadata displays audio file’s associated data
- none means not pre-loaded.
Same like audio, HTML 5 defined standard way of embedding video files which was not supported in previous versions/standards. Supported video formats are as follows:
Please look into below sample code.
<source src=”Racing.mp4″ type=”video/mp4″>
Your browser does’nt support video embedding feature.
Same like <audio>, <video> tag has associated optional attributes as controls, autoplay, preload, loop, poster, width, height and other global attributes etc. Controls, loop, preload and autoplay are already explained above. Others are explained below:
- poster – it’s basically a URL of the image that needs to display until video get started.
- width – video player width
- height – video player’s height
4.What are the new media element in HTML 5 other than audio and video?
HTML 5 has strong support for media. Other than audio and video tags, it comes with the following tags:
<embed> Tag: <embed> acts as a container for external application or some interactive content such as a plug-in. Special about <embed> is that it doesn’t have a closing tag as we can see below:
<source> Tag: <source> is helpful for multiple media sources for audio and video.
<source src=”jamshed.mp4″ type=”video/mp4″>
<source src=”jamshed.ogg” type=”video/ogg”>
<source src=”jamshed.mp4″ type=”video/mp4″>
<source src=”jamshed.ogg” type=”video/ogg”>
<track kind=”subtitles” label=”English” src=”jamshed_en.vtt” srclang=”en” default></track>
<track kind=”subtitles” label=”Arabic” src=”jamshed_ar.vtt” srclang=”ar”></track>
5.What is the usage of canvas Element in HTML 5?
This element behaves like a container for graphics and rest of things will be done by scripting. We can draw images, graphs and a bit of animations etc using <canvas> element.
<canvas id=”canvas1″ width=”300″ height=”100″>
As canvas is considered to be the most exciting feature in HTML5, following resources can be helpful to ehnance one’s skill in this area. I have listed few good websites on HTML5 canvas as well as available tools and libraries:
- Canvas From Scratch
Starting from scratch and follow the step by step approach to take to advance level.
- Introduction to Canvas in HTML5
- Understanding advanced Drawing Topics
- Tranformation, Shadows and Gradients in HTML5 Canvas
- and finally Pixel Manipulation in Canvas
- Mozilla Developer Network – MDN
MDN acts a complete reference guide for HTML5 with detailed examples and code snippets.
- HTML5 Canvas Tutorial
Canvas Tutorial is a good tutorial site for learning basics of HTML5 canvas topics including Lines, Curves, Paths, Shapes, Filling Styles, Images, Text Manipulation, Tranformation, Composites and Animation etc.
PlayCanvas is basically a WebGL Game Engine with a set of developer tools that can be used to develop 3D games for browser as well as mobiles.
For a more detailed reference to HTML5 Canvas resource, you can go to Emily Heming’s tutorial on this blog
“Top 20 Resources You Need To Master HTML5 Canvas“.
HTML 5 has the capability to store data locally. Previously it was done with the help of cookies.
Exciting thing about this storage is that its fast as well as secure.
There are two different objects which can be used to store data.
- localStorage object stores data for a longer period of time even if the browser is closed.
- sessionStorage object stores data for a specific session.
|It persists data until we close the window or tab in which it was stored.||It persist data even if the window or tab is closed (but can be explicitly removed or expires).|
|Values stored in sessionStorage are not shared. These will be visible only to respective window or tab.||Values stored in localStorage are shared for all windows and tabs from same origin.|
|Maximum size is 5MB.||Maximum size for localStorage is more between 10-15MB.|
Working with localStorage is quite simple and having following methods:
- localStorage.getItem(key) -> fetch an item from storage against provided key.
- localStorage.setItem(key, value) -> add an item to storage.
- localStorage.removeItem(key) -> removes an item from storage against provided key.
- localStorage.clear() -> clearing the storage removing all items from it.
7.What are the new Form Elements introduced in HTML 5?
There are a number of new form elements has been introduced in HTML 5 as follows:
- datalist provides functionality for auto-complete feature.
- datetime facilitate selecting a datetime along with Time Zone.
- output represents the result of a calculation.
- keygen generates a key-pair field in a form to implement secure authentication.
- date is an input field for date and applies validation accordingly.
- month for selecting a month and year in a form input field.
- week for selecting a week and year in an input field.
- time is an input field for selecting time i.e. Hours:Minutes: AM/PM. For example, 10:30 AM.
- color is an input field for color.
- number that only allows numeric values.
- range is an input field for selecting value within a specified range.
- email is input field for email with standard email validations.
- url is for an URL(Uniform Resource Locator) and validated accordingly.
8.What are the deprecated Elements in HTML5 from HTML4?
Elements that are deprecated from HTML 4 to HTML 5 are:
9.What are the new APIs provided by HTML 5 standard?
HTML 5 standard comes with a number of new APIs. Few of it are as follows:
- Media API
- Text Track API
- Application Cache API
- User Interaction
- Data Transfer API
- Command API
- Constraint Validation API
- History API
- and many more….
10.What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?
As compared with traditional browser caching, Its not compulsory for the user to visit website
contents to be cached.
Back to top
Briefly explain cache manifest file in HTML5 with an example?
Cache manifest file is simply a text file that dictates the browser, what to store for offline access? It basically list down the required resources for offline access.
So, the resources mentioned in above manifest file (decorate.css, work.js, and amazing.jpg) will be downloaded and cached locally for offline access.
Note: Remember to add manifest attribute for each page of our website we want to be cached.
Is it possible to get the geographical location of a user using HTML5?
Yes. It’s quiet possible to get the geographical location of a user using HTML5. As it has user’s privacy concerns so user’s approval needed. As we discussed above about new HTML5 API including Media API, Text Track API, Application Cache, User Interaction, Data Transfer API, Command API etc: HTML5 introduced new Geolocation API for locating a user’s position.
In order to get user position, getCurrentPosition() method is used as:
Above code simply provides an idea how we can retrieve geographical location of a user. But while providing professional implementation, we will get user approval and also handle errors accordingly.
What are HTML5 Semantic Elements? Explain with Example.
Semantic elements are those elements that clearly explains the purpose or meaning of the element to user
(developer). For example, <div> and <span> elements in HTML doesn’t explain what they will contain as contents. On the other hand, <img> and <form> elements clearly explains the contents it can contain.
HTML5 introduces many new semantic elements with few are demonstrated in below diagram:
<header>, <nav>, <aside>, <section>, <article> and <footer> elements clearly explains the meaning of each element.
There are more semantic elements as listed below:
How to use HTML5 details and summary elements?
HTML5 details and summary element can be used collectively to produce the below collapse/Expanse affect as follows:
Following is the source code of HTML5 details and summary element to produce above output.
Article Vs Section tags in HTML5?
An <article> tag is a complete and independent piece of content of a document or page. For Example, this article about HTML5 interview Question is a complete and independent piece of content on this page that covers a specific topic.
On the other hand, <section> tag refers to specific section of a document or page for grouping purpose. For Example, at the end of this page, we have a specific section for related list of “Top Interview Questions And Answers Series”. Or in right nav, we have a section for “Top Posts and Pages” of this website.
An <article> can wrap a <section> to represents a sub-topic as follows:
<h1>Interview Questions Series</h1>
<p>List of Web Development Interview Question with detailed answers for web developers.</p>
<h1>HTML5 Interview Questions</h1>
<p>List of Interview Questions on HTML5</p>
<h1>ASP.NET MVC Interview Questions</p>
<p>List of Interview Questions on ASP.NET MVC</p>
Back to top
What is an HTML5 Web Worker?
HTML5 web worker normally exists in external files and used for long-running CPU intensive tasks but without affecting the User Interface or other scripts.
Back to top
What are the limitations of HTML5 Web Worker?
- parent object
- window object
- document object
Canvas Vs SVG?
Following table clearly explains the difference between Canvas and SVG (Scalable Vector Graphics):
|Only ONE HTML Element for rendering graphics i.e. canvas element||Multiple Graphics Elements including (Circle, Rect, Boxes, Path, Line, Polygon etc.)|
|Primarily based on Pixels.||Based on Graphics elements as discussed above.|
|No manipulation using Event Handling due to pixel based interaction.||Can manipulate by attaching event handlers to SVG elements.|
|Better in Performance.||Slow in rendering when manipulating complex scenarios|
Need more HTML5 Interview Questions? please follow a MUST HAVE Interview Questions series for HTML5 here.
HTML5 Web/Mobile Developer Jobs in Dubai, United Arab Emirates [Updated Daily]
Senior Client Side AA Developer
Developer Portals Usability
Web Applications Developer Fujairah
Resident Solutions Engineer
Platform Configuration Engineer
Senior Frontend Developer
Senior Front End Developer
Opeings for Android Developers_6+ Yrs- Abu Dhabi_ Immediate Joiners
Mobile Apps - Phonegap
Web Applications Developer
Senior Developer - Front End - $80k (Work from Home)
Front End Developer- Australian Software Development Company
Java WCM Solution Architect/Developer (Middle East)
Senior UI Developer - Front-End Developer
Other Related Articles:
Top 10 Interview Questions and Answers Series:
- Top 10 WCF Interview Questions
- Comprehensive Series of WCF Interview Questions
- Top 10 HTML5 Interview Questions
- Top 10 ASP.NET Interview Questions
- Comprehensive Series of ASP.NET Interview Questions
- Top 10 ASP.NET MVC Interview Questions
- Top 10 ASP.NET Web API Interview Questions
- Top 10 ASP.NET AJAX Interview Questions