HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It employs tags to define the layout and content of a webpage, while HyperText allows for the creation of links between different web pages. HTML5, the latest version of HTML, offers significant improvements over earlier versions, combining enhanced markup capabilities with more interactive features. It has become the most popular and widely adopted version due to its advanced features, enabling developers to create more dynamic and efficient web applications.
HTML5 Interview questions are the most common questions to appear in an interview so we will look at a few commonly asked HTML5 Interview Questions in this blog.
15 Beginner HTML5 Interview Questions
1. What is HTML5?
HyperText Markup Language 5(HTML5) is used to design web pages. A markup language is used to determine the text document within the tag, describing the structure of web pages. In contrast, we use HyperText to create a link between web pages. HTML5 is a combination of Markup and HyperText Language.
2. What is meant by HTML Entities?
HTML5 entities are special codes used for representing characters that have special meanings or they cannot be easily typed or displayed directly in HTML due to the conflicts with HTML tags. These entities are written with ampersand followed by a code, and then a semicolon.
For example, the following entity code displays the ampersand symbol.
&
3. Do HTML tags and elements refer to the same entities?
Tags are used for defining elements in HTML, they are not the same entities. Tags are simple text used for denoting the starting and ending of an HTML element.
For example, the '<p>' tag, defines the start of an HTML paragraph element, anything before the closing ‘</p>’ tag will be considered as the content of the paragraph element.
<p>This is a paragraph</p>
4. What is meant by ‘class’ attribute in HTML?
The class attribute is used for assigning one or more class names to an HTML element. The value of the class attribute is a space-separated list of class names. Unlike ids, a class name can be assigned to more than 1 element. They are used for styling HTML elements with CSS and selecting DOM nodes with JavaScript.
5. What is multipart form data in HTML?
In HTML5, “multipart/form-data” is an encoding type used for forms when you want to upload files. When a form is submitted with the multipart/form-data encoding type, the form data is divided into multiple parts, allowing files to be uploaded to your backend services.
6. What are tags in HTML5?
Tags in HTML5 are used to define the structure and content of a web page. They are enclosed in angle brackets (< >) and come in pairs, with an opening tag and a closing tag. For example, the <p> tag is used to define a paragraph, and the <img> tag is used to define an image.
7. List some new tags in HTML5.
New list of tags are added in HTML5 to provide document a better structure. primary component of HTML. A tag mainly consists of three components,
<article>
<aside>
<mark>
<video>
<svg>
<rt>
8. What are void tags in HTML5?
This is one of the most commonly asked and the easiest HTML5 Interview Questions. The HTML tags that don’t require a closing or ending tag are known as void tags, for example, <br>, <hr>, <img>, etc.
9. What are the attributes in HTML5?
Attributes are additional conditions added to a tag to add more specific instructions to the content. HTML5 attributes are case insensitive and may be written in all uppercase or mixed case. For example, <div class = "example">...</div>, which illustrates how to mark up a div element with an attribute named class using a value of "example".
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>
11. Explain Meta tags in HTML5.
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.
12. List out some of the formatting tags in HTML5.
Some commonly used formatting tags are:
<strong>, <em>
<b>, <i>, <u>
<big>, <small>
<sub>, <sup>
<del>
<mark>
<ins>
13. Explain the difference between <strong>, <b> tags and <em>, <i> tags?
The <strong> and <b> tags are used to make text bold, but the <strong> tag also has semantic meaning, indicating that the text is important. The <em> and <i> tags are used to make text italic, but the <em> tag also has semantic meaning, indicating that the text is emphasized.
14. What is the benefit of collapsing white space?
Collapsing white space can improve the performance of web pages by reducing the size of the HTML document. White space is any combination of spaces, tabs, and newlines.
15. Describe HTML layout structure.
The HTML layout structure is defined using the following tags:
<html> and </html>: Enclose the entire HTML document
<head> and </head>: Contain information about the document, such as the title and meta tags
<body> and </body>: Contain the content of the document, such as text, images, and links
Other tags can be used to define different sections of the page, such as the header, footer, and sidebar.
15 Intermediate HTML5 interview Questions
16. Which browsers are HTML5-compliant?
Mozilla Firefox, Google Chrome, Apple Safari, and Opera.
17. What are the new <input> types for form validation in HTML 5?
The new HTML 5 input types for form validation are URL, number, tel, date, and email.
For Example:
<input type="text">
18. What is the use of the required attribute in HTML5?
It forces users to fill in text on the text field or text area before submitting the form. We use it for form validation.
For Example
<input type="text" name="name" required>
19. What is <!DOCTYPE>? What are the different types of <!DOCTYPE> that are available in HTML5?
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>
20. What are the three types of Doctypes available in HTML5?
Answer) The three available doctypes in HTML are,
Transitional Doctype
Strict Doctype
Frameset Doctype
21. If I do not put <!DOCTYPE html> will HTML 5 work?
No, the browser will not identify an HTML document, and HTML 5 tags do not function correctly.
22. How do we define the character set being used in an HTML5 document?
We use the HTML meta tag to define the character set used in the HTML document. The most commonly used character set is UTF-8.
23. What is the importance of <head> and <body> tag in HTML?
The <head> tag contains information about the document, such as the title and meta tags, while the <body> tag contains the content of the document, such as text, images, and links.
The <head> tag is important because it provides information about the document that is used by search engines and other web browsers. The <body> tag is important because it contains the content of the document that is displayed to the user.
24. Can we nest a webpage in another webpage?
Yes, we can indeed nest a webpage in another webpage using the iframe tag. The iframe tag is a void tag and doesn’t require a closing tag,
<iframe src=” Source to URL ”>
25. Explain HTML5 Graphics.
HTML5 supports two types of graphics i.e. Canvas and SVG.
a) 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.
b) 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.
<!DOCTYPE html>
<html>
<body>
<svg width = “400” height = “150”>
<rect width = “400” height = “150” style = “fill:rgb(200,220,255);stroke-width:10;stroke:rgb(0,0,0)”/>
</svg>
</body>
</html>
26. What is the use of output tag in HTML5?
The <output> tag in HTML5 is used to represent the different types of output and result.
What is the difference between SVG and Canvas HTML5 elements?
27. Which element provides the autocomplete feature in a textbox?
In HTML5 <Datalist> element is used to provide the autocomplete feature in a textbox.
28. What are the different ways to display an HTML element?
There are seven most commonly used ways to display an HTML element,
Block
Inline
Inline-block
Grid
Flex
Inline-flex
None
29. What is the difference between display: None and display: Hidden?
An element with a hidden display is not displayed on the screen, although it still takes up space on the web page. Whereas the element having the display as none will not be displayed on the webpage and will not occupy any space either.
15 Advanced HTML5 Interview Questions
30. Why do we use HTML5?
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
31. Explain Geolocation API in HTML5.
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).
32. What are the advantages of using HTML5?
Some of the advantages of using HTML are:
It has Multimedia Support.
It has the capabilities to store offline data using SQL databases and application cache.
HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
Included new Semantic tags and form control tags.
33. What are the disadvantages of using HTML5?
Some of the disadvantages of using HTML are:
Local storage is less secure
Client-side rendering
Doesn’t support old browsers
Different video supports for different browsers
34. How can we include a video in an webpage of HTML5?
We can use the HTML <video> tag to add videos to an HTML webpage.
35. How can we add audio to an webpage of HTML5?
We can use the HTML <audio> tag to add audio to an HTML webpage.
36. What exactly is a <figure> in HTML5?
This tag denotes a section of self-contained flow content. It is typically used as a single unit as a reference to the document's primary flow.
37. What is the difference between the <figure> and <img> tag in HTML5?
The figure tag is used to add self-contained content such as diagrams, code snippets, images, etc. In contrast, the <img> tag is used to embed images to the webpage.
The image map is one of the most prominent features of HTML. It is used to add different links to various sections of an image. The map tag is used to create an Image Map.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HTML5 Interview Questions</title>
</head>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://en.wikipedia.org/wiki/Computer">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://en.wikipedia.org/wiki/Mobile_phone">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://en.wikipedia.org/wiki/Coffee">
</map>
</body>
</html>
40. What are the best techniques for optimizing the loading of website assets?
You can use the following techniques for optimizing the loading time of your website assets:-
Use browser caching: Set appropriate cache headers for your assets to instruct the browser to cache them. After the initial load of your website, assets will be fetched from the cache instead of the server which will reduce the loading times.
Combine and bundle CSS and JavaScript files: Reduce the number of HTTP requests sent, by combining multiple CSS and JavaScript files into a single file each. This reduces the overhead of requesting and loading multiple files.
Use asynchronous and deferred loading: Use the async or defer attributes when including external scripts to improve page load times.
Compress images: Optimize images by compressing them without significant loss in quality. You should use modern formats such as webp and JPEG2000, as they offer better compression and smaller file sizes.
Lazy load images and videos: Implement lazy loading for images and videos so they are only loaded when they come into the viewport.
Use a content delivery network: Serve static assets like CSS, and images through a CDN. CDNs distribute your assets across multiple servers worldwide which improves the loading time of your website.
41. What are the different types of audio files that can be embedded in an HTML5?
There are three types of audio files that can be embedded in an HTML webpage,
WAV
Mp3
Ogg
42. What are the significant goals of the HTML5 specification?
These were the target area of the HTML5 specs:
Introduction of new element tags to better structure the web page such as <header> tag.
Forming a standard in cross-browser behavior and support for different devices and platforms.
Introduction of basic interactive elements without the dependency of plugins such as <video> tag instead of the flash plugin.
Backward compatible with the older version HTML web pages
43. Explain the concept of web storage in HTML5.
This web storage helps in storing some of the static data in the local storage of the browser so that we do not need to fetch it from the server every time we need it. There is a size limit based on different browsers that helps in decreasing the load time and a smooth user experience. There are two types of web storage that are used to store data locally in HTML5:
Local Storage - This helps in storing data that will be retained even though the user reopens the browser. It is stored for each webapp on different browsers.
Session Storage - This is used for one session only. After the user closes the browser this gets deleted.
44. What is Microdata in HTML5?
It is used to help extract data for site crawlers and search engines. It is basically a group of name-value pairs. The groups are called items, and each name-value pair is a property. Most of the search engines like Google, Microsoft, Yandex, etc follow schema.org vocabulary to extract this microdata.
To ace, an interview keep in mind the following tips,
Ask questions in an interview. If you are not clear about the question, ask the interviewer and get your doubts cleared.
It is not just about your technical skills in an interview. It is also about your communication skills.
Always keep in mind to take your time before answering the question. There is no rush to answer the question. Take your time and understand the question correctly.
And last but definitely not least, always keep in mind to learn something from the interview, and ask for feedback from the interviewer.
This blog contained a series of HTML5 Interview Questions. The blog also has sweet and to-the-point answers for the mentioned HTML5 Interview Questions depicting that it is a primary technology in creating the web pages.
46+ registered 