Most Frequently Asked HTML5 Interview Questions with Answers and Code Examples:
HTML5 is the latest version of the HTML language, HTML stands for Hyper Text Markup Language, it’s a universal World Wide Web Markup language which allows to create and design web pages to be viewed on the internet.
HTML5 which was officially published in 2012 supports all existing web pages.
This article will cover the basic as well as advanced interview questions on HTML5 with perfect examples for beginners and experienced level professionals as well.
Features of HTML5
There are several notable features of HTML5 and few among them are briefed below for your reference.
The new features of HTML5 include:
- Support media element like video and audio.
- Local storage
- Supporting some new elements and custom attributes.
- New form elements like url, date, range, time, color etc.
Most Important HTML5 Interview Questions and Answers
Enlisted below are some of the most commonly asked HTML5 Questions with coding examples for your easy understanding.
Get Ready!!
Q #1) What is HTML5?
Answer: HTML5 is the latest version of the HyperText Markup Language that can be referred to the WWW (World Wide Web) primary language, this markup language enhances a text file with bits of code, and this code which we can say as “markup” describes the structure of the document.
HTML5 provides some standard features like that of CSS, HTML, JavaScript, and DOM, which in turn will reduce the requirement of external plugins. It’s more markup to replace scripting, better error handling, etc. HTML5 is device independent.
HTML5 introduces some new features that can be used to change the way of user interaction with documents including:
- Adding new parsing rules to enhance flexibility.
- Adding New attributes.
- Allow offline editing.
- Support (Web SQL), – A common standard for storing data in SQL databases.
- Support Protocol and MIME handler registration.
Q #2) What is the difference between HTML and HTML5?
Answer: Difference between HTML and HTML5 are given below:
| HTML5 | HTML |
|---|---|
| HTML5 has high-level video and audio support. | High-level video and audio support is not a part of the version and specifications in the previous HTML. |
| Canvas, SVG and other virtual vector graphics are supported in HTML5. | In HTML, if we want to implement vector graphics, that was only possible by using third party library like VML, Silver-light, etc. |
| SVG and MathML can be used in text. | This is not possible in HTML. |
| Web SQL database, application cache and web storage is used as permanent storage. | Browser cache can be used as temporary storage. |
| HTML5 is more mobile friendly. | HTML is less mobile friendly. |
| Doctype declaration is simple and easy. | Doctype declaration is long and complicated.. |
| Allows drag and drop effect. | Does not allow drag and drop effect. |
| Attributes of Async, charset, and ping are available. | These attributes are not available in HTML. |
| HTML5 support javascript to run in the background. | Does not support javascript to run within the web browser. |
| We can draw shapes like rectangle, circle, and triangle in HTML5. | It is not possible to draw shapes like rectangle, circle, triangle etc. |
Q #3) What is <!DOCTYPE>? What are the different types of <!DOCTYPE> that are available?
Answer: The <!DOCTYPE> declaration provides instruction to the web browser to understand what information it should be display, and the need to start with <!DOCTYPE> declaration. In HTML5, DOCTYPE declaration is very short, and case-insensitive, and <!DOCTYPE html> is written at the top of every HTML5 page.
The following DOCTYPE are also supported in HTML5:
- <!DocTYpe html>
- <!dOCtype html>
- <!doctype html>
There are 3 types of DOCTYPES as mentioned below:
- Strict Doctype
- Frameset Doctype
- Transitional Doctype
Q #4) What are the New tags in Media Elements in HTML5?
Answer: The new tags in Media Elements in HTML5 are enlisted below:
- <audio>: Apply for multimedia contents like sounds, audio streams or music, embed audio content without the requirement of any additional plug-in like flash player.
- <video>: Apply for video content like video streams or movie clip, embed video content etc.
- <source>: Apply for multiple media resources in media elements, such as audio, video, picture etc.
- <embed>: Apply for an external application or embedded content (a plug-in).
- <track>: Apply for text tracks in the media elements such as video or audio. This tag is used for subtitles or caption files while the video media is playing.
Q #5) What is a tag in HTML5?
Answer: A tag is a special content in HTML5, which is surrounded by an angle bracket (<,>). A slash (/) symbol is used to close the tag after completing the block.
For Example
<title> This is my Browser </title>
An Html5 tag is a set of characters that develop a formatted command for a web page. These formatted commands communicate and send the instruction to the Browser.
Q #6) What is the minimum number of HTML5 tags that are required to create a Web page?
Answer: Minimum 3 HTML5 tags are required to create a Web page, such as (<HEAD>, <BODY>, <HTML>).
Q #7) What is the importance of Drag and Drop in HTML5?
Answer: Drag and Drop is the most important User Interface concept which makes it easy to grab an object and Drag it at the place you want with the help of a mouse click.
Some common features that are mostly used by Drag and Drop operation include move, link or copy.
We can drag an image using elements, type = <img draggable = “true”>, to make an image draggable and set the draggable image attribute to true.
Q #8) Explain new Form input types in HTML5.
Answer: HTML5 has 14 new forms input types:
- Date: This is a Date picker, we can pick a date by using type = “date”.
- Week: This is a Week picker, we can pick a week by using type = “week”.
- Month: This is a Month picker, we can pick a month by using type = “month”.
- Time: This is a Time picker, we can pick the time by using type = “time”.
- Datetime: This is a combined date and time, we can pick the combination of date and time by using type = “datetime”.
- Datetime-local: A combined local date and time, we can pick the combination of local date and time using type = “DateTime-local”.
- Email: Allows one or more Email Addresses, we can enter multiple email addresses using type = “email”.
- Tel: Allows different phone numbers around the world. A phone number is validated by the client-side. We can enter a phone number using type = “tel”.
- Search: Allows to search queries by input text. We can enter multiple queries using type = “search”.
- Number: Allows inserting a numerical value with additional attributes such as min, max. etc., and we can enter multiple numerical values using type = “number”.
- Url: A url input type, that is used for the web address. In a single url, we can use multiple attributes using type = “url”.
- Color: Allows to select multiple colors, we can pic multiple color using type = “color”.
- Range: Allows to insert a numerical value within a specific range, Range is similar to the number but it is much specific. We can enter a numerical value within a range using type = “range”.
- Placeholder: Allows to display a short hint (usually in a light color) in the input fields, before we enter the value. We can write a short hint in the input field by using type = “placeholder”.
Q #9) What is image map in html5?
Answer: Image maps are a combination of URL and images, where clicking on these images (clickable area of the image) will open different new web pages.
Two types of image maps are available in HTML5, i.e. client side and server side:
The client-side image map is created by using two elements <area> and <map>, where the map holds the map information and the area element takes the attributes to define each section of the map. Server-side image map created by using <usemap> attribute, the usemap attribute is the name of our map.
Q #10) How do you write a copyright symbol on a web browser page?
Answer: In order to write a copyright symbol, we need to type © or © in an HTML5 file.
Q #11) How to optimize website assets?
Answer: We need to understand some basic optimization rules, in order to optimize website assets. Initially, we should decrease the download size and make fewer http requests.
To optimize website assets we can follow the below techniques:
- File compression
- File concatenation
- CDN Hosting
- Offloading assets
- Re-organizing
- Refining code
Q #12) What is the use of MathML Element in HTML5?
Answer: The word MathML (Mathematical Markup Language) is a markup language, that is used to show scientific and mathematical expression on the web. MathML is a form of XML (extensible markup language) to describe the Math notation.
We can use <math>…</math> tags inside the HTML5 documents for implementing MathML element.
Example: print a²+2b+5=0 using HTML5 code.
1 | <!doctype html> |
2 | <html> |
3 | <head> |
4 | <meta charset = “UTF-8”> |
5 | <title> MathMl Example </title> |
6 | </head> |
7 | <body> |
8 |
9 | <math xmlns=<a href="http://www.w3.org/1998/Math/MathML">http://www.w3.org/1998/Math/MathML</a>”> |
10 | <mrow> |
11 | <mrow> |
12 | <msup> |
13 | <mi> a </mi> |
14 | <mn> 2 </mn> |
15 | </msup> |
16 | <mo> + </mo> |
17 | <mrow> |
18 | <mn> 2 </mn> |
19 | <mo> </mo> |
20 | <mi> b </mi> |
21 | </mrow> |
22 | <mo> + </mo> |
23 | <mn> 5 </mn> |
24 | </mrow> |
25 | <mo> = </mo> |
26 | <mn> 0 </mn> |
27 | </mrow> |
28 | </math> |
29 |
30 | </body> |
31 | </html> |
Note: If MathML is used by an application that conforms to the Namespace in an XML Recommendation, then the following namespace should be used:
http://www.w3.org/1998/Math/MathML
Q #13) What are the various formatting tags in HTML5?
Answer: HTML5 has some old and new formatting tags as given below:
- Marked text: Represents highlighted text for Reference purposes. We can use <marks> tags for text highlight.
- Deleted text: Specifies the deleted block of text. We can use <del> tags to implement a deleted text.
- Emphasized text: Defines the emphasized text. We can use <em> tags to implement an emphasized text.
- Inserted text: Inserts a block of text into a document. We can use <ins> tags to implement an inserted text.
- Small text: Display inserted text in a small size. We can use <small> tags to implement a small text.
- Superscript text: This is a superscripted text. We can use <sup> tags to implement a superscript text.
- Subscript text: This is a subscripted text. We can use <sub> tags to implement a superscript text.
Q #14) Why do we use HTML5?
Answer: HTML5 supports animation, drawing, audio, video, etc and it easily embeds a video on the web page. It does not require any additional software like Flash for watching videos.
Some of the important reasons to use HTML5 are given below:
- Legacy and cross-browser support
- Better interactions
- Smarter storage
- Cleaner code
Q #15) What is a hyperlink? Does it only apply to text?
Answer: The hyperlink is a link that allows a user to move from one web page to another web page when clicked. Hyperlink concept is used on text and as well as image, and we can convert an image into a link with the help of <a href = “ ”….</a>> tags.
Example to Create a hyperlink in an image (clickable image) is shown below..
1 | <!DOCTYPE html> |
2 | <html> |
3 | <head> |
4 | <title> Image Hyperlink Example </title> |
5 | </head> |
6 | <body> |
7 |
8 |
9 | Click the following link |
10 |
11 | <a href = “https://en.wikipedia.org/wiki/HTML5” target = “_self”> |
12 | <img src = “image.png” alt = “Wiki” border = “0/”> |
13 | </a> |
14 | </body> |
15 | </html> |
Q #16) Explain the concept of web storage in HTML5.
Answer: Web storage provides the facility to store the data of our web applications locally into the user’s browser. It can store up to 10 MB data. Web storage helps to increase the performance of our applications.
There are two types of web storage that are used to store data locally in HTML5:
- Local storage: This stores the data that will not expire or clear automatically when a user closes or reopens a browser.
- Session Storage: This stores data for one session only(i.e, a user who is surfing the internet or website). Once the browser is closed, session data will automatically delete from the web browser.
Q #17) Explain Geolocation API in HTML5.
Answer: Geolocation API is used to locate a user’s geographical position.
For privacy reasons, the user is asked for permission to report the location information. Use the navigator.geolocation.get current position() method to get the user’s position and geographical coordinates (longitude and latitude number).
Example to Return the latitude and longitude position of a user is shown below.
1 | <!DOCTYPE html> |
2 | <html> |
3 | <body> |
4 | <p>Click The My Location Button to get your Location.</p> |
5 | <button onclick="getLocation()"> My Location </button> |
6 | <p id="location"></p> |
7 | <script> |
8 | var x = document.getElementById("location"); |
9 | function getLocation() { |
10 | if (navigator.geolocation) { |
11 | navigator.geolocation.getCurrentPosition(showPosition); |
12 | } else { |
13 | x.innerHTML = "Geolocation is not supported by this browser."; |
14 | } |
15 | } |
16 | function showPosition(position) { |
17 | x.innerHTML = "Latitude: " + position.coords.latitude + |
18 | "<br>Longitude: " + position.coords.longitude; |
19 | } |
20 | </script> |
21 | </body> |
22 | </html> |
Example Explained:
- Check, if Geolocation is supported or not.
- If Geolocation is supported, run the getCurrentPosition() method. If Geolocation is not supported, display the error message to the user.
- If getCurrentPosition() method is successful, it returns coordinates and functions specified in the parameter.
- The showPosition() function, gets the output – Longitude and Latitude.
Q #18) Explain HTML5 Graphics.
Answer: HTML5 supports two types of graphics i.e. Canvas and SVG.
#1) Canvas: <canvas> element is used to design graphics on the web page, and it has several methods available for drawing circles, boxes, adding images and text. 300 px X 150 px (width X height) is the default pixel size of canvas.
Example to Draw square Box using canvas element is shown below.
1 | <!DOCTYPE HTML> |
2 | <html> |
3 | <head> |
4 | <style> |
5 | #mycanvas{border:2px solid pink;} |
6 | </style> |
7 | </head> |
8 | <body> |
9 | <canvas id = “mycanvas” width = “150” height = “150”></canvas> |
10 | </body> |
11 | </html> |
#2) SVG: <svg> Scalable Vector Graphics, are mostly used for graphical application and scalable vector type diagrams, such as X, Y coordinate system, two-dimensional and pie charts. This makes it faster and lightweight. SVG follows XML format.
Example to draw a Rectangle using SVG element is shown below.
1 | <!DOCTYPE html> |
2 | <html> |
3 | <body> |
4 | <svg width = “400” height = “150”> |
5 | <rect width = “400” height = “150” style = “fill:rgb(200,220,255);stroke-width:10;stroke:rgb(0,0,0)”/> |
6 | </svg> |
7 | </body> |
8 | </html> |
Q #19) What are the advantages of using HTML5?
Answer: HTML5 is the advanced version of HTML. HTML5 enables to create easier or interactive websites by embedding video, audio, and graphics on the web page.
HTML5 support multimedia technology and graphical content to the web without using any third party plugins.
Some of the most important features added by HTML5 include:
- Geolocation
- Offline Application Cache
- Client-side database
- Error Handling
- New Structure and new multimedia elements.
- Browser Support and compatibility.
Supports Some New Application Programming Interface (API) like:
- Browser History Management
- Drag and Drop
- 2D drawing on a web page
- Time media playback
Supported Applications include:
- Web Workers – JavaScript
- Local File Access
- Application Cache
- Local data storage
- Local SQL databases
Q #20) How to create a link that will connect to another web browser page when clicked in HTML5?
Answer: Use the <href> tag to create hyperlinks, and these are used to connect to another web page. We can create hyperlink by using type = <a href = “ url of website”> text</a> tag. When we click the text then, the linked url of the web page will open.
For Example, the code below is a link that leads to the Yahoo home page, located at the address https://in.yahoo.com
1 | <!DOCTYPE html> |
2 | <html> |
3 | <body> |
4 |
5 | <h2> Yahoo link </h2> |
6 |
7 | <a href = “https://in.yahoo.com”> Visit Yahoo Home Page </a> |
8 |
9 | </body> |
10 | </html> |
Q #21) How many web browsers does HTML5 support?
Answer: Most of the latest version of Apple Safari, Google Chrome, Opera, Internet Explorer, and Mozilla Firefox are supported by HTML5.
Q #22) What are the frequently useful Api in HTML5?
Answer:
A list of the most frequently useful API's in HTML5 include:
- Media API
- Data Transfer API
- Application Cache API
- User Interaction
- History API
- Constraint Validation API
- Command API
- Text Track API
Q #23) How many tags were removed in HTML5?
Answer:
The list of the tags that are removed completely in HTML5 include:
- <frame>
- <frameset>
- <noframes>
- <big>
- <basefront>
- <applet>
- <center>
- <bigcenter>
- <acronym>
- <basefont>
- <dir>
- <tt>
- <font>
- <strike>
Q #24) Which video and audio formats are used for embedding on web page?
Answer: Formats of video and audio that are used for embedding on the web page are given below:
- Video: MPEG4, Ogg, WebM.
- Audio: WAV, Ogg Vorbis, MP3.
Q #25) List out the page structure elements of HTML5.
Answer: Page structure elements of HTML5 are given below:
- <header>: Represents the header section and stores the starting information about the web page.
- <footer>: Represents the footer section (last portion) of the page.
- <nav>: Represents the navigation elements of the HTML page.
- <article>: It is a set of information.
- <section>: It is a set of instruction that is used inside the article block to define the basic structure of a page.
- <aside>: Sidebar content of the page.
Q #26) Explain some of the common lists to design a web page.
Answer: The common lists to design a web page include:
- Directory list
- Definition list
- Ordered list
- Menu list
- Unordered list
Different– Different tags are used to compose each list.
Q #27) What is the use of output tag in HTML5?
Answer: <output> tag is used to represent the different types of output and result.
Q #28) Which element provides the autocomplete feature in a textbox?
Answer: In HTML5 <Datalist> element, provides the autocomplete feature in a textbox.
Q #29) How to Embed Video and Audio in Html5?
Answer:
Video:
Example to Embed a video in HTML5 is shown below.
1 | <!DOCTYPE html> |
2 | <html> |
3 | <body> |
4 | <video width = “300” height = “250” controls> |
5 | <source src = “MyMovie.mp4” type = “video/mp4”> |
6 | </video> |
7 | </body> |
8 | </html> |
Audio:
Example to Embed an Audio in HTML5 is shown below.
1 | <!DOCTYPE html> |
2 | <html> |
3 | <body> |
4 | <audio controls> |
5 | <source src = “song.mp3” type = “audio/mpeg”> |
6 | </audio> |
7 | </body> |
8 | </html> |
Q #30) What are the migrated tags from HTML4 to HTML5?
Answer:
List of the migrated tags from HTML4 to HTML5 are given below:
Typical HTML4 Typical HTML5
<div id = “footer”> <footer>
<div id = “header”> <header>
<div id = “menu”> <nav>
<div id = “post”> <article>
<div id = “content”> <section>
<div id = “header”> <header>
<div id = “menu”> <nav>
<div id = “post”> <article>
<div id = “content”> <section>
Q #31) What are the part of HTML5 Technologies?
Answer: List of the part of HTML5 Technologies are given below:
- Web Workers
- Web Storage
- SVG
- CSS3
- Server-Sent Events(SSE)
- Microdata
- Web Intents
- Web Sockets
- Offline Application
- Geolocation
- File API
- Web Messaging
- Drag and Drop
- Canvas 2D
Q #32) What is the difference between SVG and Canvas elements?
Answer:
| SVG | Canvas elements |
|---|---|
| It is Object Model-based. | It is pixel based. |
| Is suitable for using large rendering areas. | Is suitable for using small rendering areas. |
| SVG provides any support for event handlers . | Canvas does not provide any recourse for event handlers. |
| Modification is allowed through script and CSS. | Modification is allowed through script only. |
| SVG has Better scalability | Canvas has poor scalability. |
| SVG is Vector based (composed of shapes). | Canvas is Raster based (composed of a pixel). |
| SVG is not suitable for Games graphics. | Canvas is suitable for games graphics. |
| SVG does not depend on resolution. | Canvas is completely dependent on resolution. |
| SVG is capable for API animation. | Canvas has no any API for animation. |
| SVG is suitable for printing with high quality and any resolution. | Canvas is not suitable for printing high quality and high resolution. |
Q #33) What is the use of <figure> tag in HTML5?
Answer: The figure tag is used to add an image in the document on a web page.
Q #34) What is Microdata in HTML5?
Answer: Microdata is a new simple semantic syntax, that is used to add the nested groups of name and value pair of data to documents, that are commonly based on the page content. Microdata is used for new global attributes.
Q #35) Explain Meta tags.
Answer: Meta tags are used to provide useful information to our web pages.
Some of the tags include:
- Title: Provides a title to the web page.
- Style: Inserts some styles and CSS details to the web page.
- Link: Defines the relationship between one page to another page and an external source.
Some Useful Abbreviations
- XML: Extensible Markup Language
- W3C: World Wide Web Consortium
- SQL: Structured Query Language
- JPEG: Joint Photographic Expert Group
- IP: Internet Protocol
- HTTP: Hypertext Transfer Protocol
- href: Hypertext Reference
- FTP: File Transfer Protocol
- API: Application Programming Interface
- IDE: Integrated Development Environment
- WEFT: Web Embedding Fonts Tool
- DOM: Document Object Model
- Url: Uniform Resource Locator
Conclusion
HTML5 can be considered as the foundation of the web technologies, this is the primary technology that is used to create web pages.
A lot of professionals who are intending to build a career in web technology must learn HTML5. HTML5 is not only the substructure of web technologies, but it is also used to develop mobile applications. Terminologically, HTML5 is not a programing language, rather it’s a markup language.
This article will be a guide to the list of the top most HTML5 interview question and answers as it covers both basic as well as advanced HTML5 interview questions and answers. We are sure that these are in turn the great resources to help you to prepare for HTMl5 interview.
Hope this article will help you to crack any HTML5 interview successfully.
0 Comments
Thanks for comment.