HTML interview Question & their Solution

A comprehensive list of HTML Interview questions & solutions with code examples

1. What does HTML stand for?

Solution:
HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages.

2. What is the purpose of the `<html>` tag in an HTML document?

Solution:
The <html> tag defines the root of an HTML document. It wraps all the content on the entire page, except for the <!DOCTYPE> declaration.

<!DOCTYPE html>
<html>
  <!-- All other HTML elements go here -->
</html>

3. How do you create a hyperlink in HTML?

Solution:
Use the <a> tag with the href attribute to create a hyperlink.

<a href="https://www.example.com">Visit Example.com</a>

4. What is the purpose of the `<head>` section in an HTML document?

Solution:
The <head> section contains meta-information about the document, such as the title, character set, styles, scripts, and other meta tags. It does not display content directly on the webpage.

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
</head>

5. How do you insert an image in HTML?

Solution:
Use the <img> tag with the src (source) and alt (alternative text) attributes.

<img src="image.jpg" alt="Description of Image">

6. What is the purpose of the `<title>` tag?

Solution:
The <title> tag defines the title of the HTML document, which appears in the browser’s title bar or tab.

<title>My Web Page</title>

7. How do you create an unordered list in HTML?

Solution:
Use the <ul> tag for an unordered list and <li> tags for each list item.

<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>

8. How do you create an ordered list in HTML?

Solution:
Use the <ol> tag for an ordered list and <li> tags for each list item.

<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

9. What is the purpose of the `<div>` tag?

Solution:
The <div> tag is a block-level container used to group other HTML elements together for styling or scripting purposes. It doesn’t inherently represent anything.

<div class="container">
  <p>This is inside a div.</p>
</div>

10. How do you add a comment in HTML?

Solution:
Use  to end a comment.

<!-- This is a comment -->

11. What is the purpose of the `<span>` tag?

Solution:
The <span> tag is an inline container used to group text or other inline elements for styling or scripting purposes without adding any visual change by itself.

<p>This is a <span class="highlight">highlighted</span> word.</p>

12. How do you create a table in HTML?

Solution:
Use the <table> tag along with <tr> for table rows, <th> for header cells, and <td> for data cells.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

13. What is the purpose of the `<form>` tag?

Solution:
The <form> tag is used to create an HTML form for user input. It can contain various input elements like text fields, checkboxes, radio buttons, and submit buttons.

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

14. How do you create a text input field in an HTML form?

Solution:
Use the <input> tag with type="text".

<label for="username">Username:</label>
<input type="text" id="username" name="username">

15. What is the purpose of the `alt` attribute in the `<img>` tag?

Solution:
The alt attribute provides alternative text for an image if it cannot be displayed. It also improves accessibility for users using screen readers.

<img src="photo.jpg" alt="A beautiful sunrise">

16. How do you make a line break in HTML?

Solution:
Use the <br> tag to insert a line break.

<p>This is the first line.<br>This is the second line.</p>

17. What is the purpose of the `<meta>` tag?

Solution:
The <meta> tag provides metadata about the HTML document, such as character set, viewport settings, descriptions, and keywords for search engines.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

18. How do you include an external CSS file in an HTML document?

Solution:
Use the <link> tag within the <head> section with the rel, href, and type attributes.

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

19. What is the purpose of the `id` attribute in HTML elements?

Solution:
The id attribute assigns a unique identifier to an HTML element, which can be used for styling with CSS or manipulating the element with JavaScript.

<p id="intro">Welcome to my website!</p>

20. How do you create a button in HTML?

Solution:
Use the <button> tag or the <input> tag with type="button" or type="submit".

<button type="button">Click Me!</button>

<!-- OR -->

<input type="button" value="Click Me!">

21. What is the difference between `<strong>` and `<b>` tags?

Solution:

<strong>: Indicates that the text is of strong importance, typically displayed in bold by default.
<b>: Simply makes the text bold without conveying any extra importance.

<p><strong>Important:</strong> Please read the instructions carefully.</p>
<p>This is a <b>bold</b> statement.</p>

22. How do you create a dropdown list in an HTML form?

Solution:
Use the <select> tag with nested <option> tags.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

23. What is the purpose of the `<iframe>` tag?

Solution:
The <iframe> tag embeds another HTML page within the current page.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

24. How do you create a radio button in an HTML form?

Solution:
Use the <input> tag with type="radio" and ensure that radio buttons sharing the same name attribute are grouped.

<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

25. What is the purpose of the `target` attribute in the `<a>` tag?

Solution:
The target attribute specifies where to open the linked document. For example, target="_blank" opens the link in a new tab or window.

<a href="https://www.example.com" target="_blank">Open Example.com in a new tab</a>

26. How do you create an email link in HTML?

Solution:
Use the <a> tag with the mailto: protocol in the href attribute.

<a href="mailto:[email protected]">Send Email</a>

27. What is the purpose of the `<header>` tag?

Solution:
The <header> tag represents a container for introductory content or navigational links. It typically contains headings, logo, or navigation elements.

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
</header>

28. How do you create a horizontal rule in HTML?

Solution:
Use the <hr> tag to insert a thematic break (horizontal line) in the content.

<p>Section One</p>
<hr>
<p>Section Two</p>

29. What is the purpose of the `<footer>` tag?

Solution:
The <footer> tag defines a footer for a document or section. It typically contains information like the author, copyright, links to terms of service, etc.

<footer>
  <p>&copy; 2024 My Website</p>
</footer>

30. How do you make text italic in HTML?

Solution:
Use the <i> tag for italic text without emphasizing importance, or the <em> tag to emphasize importance which is typically displayed in italics.

<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>

31. How do you create a checkbox in an HTML form?

Solution:
Use the <input> tag with type="checkbox" to create a checkbox input field.

<label>
  <input type="checkbox" name="subscribe" value="newsletter"> Subscribe to the newsletter
</label>

32. What is the purpose of the `action` attribute in the `<form>` tag?

Solution:
The action attribute specifies the URL where the form data will be submitted.

<form action="/submit-form" method="post">
  <!-- form inputs go here -->
</form>

33. How do you set a default value for an input field in a form?

Solution:
Use the value attribute in the <input> tag to set a default value.

<label for="username">Username:</label>
<input type="text" id="username" name="username" value="guest">

34. How do you disable an input field in HTML?

Solution:
Add the disabled attribute to the <input> tag to disable it.

<input type="text" name="username" value="guest" disabled>

35. What is the purpose of the `method` attribute in the `<form>` tag?

Solution:
The method attribute specifies how the form data is sent to the server. Common methods are GET (appends data to the URL) and POST (sends data in the body of the request).

<form action="/submit-form" method="post">
  <!-- form inputs go here -->
</form>

36. How do you create a password field in an HTML form?

Solution:
Use the <input> tag with type="password" to create a password input field. The entered characters are hidden.

<label for="password">Password:</label>
<input type="password" id="password" name="password">

37. How do you make an image a clickable link in HTML?

Solution:
Wrap the <img> tag inside an <a> tag to make the image clickable.

<a href="https://www.example.com">
  <img src="image.jpg" alt="Click Me!">
</a>

38. How do you set a placeholder text for an input field?

Solution:
Use the placeholder attribute in the <input> tag to show temporary text inside the field.

<input type="text" name="email" placeholder="Enter your email">

39. What is the purpose of the `target="_blank"` attribute in an `<a>` tag?

Solution:
The target="_blank" attribute opens the linked page in a new browser tab or window.

<a href="https://www.example.com" target="_blank">Visit Example</a>

40. How do you embed a video in HTML?

Solution:
Use the <video> tag with src and controls attributes to embed a video.

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

41. How do you create a file upload field in an HTML form?

Solution:
Use the <input> tag with type="file" to create a file upload field.

<label for="file">Upload a file:</label>
<input type="file" id="file" name="file">

42. What is the purpose of the `required` attribute in an input field?

Solution:
The required attribute specifies that the input field must be filled out before submitting the form.

<input type="text" name="username" required>

43. How do you group related elements in an HTML form?

Solution:
Use the <fieldset> tag to group related elements and the <legend> tag to define a caption for the group.

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</fieldset>

44. What is the purpose of the `name` attribute in form elements?

Solution:
The name attribute identifies the form element when the form is submitted. The form data is sent as name-value pairs.

<input type="text" name="username">

45. How do you add a favicon to your website?

Solution:
Use the <link> tag within the <head> section to add a favicon to the website.

<link rel="icon" href="favicon.ico" type="image/x-icon">

46. How do you specify a default selected option in a dropdown menu?

Solution:
Use the selected attribute in the <option> tag to specify the default selected option.

<select>
  <option value="volvo" selected>Volvo</option>
  <option value="saab">Saab</option>
</select>

47. How do you create a hidden input field in an HTML form?

Solution:
Use the <input> tag with type="hidden" to create a hidden input field.

<input type="hidden" name="userID" value="12345">

48. How do you create a submit button in an HTML form?

Solution:
Use the <input> tag with type="submit" or the <button> tag to create a submit button.

<input type="submit" value="Submit">

<!-- OR -->

<button type="submit">Submit</button>

49. How do you specify the character encoding for an HTML document?

Solution:
Use the <meta> tag with the charset attribute in the <head> section to define the character encoding.

<meta charset="UTF-8">

50. What is the purpose of the `enctype` attribute in an HTML form?

Solution:
The enctype attribute specifies how form data should be encoded when submitting it to the server. It’s commonly used with file uploads.

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>

51. How do you create a number input field in HTML?

Solution:
Use the <input> tag with type="number" to create a number input field.

<label for="age">Age:</label>
<input type="number" id="age" name="age">

52. How do you limit the range of values for a number input field?

Solution:
Use the min and max attributes to set the range of values.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100">

53. How do you define a search input field in an HTML form?

Solution:
Use the <input> tag with type="search" to create a search input field.

<input type="search" name="query" placeholder="Search...">

54. How do you use the `<audio>` tag to embed sound in HTML?

Solution:
Use the <audio> tag with the src and controls attributes to embed audio.

<audio src="audio.mp3" controls>
  Your browser does not support the audio element.
</audio>

55. How do you create a range slider input in an HTML form?

Solution:
Use the <input> tag with type="range" to create a slider control for selecting a number within a range.

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

56. How do you specify a date input field in HTML?

Solution:
Use the <input> tag with type="date" to create a date input field.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

57. How do you create a drop-down menu with multiple selections?

Solution:
Use the <select> tag with the multiple attribute to allow multiple selections.

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

58. How do you specify the width and height of an image in HTML?

Solution:
Use the width and height attributes in the <img> tag to specify the dimensions.

<img src="image.jpg" alt="Sample Image" width="400" height="300">

**59.

How do you create a text area input field in HTML?**

Solution:
Use the <textarea> tag to create a multi-line text input field.

<textarea name="message" rows="4" cols="50">
  Enter your message here...
</textarea>

60. How do you create a radio button in an HTML form?

Solution:
Use the <input> tag with type="radio" to create a radio button. Group radio buttons by giving them the same name attribute.

<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

61. How do you create a hyperlink that opens an email client with a predefined recipient?Solution:
Use the `mailto:` attribute in the `<a>` tag to open the default email client with a specified recipient.

<a href="mailto:[email protected]">Send Email</a>

62. How do you define a progress bar in HTML?

Solution:
Use the <progress> tag to create a progress bar. The value attribute defines the current progress, and the max attribute defines the maximum value.

<progress value="70" max="100"></progress>

63. How do you create a navigation list in HTML?

Solution:
Use the <nav> tag to define a block of navigation links.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

64. What is the purpose of the `<mark>` tag in HTML?

Solution:
The <mark> tag highlights text. The highlighted text is usually shown with a yellow background.

<p>The <mark>important</mark> text is highlighted.</p>

65. How do you add a tooltip to an element in HTML?

Solution:
Use the title attribute to add a tooltip that appears when the user hovers over the element.

<p title="This is a tooltip">Hover over this text to see the tooltip.</p>

66. How do you embed an SVG image directly in HTML?

Solution:
Use the <svg> tag to embed SVG (Scalable Vector Graphics) directly in HTML.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

67. How do you set an image as the background of an HTML page?

Solution:
Use the background-image CSS property in the <style> section or an external stylesheet.

<style>
  body {
    background-image: url('background.jpg');
  }
</style>

68. How do you create a comment in HTML?

Solution:
Use the  syntax to create a comment in HTML.

<!-- This is a comment in HTML -->
<p>This is visible content.</p>

69. How do you force a line break in HTML?

Solution:
Use the <br> tag to create a line break within text or content.

<p>This is line one.<br>This is line two.</p>

70. How do you make text italic in HTML?

Solution:
Use the <i> or <em> tag to italicize text.

<p>This is <i>italic</i> text.</p>

71. How do you center-align text in HTML?

Solution:
Use the text-align CSS property with the value center.

<style>
  p {
    text-align: center;
  }
</style>

<p>This text is centered.</p>

72. How do you create an ordered list in HTML?

Solution:
Use the <ol> tag for an ordered (numbered) list and <li> for each list item.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

73. How do you create an unordered list in HTML?

Solution:
Use the <ul> tag for an unordered (bulleted) list and <li> for each list item.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

74. How do you insert a horizontal line in HTML?

Solution:
Use the <hr> tag to create a horizontal line (rule).

<p>This is some text.</p>
<hr>
<p>This is more text after the line.</p>

75. How do you embed Google Maps in an HTML page?

Solution:
Use the <iframe> tag to embed Google Maps by specifying the map URL in the src attribute.

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093745!2d144.96315781531678!3d-37.81627967975139!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d43c728ab29%3A0x5045675218ce7e0!2z5p2x5r2t5rSL5rOi5rS7546p!5e0!3m2!1szh-CN!2shk!4v1524730812369"
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  allowfullscreen>
</iframe>

76. How do you specify a minimum value for a number input in HTML?

Solution:
Use the min attribute in the <input> tag for a number input.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18">

77. How do you embed a YouTube video in an HTML page?

Solution:
Use the <iframe> tag to embed a YouTube video by specifying the video URL in the src attribute.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

78. How do you make a button that redirects to a new page in HTML?

Solution:
Use the <button> tag with JavaScript onclick to redirect the user when the button is clicked.

<button onclick="window.location.href='https://www.example.com';">Go to Example</button>

79. How do you create a time input field in HTML?

Solution:
Use the <input> tag with type="time" to create a time input field.

<label for="time">Select Time:</label>
<input type="time" id="time" name="time">

80. How do you create a definition list in HTML?

Solution:
Use the <dl> tag to define a list of terms and descriptions. Use <dt> for each term and <dd> for its description.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

81. How do you add a caption to a table in HTML?

Solution:
Use the <caption> tag within the <table> tag to add a table caption.

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
</table>

82. How do you make a link download a file instead of navigating to it?

Solution:
Use the download attribute in the <a> tag to force the browser to download the file instead of navigating to it.

<a href="file.pdf" download>Download PDF</a>

83. How do you merge two or more table columns in HTML?

Solution:
Use the colspan attribute in the <td> or <th> tag to merge (span) columns.

<table>
  <tr>
    <td colspan="2">Merged Column</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

84. How do you set the language of an HTML document?

Solution:
Use the lang attribute in the <html> tag to specify the document’s language.

<html lang="en">

85. How do you create a clickable image that also submits a form in HTML?

Solution:
Use the <input> tag with type="image" to create a clickable image that submits the form.

<form action="/submit">
  <input type="image

" src="submit.png" alt="Submit">
</form>

86. How do you disable an entire form in HTML?

Solution:
Add the disabled attribute to the <fieldset> tag to disable all form elements within the fieldset.

<fieldset disabled>
  <input type="text" name="username">
  <input type="password" name="password">
</fieldset>

87. How do you add a placeholder for a `<textarea>` element?

Solution:
Use the placeholder attribute in the <textarea> tag to add placeholder text.

<textarea name="message" placeholder="Enter your message here"></textarea>

88. How do you make a table cell span multiple rows in HTML?

Solution:
Use the rowspan attribute in the <td> or <th> tag to span multiple rows.

<table>
  <tr>
    <td rowspan="2">Merged Row</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>

89. How do you create a telephone number link in HTML?

Solution:
Use the tel: attribute in the <a> tag to create a clickable phone number link.

<a href="tel:+1234567890">Call Us</a>

90. How do you make text bold in HTML?

Solution:
Use the <b> or <strong> tag to make text bold.

<p>This is <b>bold</b> text.</p>

91. How do you create a pop-up alert when a button is clicked in HTML?

Solution:
Use the onclick event with JavaScript’s alert() function inside the <button> tag.

<button onclick="alert('Button Clicked!')">Click Me</button>

92. How do you specify a color input field in HTML?

Solution:
Use the <input> tag with type="color" to create a color picker input field.

<label for="favcolor">Choose your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">

93. How do you specify a search keyword when submitting a form via the URL?

Solution:
Use the GET method in the form to append the data to the URL as query parameters.

<form action="/search" method="get">
  <input type="text" name="q" placeholder="Search">
  <input type="submit" value="Search">
</form>

94. How do you create an inline frame (iframe) in HTML?

Solution:
Use the <iframe> tag to embed another webpage inside the current one.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

95. How do you display an alert if a form input is empty on submission?

Solution:
Use JavaScript to check if the input field is empty before submitting.

<form onsubmit="return checkInput()">
  <input type="text" id="name" name="name" placeholder="Enter name">
  <input type="submit" value="Submit">
</form>

<script>
  function checkInput() {
    var name = document.getElementById('name').value;
    if (name === '') {
      alert('Name cannot be empty');
      return false;
    }
    return true;
  }
</script>

96. How do you create a select dropdown with optgroup in HTML?

Solution:
Use the <optgroup> tag to group related options within a <select> dropdown.

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="spinach">Spinach</option>
  </optgroup>
</select>

97. How do you automatically submit a form in HTML?

Solution:
Use JavaScript’s submit() function to automatically submit the form.

<form id="autoForm" action="/submit">
  <input type="hidden" name="hiddenInput" value="data">
</form>

<script>
  document.getElementById('autoForm').submit();
</script>

98. How do you prevent form submission on pressing the “Enter” key?

Solution:
Use JavaScript to disable form submission when the “Enter” key is pressed.

<form onkeydown="return event.key !== 'Enter'">
  <input type="text" name="inputField">
  <input type="submit" value="Submit">
</form>

99. How do you add accessibility text for screen readers in HTML?

Solution:
Use the aria-label attribute to provide an accessible name for screen readers.

<button aria-label="Close window">X</button>

100. How do you define a drop-down list of predefined email domains in HTML?

Solution:
Use the <datalist> tag to define predefined options for the input field.

<input list="emailDomains" name="email">
<datalist id="emailDomains">
  <option value="@gmail.com">
  <option value="@yahoo.com">
  <option value="@outlook.com">
</datalist>

Share on Facebook

Post on X

Save