Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
HTML · Question Set
Interview Coding Challenges (Advanced) interview questions for placements and exams.
Questions
14
Included in this set
Subject
HTML
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for HTML.
The input type='email' provides built-in validation for proper email format and displays an optimized keyboard on mobile devices for typing email addresses.
<form> <label>Email:</label> <input type="email" required> <button>Register</button> </form>
For complete preparation, combine this set with full subject-wise practice for HTML. You can also explore other subjects and sets from the links below.
The nav element semantically represents a section of navigation links. It helps screen readers and improves SEO by identifying navigational regions clearly.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>To make tables responsive, wrap them in a container with overflow-x: auto. This allows horizontal scrolling on smaller screens without breaking the layout.
<div style="overflow-x:auto;">
<table>
<tr><th>Name</th><th>Email</th></tr>
<tr><td>John</td><td>john@example.com</td></tr>
</table>
</div>figure and figcaption are ideal for image galleries because they provide semantic meaning by grouping an image with its description or caption, improving accessibility and SEO.
<figure> <img src="image.jpg" alt="Beautiful landscape"> <figcaption>Mountain View</figcaption> </figure>
The input type='range' provides a slider control for selecting numeric values within a defined range. It enhances user experience in settings, filters, and customization interfaces.
<label>Volume:</label> <input type="range" min="0" max="100" value="50">
A well-structured webpage uses semantic elements to define distinct sections like header, main, and footer. This enhances readability, accessibility, and SEO. Use <header> for the site header, <main> for the main content area, and <footer> for closing information.
<!DOCTYPE html> <html lang="en"> <head><title>Simple Page</title></head> <body> <header><h1>Website Header</h1></header> <main><p>Main content goes here.</p></main> <footer><p>© 2025 Company</p></footer> </body> </html>
Forms collect user input. HTML5 introduces input types like email, password, and radio. Use labels for accessibility and proper structure.
<form> <label>Name:</label><input type="text" required><br> <label>Email:</label><input type="email" required><br> <label>Password:</label><input type="password" required><br> <label>Gender:</label> <input type="radio" name="gender">Male <input type="radio" name="gender">Female<br> <button>Register</button> </form>
A responsive navigation menu uses unordered lists styled with CSS. For small screens, you can stack items vertically or hide them behind a hamburger icon.
<nav>
<ul style="list-style:none;display:flex;gap:10px;">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>To make a table responsive, wrap it in a div with overflow-x: auto and ensure table headers remain clear. This avoids layout breaks on narrow screens.
<div style="overflow-x:auto;"> <table> <tr><th>Name</th><th>Email</th><th>Role</th></tr> <tr><td>John</td><td>john@example.com</td><td>Admin</td></tr> </table> </div>
A clean gallery layout can be created using a div container with display:grid. Use figure and figcaption for semantic images and captions.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;">
<figure>
<img src="img1.jpg" alt="Photo 1" style="width:100%">
<figcaption>Photo 1</figcaption>
</figure>
<figure>
<img src="img2.jpg" alt="Photo 2" style="width:100%">
<figcaption>Photo 2</figcaption>
</figure>
</div>HTML5 introduces a variety of input types for better UX and validation. Using them improves accessibility and device-optimized input.
<form> <input type="text" placeholder="Name"> <input type="email" placeholder="Email"> <input type="number" placeholder="Age"> <input type="range" min="0" max="100"> <input type="color" value="#ff0000"> <button>Submit</button> </form>
A semantic blog structure should include a header for title, article for post content, aside for related links, and footer for author or copyright details. This structure improves readability and accessibility.
<header><h1>My Tech Blog</h1></header>
<main>
<article>
<h2>Understanding HTML5</h2>
<p>Semantic HTML makes content meaningful...</p>
</article>
<aside>
<h3>Related Posts</h3>
<ul><li><a href="#">Accessibility in HTML</a></li></ul>
</aside>
</main>
<footer><p>© 2025 Blog</p></footer>A valid HTML5 document must begin with <!DOCTYPE html> followed by html, head, and body sections. The head contains metadata like title, and the body contains visible content.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Webpage</title> </head> <body> <h1>Welcome!</h1> </body> </html>
A semantic blog layout typically includes header for introductory content, main for the main article section, article for posts, and footer for author info or related links.
<header>
<h1>My Blog</h1>
</header>
<main>
<article>
<h2>Post Title</h2>
<p>Post content...</p>
</article>
</main>
<footer>
<p>© 2025 Blog</p>
</footer>