Table of Contents
Mastering HTML and markup skills is essential for creating well-structured web pages. Practice problems with complete solutions can help learners understand the core concepts and improve their coding proficiency. In this article, we present a series of practice problems designed to reinforce your markup skills, along with detailed solutions to guide your learning process.
Practice Problem 1: Create a Simple Web Page Structure
Construct a basic HTML document that includes a header, a main content section, and a footer. Use appropriate semantic tags and include sample text in each section.
- Use
<header>for the page header. - Use
<main>for the main content area. - Use
<footer>for the page footer.
Solution:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Simple Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is the main content area.</p>
</main>
<footer>
<p>Contact us at [email protected]</p>
</footer>
</body>
</html>
Practice Problem 2: Create a Navigation Menu
Design a navigation bar with three links: Home, About, and Contact. Use an unordered list inside a <nav> element.
- Wrap the list in a
<nav>tag. - Use
<ul>and<li>for list items. - Use
<a>tags for links.
Solution:
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
Practice Problem 3: Add an Image and Caption
Insert an image with a caption describing it below. Use semantic tags to enhance accessibility and clarity.
Hint: Use <figure> and <figcaption>.
Solution:
<figure>
<img src=”image.jpg” alt=”Description of image”>
<figcaption>This is a caption describing the image.</figcaption>
</figure>
Practice Problem 4: Create a Table
Construct a table displaying three countries and their capitals. Use semantic table tags and include headers.
Hint: Use <table>, <thead>, <tbody>, <tr>, <th>, and <td>.
Solution:
<table>
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
</thead>
<tbody>
<tr>
<td>France</td>
<td>Paris</td>
</tr>
<tr>
<td>Japan</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Brazil</td>
<td>Brasília</td>
</tr>
</tbody>
</table>
Practice Problem 5: Create a Form
Design a simple contact form with fields for name, email, and message. Include a submit button.
Hint: Use <form>, <label>, <input>, and <textarea>.
Solution:
<form action=”#” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message” rows=”4″ required></textarea>
<button type=”submit”>Send</button>
</form>