HTML Interview Questions and Answers (Set 10)

Introduction

This tenth set of HTML interview questions focuses on advanced concepts and practical use cases. The questions and answers are designed to ensure a thorough understanding of HTML’s capabilities and its applications.

161. What is the purpose of the `<base>` tag in HTML?

Answer: Specifies a base URL for all relative links in a document.
```
<head>
  <base href="https://example.com/">
</head>
<a href="page.html">Visit Page</a>
```
Explanation: The <base> tag sets the base URL for all relative URLs in the document, ensuring consistent navigation paths.

162. How do you create a multi-column layout in HTML?

Answer: Use the CSS column-count property:
```
<style>
  .columns {
    column-count: 3;
  }
</style>
<div class="columns">
  <p>Column 1</p>
  <p>Column 2</p>
  <p>Column 3</p>
</div>
```
Explanation: The column-count property divides the content into multiple columns, creating a responsive layout.

163. How do you specify a text direction in HTML?

Answer: Use the dir attribute:
```
<p dir="rtl">This text is displayed from right to left.</p>
```
Explanation: The dir attribute specifies the text direction (ltr for left-to-right or rtl for right-to-left).

164. What is the `<picture>` element used for?

Answer: Provides multiple image sources for responsive design.

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="image-default.jpg" alt="Responsive Image">
</picture>

Explanation: The <picture> element allows the browser to choose the most appropriate image based on the device’s screen size or resolution.

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

Answer: Use the mailto: scheme in the <a> tag:
```
<a href="mailto:example@example.com">Send Email</a>
```
Explanation: The mailto: scheme opens the user’s email client to compose a message to the specified address.

166. What is the `<meter>` tag used for?

Answer: Represents a scalar measurement within a known range.
```
<meter value="0.6" min="0" max="1">60%</meter>
```
Explanation: The <meter> element visually represents a value within a range, such as a progress bar.

167. How do you include downloadable files in HTML?

Answer: Use the download attribute in the <a> tag:
```
<a href="file.pdf" download>Download PDF</a>
```
Explanation: The download attribute prompts the browser to download the file instead of opening it.

168. How do you create a responsive navigation menu?

Answer: Use a combination of HTML and CSS media queries:

<style>
  nav {
    display: flex;
  }
  @media (max-width: 600px) {
    nav {
      flex-direction: column;
    }
  }
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Explanation: Media queries adjust the layout based on the screen size, ensuring responsiveness.

169. What is the `<address>` element?

Answer: Represents contact information for the author or owner of a document.
```
<address>
  Contact us at: <a href="mailto:support@example.com">support@example.com</a>
</address>
```
Explanation: The <address> element is semantic and improves accessibility by marking up contact details.

170. How do you embed a Google Map in HTML?

Answer: Use an <iframe> tag with the Google Maps embed link:

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy">
</iframe>

Explanation: The <iframe> tag embeds Google Maps, providing a customizable interactive map.

171. How do you create a password field in a form?

Answer: Use the type="password" attribute in the <input> tag:
```
<input type="password" name="user_password">
```
Explanation: The password input type masks user input for security.

172. What is the `<cite>` tag?

Answer: Represents the title of a work, such as a book, movie, or song.
```
<p>The book <cite>1984</cite> was written by George Orwell.</p>
```
Explanation: The <cite> tag semantically marks up titles for accessibility and SEO.

173. How do you create a scrollable div in HTML?

Answer: Use the CSS overflow property:

<style>
  .scrollable {
    width: 300px;
    height: 200px;
    overflow: scroll;
  }
</style>
<div class="scrollable">
  <p>Content goes here...</p>
</div>

Explanation: The overflow property controls the scroll behavior of a container when content exceeds its dimensions.

174. How do you create a link that calls a JavaScript function?

Answer: Use the href="javascript:void(0);" attribute and onclick handler:
```
<a href="javascript:void(0);" onclick="alert('Hello!')">Click Me</a>
```
Explanation: The javascript:void(0); prevents the default link behavior, while onclick triggers a JavaScript function.

175. How do you create an image slider in HTML?

Answer: Use a combination of <div> elements and JavaScript:

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>
<script>
  // JavaScript for slider functionality
</script>

Explanation: Image sliders require a mix of HTML, CSS, and JavaScript for smooth transitions.

176. How do you include a progress spinner in HTML?

Answer: Use the CSS @keyframes and <div> elements:

<style>
  .spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
<div class="spinner"></div>

Explanation: The spinner provides visual feedback during loading operations.

Conclusion

This set of HTML interview questions highlights practical use cases and responsive design techniques. These advanced topics prepare candidates for challenging interview scenarios and real-world applications.

161. What is the purpose of the <base> tag in HTML?