Ready to truly master HTML by writing real code instead of just watching tutorials? This post is your perfect companion. We’ve put together 100 HTML practice problems with clear, step-by-step solutions that make learning feel effortless and rewarding.
You’ll start with the basics like headings, paragraphs, and links, then confidently move on to forms, tables, semantic elements, and multimedia. Every challenge uses simple, everyday language so you can focus on understanding the concept, try the code yourself, and quickly check the solution.
Whether you’re a complete beginner discovering the joy of building your first webpage or you’re preparing for a front-end interview, these exercises will help you feel truly comfortable with HTML. Pick a problem, start creating, and watch your confidence grow—you’re closer than you think to building things you’ll be proud of.
Also try it: 100 CSS practice problems with solutions
1. Create a basic HTML page with the title “My First Page” and a heading that says “Hello, World!”
html
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
2. Add a paragraph describing your favorite hobby.
html
<p>I love reading books. It helps me relax and learn new things.</p>
3. Create an unordered list of three fruits.
html
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
4. Create an ordered list of the top 3 movies you like.
html
<ol>
<li>Inception</li>
<li>The Matrix</li>
<li>Interstellar</li>
</ol>
5. Add a link to https://www.example.com that opens in a new tab.
html
<a href="https://www.example.com" target="_blank">Visit Example</a>
6. Display an image named cat.jpg from the same folder with alt text “A cute cat”.
html
<img src="cat.jpg" alt="A cute cat">
7. Create a table with two rows and two columns containing numbers 1,2,3,4.
html
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
8. Create a form with a text input for name and a submit button.
html
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
9. Add a checkbox that is checked by default.
html
<input type="checkbox" id="remember" name="remember" checked> <label for="remember">Remember me</label>
10. Create a radio button group for gender (Male, Female, Other).
html
<input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label>
11. Add a multi-line text area with 3 rows and 40 columns.
html
<textarea name="comment" rows="3" cols="40"></textarea>
12. Create a dropdown (select) list of cities: New York, London, Tokyo.
html
<select name="city">
<option value="ny">New York</option>
<option value="london">London</option>
<option value="tokyo">Tokyo</option>
</select>
13. Add a horizontal line separator below a heading.
html
<h2>Section Title</h2> <hr>
14. Display a block of text using the pre tag to preserve whitespace.
html
<pre>
This text
has spaces.
</pre>
15. Use the <mark> tag to highlight a word in a sentence.
html
<p>This is a <mark>highlighted</mark> word.</p>
16. Create a numbered list inside a numbered list (nested list).
html
<ol>
<li>Item 1
<ol>
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ol>
</li>
<li>Item 2</li>
</ol>
17. Add a mailto link: contact@example.com.
html
<a href="mailto:contact@example.com">Email us</a>
18. Create a link that jumps to a specific section of the page using an anchor.
html
<a href="#section2">Go to Section 2</a> <h2 id="section2">Section 2</h2>
19. Add a button that says “Click Me” with no functionality (just the element).
html
<button>Click Me</button>
20. Use the strong and em tags to bold and italicize text.
html
<p><strong>Bold text</strong> and <em>italic text</em>.</p>
21. Create a simple footer with copyright text.
html
<footer>
<p>© 2025 My Website</p>
</footer>
22. Add a video embedded from a local file video.mp4 with controls.
html
<video src="video.mp4" controls width="400"></video>
23. Embed an audio file song.mp3 with controls.
html
<audio src="song.mp3" controls></audio>
24. Create a description list (dl) for a term and its definition.
html
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
25. Add a hidden input field in a form.
html
<input type="hidden" name="user_id" value="12345">
26. Use the fieldset and legend to group form elements.
html
<fieldset>
<legend>Personal Information</legend>
<label>Name: <input type="text"></label>
</fieldset>
27. Create a password input field with a minimum length validation (HTML5).
html
<input type="password" name="pwd" minlength="8">
28. Add a number input field that accepts values from 1 to 10.
html
<input type="number" name="quantity" min="1" max="10">
29. Add a date picker input.
html
<input type="date" name="birthday">
30. Create an email input field with built-in validation.
html
<input type="email" name="email" required>
31. Use the datalist to provide autocomplete suggestions for a text input.
html
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>
32. Display a progress bar at 50%.
html
<progress value="50" max="100"></progress>
33. Add a meter element showing 75%.
html
<meter value="0.75"></meter>
34. Use the figure and figcaption to caption an image.
html
<figure>
<img src="mountain.jpg" alt="Mountain">
<figcaption>Beautiful mountain view</figcaption>
</figure>
35. Create a table with header cells (th) for Name, Age, City.
html
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
</table>
36. Merge two columns using colspan in a table.
html
<table border="1">
<tr>
<td colspan="2">Merged Columns</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
37. Merge two rows using rowspan in a table.
html
<table border="1">
<tr>
<td rowspan="2">Merged Row</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</table>
38. Create a table with alternating row colors using inline style (just for practice).
html
<table border="1">
<tr style="background-color:lightgray"><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr style="background-color:lightgray"><td>Row 3</td></tr>
</table>
39. Use the small tag to make text smaller.
html
<p>This is normal text <small>and this is small</small>.</p>
40. Use the sub and sup tags for subscript and superscript.
html
<p>H<sub>2</sub>O and E=mc<sup>2</sup></p>
41. Add a tooltip to a link (title attribute).
html
<a href="#" title="This is a tooltip">Hover over me</a>
42. Create a blockquote with a cite attribute.
html
<blockquote cite="https://example.com">
This is a quoted text.
</blockquote>
43. Use the abbr tag to define an abbreviation.
html
<abbr title="World Health Organization">WHO</abbr>
44. Insert a line break after a sentence.
html
<p>First sentence.<br>Second sentence.</p>
45. Use the bdo tag to reverse text direction.
html
<bdo dir="rtl">This text will be reversed</bdo>
46. Embed a YouTube video using iframe (use placeholder URL).
html
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0"></iframe>
47. Create a navigation bar with three links (Home, About, Contact).
html
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
48. Add a search input with a search button.
html
<input type="search" name="q" placeholder="Search..."> <button type="submit">Search</button>
49. Use the time tag to represent a date.
html
<p>The event is on <time datetime="2025-12-25">Christmas 2025</time>.</p>
50. Add a file upload input.
html
<input type="file" name="resume">
51. Create a range slider with values from 0 to 100.
html
<input type="range" name="volume" min="0" max="100" value="50">
52. Add a reset button to a form.
html
<input type="reset" value="Reset Form">
53. Use the output element to display a calculation.
html
<form oninput="result.value=Number(a.value)+Number(b.value)">
<input type="number" name="a"> +
<input type="number" name="b"> =
<output name="result"></output>
</form>
54. Create a simple header with a logo and a title.
html
<header>
<img src="logo.png" alt="Logo" width="50">
<h1>My Site</h1>
</header>
55. Add a sidebar using the aside element.
html
<aside>
<p>This is a sidebar with additional info.</p>
</aside>
56. Group a heading and a paragraph inside an article tag.
html
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
57. Use the details and summary tags to create a collapsible section.
html
<details>
<summary>Click to expand</summary>
<p>Hidden content here.</p>
</details>
Also try it: 100 JavaScript (JS) practice problems with solutions
58. Create an address block using the address tag.
html
<address>
Written by <a href="mailto:john@example.com">John Doe</a>.<br>
123 Main St, Anytown, USA
</address>
59. Use the cite tag to reference a work of art.
html
<p>I love <cite>The Starry Night</cite> by Van Gogh.</p>
60. Add a span tag to style a portion of text.
html
<p>This is a <span style="color:red;">red</span> word.</p>
61. Create an inline frame (iframe) that loads Google Maps embed (placeholder).
html
<iframe src="https://www.google.com/maps/embed?pb=!1m18..." width="600" height="450" style="border:0;" allowfullscreen></iframe>
62. Use the div to create a container for two paragraphs.
html
<div>
<p>First paragraph in container.</p>
<p>Second paragraph.</p>
</div>
63. Make an image clickable so it opens a link.
html
<a href="https://example.com">
<img src="button.png" alt="Clickable image">
</a>
64. Use the noscript tag to display content when JavaScript is disabled.
html
<noscript>Your browser does not support JavaScript!</noscript>
65. Create a form with a color picker.
html
<input type="color" name="favcolor">
66. Add a placeholder text to a text input.
html
<input type="text" name="username" placeholder="Enter username">
67. Disable a button in a form.
html
<button disabled>Disabled Button</button>
68. Set the default selected option in a dropdown.
html
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
</select>
69. Use the optgroup to group options in a dropdown.
html
<select>
<optgroup label="Fruits">
<option>Apple</option>
<option>Banana</option>
</optgroup>
<optgroup label="Vegetables">
<option>Carrot</option>
<option>Broccoli</option>
</optgroup>
</select>
70. Create a link that downloads a file (using download attribute).
html
<a href="document.pdf" download>Download PDF</a>
71. Add a background image to a div using inline style (just for practice).
html
<div style="background-image: url('background.jpg'); height: 200px;">Content</div>
72. Use the ins and del tags to show inserted and deleted text.
html
<p><del>Old price</del> <ins>New price</ins></p>
73. Create a simple breadcrumb navigation using an unordered list.
html
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li>Current Page</li>
</ul>
74. Use the main tag for the main content of the page.
html
<main>
<h1>Welcome</h1>
<p>This is the main content area.</p>
</main>
75. Create a table caption using caption tag.
html
<table border="1">
<caption>Monthly Savings</caption>
<tr><th>Month</th><th>Savings</th></tr>
<tr><td>January</td><td>$100</td></tr>
</table>
76. Add a rel="noopener" to an external link to improve security.
html
<a href="https://example.com" target="_blank" rel="noopener">External Link</a>
77. Use the kbd tag to indicate keyboard input.
html
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
78. Display a simple math formula using HTML entities.
html
<p>45 ÷ 9 = 5</p>
79. Create a form that accepts a URL input.
html
<input type="url" name="website" placeholder="https://example.com">
80. Add a tel input for phone number with pattern validation.
html
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
81. Use the wbr tag to suggest a line break opportunity.
html
<p>Thisisaverylongword<wbr>thatmightbreak.</p>
82. Create an image map with two clickable areas (rectangles).
html
<img src="planets.jpg" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,50,50" href="sun.htm" alt="Sun">
<area shape="rect" coords="100,100,150,150" href="mercury.htm" alt="Mercury">
</map>
83. Use the ruby, rt, and rp tags for annotations.
html
<ruby>
<rt>Kan</rt>
<rt>ji</rt>
</ruby>
84. Add a global attribute contenteditable to make a paragraph editable.
html
<p contenteditable="true">You can edit this text.</p>
85. Create a form with multiple submit buttons (different values).
html
<form action="/submit" method="post">
<input type="text" name="data">
<button type="submit" name="action" value="save">Save</button>
<button type="submit" name="action" value="preview">Preview</button>
</form>
86. Use the localStorage API to store and retrieve data (not pure HTML, but with a script).
html
<button onclick="localStorage.setItem('name','John')">Save</button>
<button onclick="alert(localStorage.getItem('name'))">Retrieve</button>
87. Create a self-closing link for an external CSS stylesheet.
html
<link rel="stylesheet" href="styles.css">
88. Add a JavaScript alert on page load using inline <script>.
html
<script>
alert("Welcome to the page!");
</script>
89. Use the spacer tag? (Not valid in HTML5; instead use CSS margin/padding).
90. Create a meta viewport tag for responsive design.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
91. Set a refresh meta tag to reload page after 5 seconds.
html
<meta http-equiv="refresh" content="5">
92. Use the base tag to set a base URL for all relative links.
html
<base href="https://www.example.com/">
93. Create a simple gallery with thumbnails linked to larger images.
html
<a href="large1.jpg"><img src="thumb1.jpg" alt="Thumb 1"></a> <a href="large2.jpg"><img src="thumb2.jpg" alt="Thumb 2"></a>
94. Add a full‑page background color using body style.
html
<body style="background-color: lightblue;">
95. Use the onmouseover and onmouseout events on an image.
html
<img src="happy.jpg" onmouseover="this.src='sad.jpg'" onmouseout="this.src='happy.jpg'">
96. Create a table with a fixed header that scrolls? (Not pure HTML; requires CSS).
97. Use the charset meta tag to specify UTF‑8 encoding.
html
<meta charset="UTF-8">
98. Add a favicon link to the page.
html
<link rel="icon" type="image/x-icon" href="favicon.ico">
99. Embed a Google Font using link tag.
html
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
100. Write a complete, minimal HTML5 document structure.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Also try it: 100 Java practice problems with solutions
Final Thoughts
You made it — 100 HTML problems worked through, line by line. That’s no small achievement, and you can genuinely feel proud. You didn’t just skim or watch. You wrote real markup, fixed broken tags, structured forms, built tables, and brought meaning to pages with semantic elements. That’s the work of someone who’s truly learning.
HTML might seem simple on the surface, but the comfort you’ve built here will carry into everything else you do on the web — CSS, JavaScript, accessibility, and beyond. Practice like this turns guesswork into instinct, and right now your fingers already know more than they did when you started.
Keep this collection close. Come back on days when you feel rusty, and don’t forget to build your own little projects with what you’ve practiced. Share it with someone who’s just starting out — teaching is the next level of mastery.
You’re not just someone who understands HTML anymore. You’re someone who can build. That’s a wonderful feeling, and you’ve earned it. Happy coding!