PART 2 - HTML Interview Questions and Expert Answers 2024: Cracking the Code to Land Your Job!

By -

PART 2 - HTML Interview Questions and Answers 2023

Hope you have gone through the Part - 1 set of Questions which I have posted earlier. If not Please finish that and come back for this part to cover from the basic questions. I believe this would help to refresh the important concepts during your preparation.

26. How can you create an HTML link that sends an email when clicked?

<a href="mailto:contact@example.com">Send Email</a>

Output:

Send Email

27. How can you add an audio file to a web page?

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

Output:



28. How can you embed a video in a web page?

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Output:



29. How can you create a hyperlink that jumps to a specific section of the same page?

<a href="#section2">Jump to Section 2</a>
<section id="section2">
  <p>I am section 2</p><!-- Content of section 2 -->
</section>

Output:

Jump to Section 2

I am section 2



30. How to draw Grpahics in HTML?

Graphics defined by SVG(Scalable Vector Graphics) is in XML format. You can create simple SVG with code like below:

 <h1>My first SVG</h1>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>


Output:


   
   Sorry, your browser does not support inline SVG.

31. How can you create a form with multiple input fields?

  <form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br>
  
  <input type="submit" value="Submit">
</form>

Output:





32. How can you create a hyperlink that downloads a file when clicked?

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

Output:

Download PDF

33. How to embed Youtube videos in your web page?

You can define an iframe element in to embed youtube video in your web page and also you can Use the width and height attributes to specify the dimension of the player

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

Output:

34. How can you add a tooltip to an element in HTML?

A tooltip is often used to specify extra information about an element or something. Tooltip that appears when the user moves the mouse over an element.

You can use the title attribute to add a tooltip to an element. Example:

<a href="#" title="Click me for more info">Learn More</a>

Output:

Learn More

35. How can you add a background image to an element in HTML?

You can use CSS to add a background image. Example:

 
<div class="background-image"></div>

css:
   
 .background-image {
  background-image: url('image.jpg');
  background-size: cover;
  width: 100px;
  height: 100px;
}

Output:



36. How can you create a responsive image that adjusts its size based on the screen width?

Use CSS with the max-width property:

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

Output:

Responsive Image

37. How can you create a navigation bar (navbar) using an unordered list?

  <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Output:



38. How can you create a horizontal rule (line) in HTML?

<hr>

Output:



39. How can you create a clickable image in HTML?

<a href="https://www.example.com">
  <img src="image.jpg" alt="Clickable Image">
</a>

Output:

Clickable Image

40. How can you add a comment that can be seen by users with disabilities?

Use the '<!-- -->' comment syntax, as screen readers will read it aloud: 
<!DOCTYPE html>
<html>
<head>
  <title>My Web Page </title>
</head>
<body>
 <!-- This is a comment. It will not be displayed in the browser output.
 But screen readers will read it -->
  <h1>Hello, World!</h1>   
</body>
</html>

41. How can you set the max numbers of characters allowed in the input field?

   <input type="text" maxlength="10">

Output:

You can type only 10 character input not more than that as maxlength value is 10.



42. How can you add a video that autoplays when the page loads?

 <video width="320" height="240" autoplay>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>


43. How can you create a responsive design using media queries?

<link rel="stylesheet" media="screen and (max-width: 600px)" href="styles-mobile.css">
<link rel="stylesheet" media="screen and (min-width: 601px)" href="styles-desktop.css">

44. How can you add a clickable telephone link for mobile users?

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

Output:

Call Us

45. How can you create a button that submits a form?

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

Output:



46. How can you add a favicon to a web page?

Place a favicon.ico file in the root directory of your website and add the following code in the <head> section:

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

The Favicon image format can be png or svg too.

47. How can you create a responsive navigation menu that collapses into a dropdown on small screens?

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 
CSS:

 @media (max-width: 768px) {
  .menu {
    display: none;
  }
  .menu.active {
    display: block;
  }
} 
 
JAVASCRIPT:
 
 document.querySelector('.menu').addEventListener('click', () => {
  document.querySelector('.menu').classList.toggle('active');
});

Output:


48. How can you create a hyperlink that opens an email client with a pre-filled subject and body?

<a href="mailto:contact@example.com?subject=Hello&body=I%20have%20a%20question">Email Us</a>

Output:

Email Us

49. How can you create a responsive two-column layout using CSS Flexbox?

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

CSS:

.container {
  display: flex;
}
.column {
  flex: 1;
  padding: 10px;
}

50. How can you create an HTML element that is hidden initially and becomes visible when clicked?

   
HTML:

<button id="toggleButton">Toggle Content</button>
<div id="hiddenContent" style="display: none;">This content is hidden.</div>

JAVASCRIPT:

document.getElementById('toggleButton').addEventListener('click', () => {
  const hiddenContent = document.getElementById('hiddenContent');
  hiddenContent.style.display = hiddenContent.style.display === 'none' ? 'block' : 'none';
});

Next set of Questions are on the way! Keep Reading and Supporting!!

Some of the examples you have to try on your own as it needs to be structured with the proper completion of a script and tags. For image, audio and video files, please try using your local sources and check.

Gear up with your HTML knowledge, and get ready to rock that interview!

Comments

Post a Comment

Popular posts from this blog

How to Build and Grow an Effective Email List in 2024?

By -
Image
How to Build and Grow an Effective Email List in 2024 | Proven Strategies for Success How to Build and Grow an Effective Email List in 2024: The Ultimate Step-by-Step Guide Table of Contents Why Your Email List is Your Secret Weapon in 2024 Start with a Clear Goal: What’s Your Why? Create Irresistible Lead Magnets Optimize Your Sign-Up Forms: Make It Easy Use Social Media to Drive Sign-Ups Launch a Referral Program Run Contests and Giveaways Stay Compliant: Follow the Rules Nurture Your Email List with Value Test, Track, and Optimize Email marketing is still one of the most powerful tools in your marketing arsenal—especially in 2024. But just like any tool, it only works if you build the
Read more

What is Prototype Model?

By -
Image
The goal of prototyping based development is to counter the first two limitations of the waterfall model. This prototype is developed based on the currently known requirements. Development of the prototype obviously undergoes design, coding and testing. But each of these phases is not done very formally or thoroughly. By using this prototype, the client can get an "actual feel" of the system. Advantages It could serve as the first system. Prototyping is an attractive idea for complicated and large systems for which there is no manual  process or existing system to help determining the requirements. The customer doesn’t need to wait long as in the Linear Model. Feedback from customers are received periodically and the changes don’t come as a last minute surprise. Users are actively involved in the development It provides a better system to users, as users have natural tendency to change their mind in specifying requirements and this method of developing systems s
Read more

What is State or Graph based Testing?

By -
Image
State-based and Graph-based Testing: The Ultimate Beginner’s Guide State-based and Graph-based Testing: The Ultimate Beginner’s Guide Hey there! 👋 Today, we're talking about State-based testing and Graph-based testing , two techniques that help make sure software behaves just the way it's supposed to. And don’t worry—we’ll keep things simple with real-life examples to make it all crystal clear! Ready? Let’s get started! 🚦 What is State-based Testing? State-based testing is a technique where the software is tested by considering the various states of the system and how it transitions from one state to another based on different inputs or events. This technique is particularly useful when the software’s behavior depends on its current state. Imagine you’re driving a car. Your car’s state changes based on what you're doing, right? It could be in "Park," "Drive," "R
Read more