HTML Interview Questions with Answers and Code Examples Part-4

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

Introduction

Imagine you're building a house. HTML (Hypertext Markup Language) is like the strong foundation that holds everything together. Knowing some cool HTML tricks can make you a superstar in job interviews.

Welcome back to the second part of our series! We're going to start from the basics and gradually climb up to advanced concepts, just like taking steps up a ladder of knowledge.

In this series, we're unlocking the answers to the first 10 tricky HTML interview questions. Don't worry, we'll keep it super easy with examples. These answers will give you a boost of confidence during interviews, showing off what you know. Let's dive into these questions!

If you're curious to learn more about HTML and its magic, check out the official guide from the World Wide Web Consortium (W3C) at HTML — World Wide Web Consortium.

For nifty tips and tricks on making HTML work like a charm, the Mozilla Developer Network (MDN) has a user-friendly guide just for you. Discover it at HTML — Mozilla Developer Network.

And if you're interested in making your website easy for everyone to use, the Web Accessibility Initiative (WAI) website is a goldmine of helpful resources. Find them at Web Accessibility Initiative.

Remember, these extra resources can provide more information to help you grasp HTML better, along with the questions and examples we're covering.

Table Of Contents

1. How can you create a responsive image that scales with the screen size?
2. What is the purpose of the <figure> and <figcaption> tags?
3. How can you add a background image to a webpage using HTML?
4. How can you create a responsive video that adjusts to different screen sizes?
5. How can you embed an audio file in HTML?
6. Explain the purpose of the defer attribute in <script> tags.
7. Explain the purpose of the pattern attribute in <input> tags.
8. How can you make an HTML element draggable?
9. How can you create a sticky/fixed navigation bar in HTML?

1- How can you create a responsive image that scales with the screen size?

👉 Answer:

Use the max-width CSS property set to 100% to make an image responsive. This ensures that the image’s width adjusts to fit the container while maintaining its aspect ratio.

<img src="image.jpg" alt="A responsive image" style="max-width: 100%;">

2- What is the purpose of the <figure> and <figcaption> tags?

👉 Answer:

The tag is used to encapsulate media content, such as images or videos, along with an optional caption provided by the <figcaption> tag. It helps associate the media with its description.

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>A breathtaking view of nature.</figcaption>
</figure>

3- How can you add a background image to a webpage using HTML?

👉 Answer:

To add a background image to a webpage, you can use the background-image CSS property within the <style> tag or in an external CSS file.

<style>
  body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

4- How can you create a responsive video that adjusts to different screen sizes?

👉 Answer:

To create a responsive video, use the max-width CSS property and set the height to auto. Wrap the video element in a container to maintain its aspect ratio.

<style>
  .video-container {
    max-width: 100%;
    height: auto;
  }
</style>

<div class="video-container">
  <video src="video.mp4" controls></video>
</div>

5- How can you embed an audio file in HTML?

👉 Answer:

To embed an audio file, use the <audio> element and specify the source file using the src attribute. You can include additional attributes like controls to add playback controls.

<audio src="audio.mp3" controls></audio>

6- Explain the purpose of the defer attribute in <script> tags.

👉 Answer:

The defer attribute is used to indicate that the script should be executed after the HTML content has been parsed. It helps improve page load performance by allowing other resources to load in parallel.

<script src="script.js" defer></script>

7- Explain the purpose of the pattern attribute in <input> tags.

👉 Answer:

The pattern attribute is used to specify a regular expression pattern that the input value must match. It is commonly used for form field validation.

<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="XXX-XXX-XXXX">

8- How can you make an HTML element drag-gable?

👉 Answer:

To make an HTML element drag-gable, use the drag-gable attribute and set it to true. You can then define event handlers to control the drag-and-drop behavior.

<div draggable="true">Drag me!</div>

9- How can you create a sticky/fixed navigation bar in HTML?

👉 Answer:

To create a sticky/fixed navigation bar, use CSS to set the position of the navbar to fixed and specify a top or bottom value.

<style>
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
  }
</style>

<div class="navbar">
  <!-- Navigation links -->
</div>

10- How can you embed a YouTube video in HTML?>

👉 Answer:

To embed a YouTube video, use the <iframe> tag with the video’s embed code provided by YouTube.

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

Conclusion

In this part of our series on tricky HTML interview questions, we've dived into some really cool stuff like responsive images, video embedding, sticky navigation, and more. By understanding these tricks, you'll feel super confident in your interviews. Stay tuned for the next part, where we'll unravel even more amazing HTML secrets!

I'm curious to hear your thoughts! Feel free to share your comments.

Let's connect on Twitter, LinkedIn, and GitHub to stay updated and join the conversation!