85+ Top HTML Interview Questions and Answers in 2024

This blog post covers a wide range of HTML interview questions. From the basics to the advanced topics, you will get all kinds of HTML-related questions that you have to face while being interviewed for the role of a web developer or some similar job role. Before discussing them, let's get a brief idea about HTML first.

What is HTML?

If you are into web development and want to start a career as a web developer, then HTML is the first step to achieving your goal. Every webpage you see on the internet is made up of HTML (along with JavaScript and CSS ). HTML is not a programming language . It is more like a text that can be easily interpreted by the web browser.

The web development market is not static. Every year, new tools are introduced, and old ones get obsolete, but HTML is one of its kind, and it can not be replaced easily. Even in web development interviews, the interviewer asks a lot of HTML interview questions because it is the core of web development.

Top HTML Interview Questions and Answers

We have categorized the entire set of HTML interview questions into three levels, namely basic HTML interview questions, intermediate HTML interview questions, and advanced HTML interview questions.

Basic HTML Interview Questions

1. What is HTML?

Answer: HTML is an acronym for HyperText Markup Language. It is a markup language used by WWW (World Wide Web) to create web pages.

2. What is the latest version of HTML?

Answer: The latest version of HTML is HTML5, and it was published by W3C recommendation on October 28, 2014.

3. What is HTML 5?

Answer: HTML 5 is the latest edition of HTML and the latest language used by WWW.

4. Can I hide my HTML code from the user?

Answer: No. The browser needs our code to display the web pages, and the browser allows the users to see the code.

5. Give some new features introduced in HTML5?

Answer:

• Introduction of new elements and attributes.
• New semantic elements like <header> and <footer>.
• It comes with bi-directional communication for web applications.
• HTML introduces Server-Sent Events (SSE).
• It allows us to add audio and video to the web pages.

6. Give some differences between HTML and HTML5?

Answer: There are several differences between HTML and HTML5 . Some of the important ones are:

7. Why do we write Doctype at the top of each HTML page?

Answer: Doctype is a special syntax given to HTML pages. It is a syntax because <!DOCTYPE> is not a tag. The Doctype statement in HTML tells the browser to open this web page in a standard model, and it acquaints the web page with the latest edition of HTML without specifying the particular versions.

8. What happens if we do not mention <!DOCTYPE> in an HTML page?

Answer: We would not be able to avail of the latest features of HTML and get stuck with the old ones. If there is no <!DOCTYPE>, the browser will get no information about the version of the HTML used in that specific web page.

9. What are tags?

Answer: Tags are pre-defined code in HTML. They start with < sign and end with > sign. HTML tags tell a browser what to do. Once we have opened an HTML tag, we have to close it, and to close an HTML tag, we use the / symbol. Most of the HTML tags come in pairs. For example <h1> </h1> and <p> </p>.

10. Do all HTML tags come in pairs?

Answer: No. Some tags like <img> and <br> are not in a pair.

11. Name all the lists we use in HTML.

Answer: Here are the different types of HTML lists we use every day:

• Ordered list
• Unordered list
• Definition list
• Menu list
• Directory list

12. Name new media elements in HTML5.

Answer:

• <audio>
• <video>
• <source>
• <embed>
• <track>

13. Why do we use the canvas elements in HTML5?

Answer: HTML5 has a new element known as canvas, which is used to create charts, graphs, photoshop 2D images, and so on.

14. What are comments in HTML, and how to insert one?

Answer: Comments are the special statements in HTML that do not execute and are not displayed on the web browser. We write a comment inside the <! > tag. For example:

 <!—Comment --->

15. What is the key difference between HTML elements and tags?

Answer: Elements are the predefined code that renders the text in different formats, and when an element is enclosed by brackets <>, we call it a tag.

16. Name all the headings in HTML.

Answer: HTML has 6 headings, from <h1> to <h6>, and each heading has its own size. The text size descend from <h1> to <h6>.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

17. How can we format the HTML text?

Answer: HTML provides tags like <strong>, <em>, and <i> to format the text. Formatting HTML text makes it more legible and provides a rich interface.

18. Mention some new form elements introduced in HTML5.

Answer: Web pages use forms to collect data from the user so that appropriate operations can be performed at the back-end. Before HTML5, HTML used different kinds of form elements like text fields, passwords, drop-down menus, and so on. In HTML5, some new elements are introduced such as <datalist>, <keygen> and <output> .

19. Name the types of web storage in HTML5.

Answer: HTML5 has two types of web storage:

1. Session storage : In session storage, data is stored temporarily until the browser is closed. Once we close the browser, the data is lost.
2. Local Storage: In local storage, data does not get deleted even when the browser is closed. To delete the data, we have to manually do so in the browser settings.

20. Give two advantages of HTML5 web storage.

Answer:

1. It has a storage of 10 MB, which is more than what a cookie can have.
2. The storage data can be transferred through HTTP requests.

21. Give a key difference between semantic and non-semantic elements.

Answer:

• Semantic elements give a clear meaning to their content and only work on a specific flow. For example, <img> element. This element is used to insert images in web pages, and it gives a proper meaning.
• Non-semantic elements in HTML does not give a proper meaning. For example, <spam> and <div>.

22. Can we get the geographical position of a user using HTML?

Answer: Yes, HTML 5 provides us with a Geolocation API that can retrieve the location of a user.

23. Can we apply a hyperlink to images?

Answer: Yes, it is possible to apply a hyperlink to images in HTML5.

24. Mention the hierarchy of applying a style sheet to an HTML page.

Answer:

• Inline sheet.
  • Embedded sheet.
    • External sheet.

25. Can we show all characters using HTML?

Answer: No, it depends on the operating system on which the browser is running.

26. What is an image map?

Answer: In a single image, we can create different clickable areas, and each area can refer to a different web page. This method of mapping different web pages on a single image is known as an image map.

27. Is HTML a programming language?

Answer: Although HTML code gets interpreted by the browser, it is not a programming language. Code execution is not enough to be a programming language. Instead, HTML is a markup language.

28. How does the browser interpret the white space?

Answer: The browser does not consider the white space when it is between two different tags, but it becomes a character when it is used inside a tag.

29. How can we create such links that scroll to the same page?

Answer: To scroll on the same page, we use the # symbol along with the <a> tag. First, we assign a link using the <a> tag and the href attribute, and then again create a <a> tag having the same name.

For example:

<a href = ”#gothere” >  Go There </a>
<a name =”gothere”>

30. Why do we use alternative text in image mapping?

Answer: In image mapping, the user can easily get confused about what links go to what webpage. Thus, we provide an alternate text to each area so the user can figure out which area links to which page.

31. Can we run old HTML files on a new browser?

Answer: Yes, but it can hinder the execution of some HTML code because of the new features.

32. What happens if the user's operating system does not support some HTML characters?

Answer: The user won’t be able to read the characters because the operating system will show some random square- or circle-like characters.

33. Which two attributes does a <li> tag consist of?

Answer: The <li> tag has two attributes, type and value. The type attribute is used to change the type of numbering, and the value attribute is used to change the number of indexing.

34. What are bullets in HTML?

Answer: Bullets in HTML are represented with an unordered list. We can set the attribute of the unordered list to a disc, square, or circle.

35. What is an empty HTML element?

Answer: An HTML element with no content or text associated with it is known as an empty HTML element . For example, <br>.

Intermediate HTML Interview Questions

36. What are nested tables, and how to create those?

Answer: When we create a table inside a table, we call it a nested table.

For example:

<table>
<tr>
<td> ‘’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’</td>
<td>’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’
<table>
<tr>
<td>’’’’’’’’’’’ </td>
<td> ‘’’’’’’’’’’’’’’’’’’’’’</td>
</tr>
</table>
</td>
</tr>
</table>

37. How can we create multicolor text on a web page?

Answer: To create multicolor text, we have to change the colors of different portions of the text. For that, we have to individually visit every text and change its color using:

<font color =” color”> text </font>

38. In HTML, why do we have numeric as well as character values for different attributes?

Answer: In HTML, we can use both ASCII values as well as name values for an attribute. Though ASCII values are sufficient for the attribute, we require name values too because they are easy to remember.

39. How can we insert a copyright symbol using an ASCII number?

Answer: &#169

40. Can we change the color of the bullets?

Answer: Yes, but indirectly the color of the bullet depends upon the color of the list text. Therefore, in order to change the color of the bullet, we need to change the color of the list text.

41. What is a marquee?

Answer: In HTML, we use the <marquee> tag to display moving text or images.

42. How can we link a .css file in our HTML code?

Answer: To link a .css file in HTML, we use the <link> tag and the href attribute. The link tag should be inside the <head> tag. For example:

<head>
<link href="/css/style.css" type="text/css" rel="stylesheet" />
</head>

43. What is non-breaking space in HTML?

Answer: While writing any text in content, if we add more than one space at once, the HTML removes all the extra spaces and keeps only one of those. This removal of spaces can be solved with Non-Breaking Space (NBSP). To add more than a single space, we use &nbsp;

44. What is the key difference between cell padding and cell spacing?

Answer: Cell padding refers to the gap between the text content and the cell border or wall. On the other hand, cell spacing is a gap between two cells of the same table.

45. What is CSS?

Answer: CSS stands for Cascading Style Sheets, and it is used by HTML to style its black and white text. CSS provides an interactive interface to HTML and plays a vital role while creating a web page.

46. What happens if two tags overlap?

Answer: If two tags get overlap, the tag which is written first will come under the HTML consideration, and the content of the second tag will adjust according to the first tag. This could cause many problems, and you will not get satisfactory results.

47. What is an applet?

Answer: The applet is a Java program that can be embedded into a web page. It includes some functionality on the webpage and provides a dynamic approach to the web pages. The applet executes at the client-side, which means it can easily run on the browser.

48. What happens if there is no text in between a tag?

Answer: If there is no text and only a tag, then there is nothing to format, and we would get nothing on the screen when we execute the HTML file on the browser .

49. Can we link a single <a> with two different web pages?

Answer: No, when we create the <a> tag, it accepts only one href attribute.

50. Comment on text field size.

Answer: The default size of a text field is 13 characters, but it has an attribute named size that can alter the character size from 1 character to many characters. The maximum size of a character depends upon the browser width.

51. What is the case when the text shows out of the browser?

Answer: When a text is inside a table with a fixed width, the text content of the table can be extended beyond the browser window.

52. Write an HTML code that uses a picture as the background.

Answer:

<body background = “image.gif”>

Advanced HTML Interview Questions

53. What do you know about logical and physical tags in HTML?

Answer: There are two types of character tags in HTML:

1. Physical Tags: Physical tags are used to display the physical characteristics of the text. For example, the <b> tag is used to bold the text, and the <i> tag gives an italic structure to the text. We use physical tags where we want to change the physical structure of the tags. <u>, <sub>, and <sup> are some examples of physical tags.
2. Logical Tags: Logical tags show the logical meaning of the text. However, they can also change the physical structure of the text, but they are generally used to show the logical meaning of the text. For example, <em> is a logical tag that is similar to <i>, but it provides a logical meaning to the text. How the logical tags change the structure of the text also depends on the browser. <strong>, <abbr>, <cite>, and <dfn> are some examples of logical tags.

54. What is the difference between HTML and XHTML?

Answer:

55. What do you know about HTML SVG?

Answer: It is an HTML tag that acts as a container for vector graphics. It stands for Scalable Vector Graphics , and it is used to create graphics in the XML format. Using <SVG>, we can create different graphic designs, such as boxes, circles, text, and graphical images.

<svg width="200" height="200">
  <rect width="200" height="200" style="fill:rgb(10,10,200);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

56. How can we create buttons using HTML?

Answer: HTML provides us with the <button> tag that can create a clickable button on the web page. Buttons can also be used inside the form tags to create submit form icons.

<button>Click</button>

57. Is it possible for the content of a webpage to appear outside the browser window?

Answer: If we only use HTML, then there some cases could arise when the content of the page does not fit on a single screen. For instance, if there is a table cell that has a large width and the browser is not able to show the complete table on the browser. But now we have more responsive web pages that auto-adjust the page content according to the screen and browser on the user device.

58. List the tags that can be used to separate blocks of text.

Answer: There are various HTML tags that can separate two blocks of content or text. These are:

• Paragraph tags: <p> </p>
• Division tags: <div> </div>
• Horizontal line tags: <hr>
• Break tags: <br>

59. Create a link that redirects the user to send a mail to xyz@mail.com.

Answer: To create such links, we can add the mailto command in the href attribute of the <a> tag. For example:

<a href="mailto : xyz@mail.com">text to be clicked</a>

60. What happens if multiple style definitions are performed on a single tag?

Answer: Here, the tag will follow the hierarchical precedence, and that style definition will be performed on the tag which is the closest. For instance, if there is a selector and inline style for a tag, then the inline styling will take priority because it is closer to the tag.

61. What happens if you open a .css file in the browser?

Answer: The browser reads the .css file as a text file and displays the file code as it is written. The code will not execute because to execute the code on the browser, we need tags, and the browser executes the code according to the respective tags.

62. Why do we use the <span> tag?

Answer: The <span> tag comes useful when we want to perform some inline operation on a specific text. Although it does not provide any specific visual and contextual changes, it can be used to provide a class or Id name to the element. For example:

<p>She has a <span style="color:blue">blue</span> pen</p>

Top HTML 5 Interview Questions and Answers

HTML 5 is the latest edition of HTML. Introduced in 2014 by W3C , which is responsible for standardizing and maintaining HTML, HTML5 brought many new tags and properties to build content-rich interactive web pages. Nowadays, companies hire only those developers who are up-to-date with the latest version of HTML.

If you are going for a web developer job interview, then there is a high possibility that the interviewer will ask you questions from HTML 5. Therefore, we have provided top HTML 5 interview questions that will definitely help you to crack the interview.

63. Name some objectives behind releasing HTML 5.

Answer:

• To provide better syntax and tags for improving the structure of a webpage.
• Make HTML consistent for all the browsers.
• Ensure that the new version of HTML (HTML5) has backward compatibility with the old standard tags.
• Make it easy to handle errors in the document structure.
• Introduce some common tags and properties for animations and videos in HTML, so it does not need to depend on JavaScript for trivial functions.

64. List the new features introduced in HTML5.

Answer:

• It provides new tags for audio, graphics, and video. These are <audio>, <canvas> , and <video> , respectively.
• HTML5 comes with better error handling.
• Introduces extensions for the JavaScript API.
• Brings new tags to replace trivial scripting.
• Introduces new attributes, such as <article>, <bdi>, and <meter> for better document structure.
• It comes with updated parsing rules.

65. List the most important technologies introduced in HTML5.

Answer:

• CSS3
• Canvas2D
• Web Intents
• Offline application
• SVG (Scalable Vector Graphics)
• Web Sockets
• File and Geolocation API
• Web storage and workers

66. What do you know about web workers?

Answer: An HTML page remain unresponsive until the script of the page finishes executing, but HTML web-workers API eliminates this problem. HTML web worker is JavaScript code that runs in the background and does not affect the overall performance of a webpage. This enables JavaScript to keep running in the background, and we do not need to refresh the page or request the server to display additional data. Web workers take care of everything.

67. List all the content models introduced in HTML 5.

Answer: HTML 5 introduced seven major content models, and all the elements are part of a block or inline content model. These are:

1. Metadata
2. Embedded
3. Interactive
4. Heading
5. Phrasing
6. Flow
7. Sections

Metadata: It sets the presentation and behavior of the rest of the content. Examples:

<base>, <link>, <meta>, <title>, and <style>

Embedded: It imports the resources in the document. Examples:

<audio>, <video>, <canvas>, <iframe>,<img>,<math>, and <svg>

Interactive: It includes elements of user interfaces and interactions. Examples:

<a>, <audio>, <video>, <button>, <iframe>, and <textarea>

Heading: Provides content header. Examples:

<h1> to <h6>

Phrasing: Provides inline elements that have backward compatibility with HTML4. Examples:

<span>, <strong>, <lable>,<br/>, and <sub>

68. Name the HTML tag where we put the metadata.

Answer: Metadata is always put in the header of the HTML document because it sets the structure and behavior of the rest of the content so that it can execute first.

For example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<p>Its a paragraph</p>
</body>
</html>

69. Explain the <header> tag.

Answer: It is a block tag and is used when we want to contain more than one heading tag in a single block.

For Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<header>
             <h2> Main Heading</h2>
	     <h3> Sub heading</h3>
	</header>
</body>
</html>

70. Explain footer elements.

Answer: A footer tag is generally used to put various elements of content at the bottom of the web page. All the "about us, content information, privacy policy, terms and conditions, and copyright information" of the web page can be put inside the footer block and positioned at the bottom.

For example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
 All body content
....
...
..
<footer>
    <a href="about.html"> About Us</a>
    <a href="tc.html"> Term and Conditions</a>
</footer>
</body>
</html>

71. Name the major HTML4 tags that are not supported in HTML5.

Answer:

• <applet>
• <acronym>
• <big>
• <basefont>
• <center>
• <dir>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

72. Applet is not supported by HTML5. Then what happens to a website that uses Applet tags?

Answer: Although HTML5 does not support applets, they are supported by HTML4, and mostly all the browsers are capable of parsing both HTML versions. So those web pages that are using applet will keep working till the web browser gives support for HTML 4.

73. Can we have multiple header and footer tags on the same web page?

Answer: Yes, we can use multiple header and footer tags on a web page. For each article, block, or section, we can have multiple header and footer tags.

74. Write HTML code to embed audio on a web page.

Answer:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
   <audio src ="music.mp3" controls> 
        Not supported</audio>
</body>
</html>

The text "Not supported" will render if the browser is not able to identify the audio element.

75. Write HTML code that can embed multiple audio formats for a single audio file.

Answer:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<audio controls> 
		<source src="music.mp3" type="audio/mpeg">
		<source src="music.ogg" type="audio/ogg">
	</audio>
</body>
</html>

Here, the browser will play that audio file in the format it supports and recognizes first.

76. What are the various major attributes of the <audio> tag?

Answer: We can use three major attributes with the <audio> tag:

1. Control: This attribute displays the control buttons for audio, such as play and pause.
2. Autoplay: The autoplay attribute plays the audio automatically without the user's permission as soon as it is loaded by the web browser.
3. Loop: This attribute will automatically replay the audio once the audio is finished.

77. Write HTML code that displays a process bar with 50% complete loading.

Answer:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
    <label>Process:</label>
    <progress value="50" max="100"></progress>
</body>
</html>

78. What do you know about web storage introduced in HTML 5?

Answer: In HTML 5, W3C introduced a new concept called web storage, which provides an alternative for JavaScript cookies. Web storage APIs are capable of storing users' private website data on the users' local computers.

HTML web storage is more secure and faster than cookies, and they even have a larger size to store the user's private data. There are two types of HTML web storage:

1. Session Storage
2. Local Storage

The data of Session Storge gets destroyed as soon as the user closes the browser.

sessionStorage.setItem("key", "value");

The data stored in the Local Storage remains in the web browser until the user deletes it explicitly.

localStorage.setItem("key", "value");

79. Give some difference between Canvas and SVG.

Answer:

For Example: SVG:

<!DOCTYPE html>
<html>
<body>

   <svg width="400" height="100">
      <rect width="400" height="100"  />
      Not supported
    </svg>
</body>
</html>

Canvas:

<!DOCTYPE html>
<html>
<body>
   <canvas  width="100" height="200" style="border:2px solid #000000;">
    Not Supported.
   </canvas>
</body>
</html>

80. How can we optimize our website resources?

Answer: To optimize our website resources, we can reduce the download size and the number of concurrent requests made on our website. To perform these two operations, we can use some distinct techniques like:

• CDN hosting
• File compression
• File concatenation
• Re-organizing
• Refining code

81. What do you know about HTML5 Geolocation?

Answer: It is an API introduced in HTML5, which is capable of obtaining the user's geographical location. However, there are some privacy issues with this API. The API will work on the user browser only if the user gives permission to "access the location."

navigator.geolocation.getCurrentPosition(showPosition);

Apparently, it is a JavaScript function and accepts some parameters, such as showLocation, ErrorHandler, and Option . The location data retrieved by the geolocation API can be represented in two ways:

1. Geodetic: It presents user location in latitude and longitude.
2. Civic: It presents user location in a more human-readable format.

82. What do you know about Drag and Drop in HTML5?

Answer: Drag and Drop are the HTML5 APIs that allow the user to grab any object on the page, drag it and drop it to a different location.

Drag: The user is only able to drag those HTML elements that have the draggable attribute.

<img draggable ='true'/ src='img.png'>

Drop: The drag object can only drop to some specific location where the ondragover event is specified.

<div  ondragover="allowDrop(event)"></div>

83. Write HTML code to draw a red circle with a 100 unit radius.

Answer:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<label>Circle:</label>
	<svg height ='2000' width ='2000'>
	    <circle cx="120" cy="120" r="100" fill="red"/> 
	</svg>
</body>
</html>

84. Write HTML code to print a blue color rectangle box of 400X200 units.

Answer:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
    <label>Rectangle:</label>
    <svg height ='2000' width ='2000'>
      <rect width ="400" height="200 "fill="blue"/>
    </svg>
</body>
</html>

85. Write HTML code to draw a line between these two coordinates (20,50) and (200, 300).

Answer:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	
	<svg height="210" width="500">
       <line x1="20" y1="50" x2="200" y2="300" 
         style="stroke:rgb(255,0,0);
         stroke-width:4" />
</svg>
	</svg>
</body>
</html>

86. What do you know about the <animate> tag?

Answer: The <animate> tag can be used to create SVG animation using only HTML tags. Before the introduction of animate and SVG tags, we have to use JavaScript for basic animations, but now we can create dynamic animations using HTML only.

For example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	
	<svg height="210" width="500">
		<rect width ="40" height="10" fill="red"/>
		  <animate attributeName="y"
		  from ="0" to="500"
		  dur="3s" fill="freeze"
		  repeatCount="3"/>
</svg>
	</svg>
</body>
</html>

The <animate> tag comes with 6 attributes:

1. attributeName: It specifies the direction in which the animation will move.
2. from: It specifies the starting coordinates of the animation.
3. to: It specifies the endpoint of the animation.
4. due: It specifies how long the animation will run.
5. fill: It specifies the return of value to its initial position.
6. repeatCount: It specifies how many times the animation will repeat.

Conclusion

Updates in any language do not change the overall language syntax or replace all the old features. However, each upgrade brings new features and drops some old ones. This is a similar case with HTML5. In HTML 5, W3C introduced some new features and dropped some obsolete elements and tags.

Here in this article, we discussed some of the best HTML interview questions that are frequently asked during web developer interviews in MNCs. Hope you like this article. If you have any suggestions, please let us know by commenting down below.

People are also reading:

• HTML Cheat Sheet
• Difference between HTML and HTML5
• Best Front End Development Interview Questions
• Top Angular Interview Questions
• Best Node.JS Frameworks
• Python Frameworks
• Javascript Frameworks
• Infosys Interview Questions
• SSIS Interview Questions & Answers
• JQuery Interview Questions and Answers