HTML Hands-On Interview Questions with Answers
1. Create a simple webpage layout with header, footer, sidebar, and content section.
<!DOCTYPE html>
<html>
<head>
<title>Simple Layout</title>
</head>
<body>
<header><h1>My Website</h1></header>
<nav>Sidebar: <a href="#">Link 1</a> | <a href="#">Link 2</a></nav>
<main>
<section><h2>Content Section</h2><p>This is the main content.</p></section>
</main>
<footer><p>© 2025 My Website</p></footer>
</body>
</html>
2. Create a form with name, email, password, gender, checkbox, and submit.
<form>
<label>Name: <input type="text" name="name" required></label><br>
<label>Email: <input type="email" name="email" required></label><br>
<label>Password: <input type="password" name="password" required></label><br>
Gender:<br>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label><br>
<label><input type="checkbox" name="terms" required> I agree to the terms</label><br>
<button type="submit">Submit</button>
</form>
3. Create a table with 3 rows and 4 columns. First row is a header.
<table border="1">
<tr>
<th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th>
</tr>
<tr>
<td>Row 1</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<td>Row 2</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
</table>
4. Embed a YouTube video in HTML.
<iframe width="560" height="315"
src="[Link]
frameborder="0" allowfullscreen></iframe>
5. Link to another page and open in a new tab.
<a href="[Link] target="_blank">Visit Example</a>
6. Use semantic tags for a blog post layout.
<article>
<header>
<h2>Blog Title</h2>
<time datetime="2025-04-11">April 11, 2025</time>
</header>
<p>This is a blog post paragraph.</p>
</article>
7. Create an HTML5 page with meta tags for SEO.
<!DOCTYPE html>
<html>
<head>
<title>SEO Page</title>
<meta charset="UTF-8">
<meta name="description" content="A sample SEO-friendly HTML page.">
<meta name="keywords" content="HTML, SEO, Meta Tags">
<meta name="author" content="John Doe">
</head>
<body>
<h1>SEO Optimized Page</h1>
</body>
</html>
8. Responsive image using `srcset`.
<img
src="[Link]"
srcset="[Link] 768w, [Link] 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Responsive Image">
9. Add audio and video with fallback.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
10. Use `datalist` for input suggestions.
<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
11. HTML5 form validation.
<form>
<input type="text" name="username" required><br>
<input type="email" name="email" required><br>
<input type="number" name="age" min="18" max="100"><br>
<input type="submit">
</form>
12. Accessible button using ARIA.
<button aria-label="Close the dialog">X</button>
13. Fix broken form (example).
<!-- Before -->
<form>
<input name="email">
<button>Submit</button>
</form>
<!-- After -->
<form action="/submit" method="POST">
<label>Email: <input type="email" name="email" required></label>
<button type="submit">Submit</button>
</form>
14. Fix nesting/layout issue (example).
<!-- Incorrect -->
<p><div>Text inside div</div></p>
<!-- Correct -->
<div><p>Text inside paragraph</p></div>
15. Fix accessibility issues.
<!-- Before -->
<input type="text">
<!-- After -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" aria-required="true">
16. Predict output.
<a href="#">Click here</a>
<button onclick="alert('Hello!')">Press me</button>
Output: A link and a button that shows an alert saying "Hello!" when clicked.
17. Why avoid multiple `<h1>` tags?
HTML5 allows it within different sections, but overusing them:
- Hurts SEO
- Confuses screen readers
- Breaks document hierarchy
Best practice: One `<h1>` per main page title.
18. Build product cards (basic).
<div class="product">
<h2>Product Name</h2>
<img src="[Link]" alt="Product">
<p>Price: $99</p>
</div>
19. Navigation bar with anchor links.
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
20. Simple newsletter template.
<!DOCTYPE html>
<html>
<body>
<h1>Monthly Newsletter</h1>
<p>Hello Subscriber!</p>
<p>Here are this month's updates...</p>
<footer>Unsubscribe | Contact Us</footer>
</body>
</html>
