Skip to content

HTML practice exercises with solutions

  • by

In this tutorial, we are sharing some HTML practice exercises with solutions. These questions are very easy so do try first your self then go for solutions.

HTML practice exercises with examples of solutions

Here are direct codes with every question.

1. Write a code for basic HTML webpage with a heading, a paragraph, and an image.

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to my webpage</h1>
    <p>This is a paragraph of text.</p>
    <img src="myimage.jpg" alt="My Image">
  </body>
</html>

Output:

basic HTML webpage

2. Wirte a HTML code with simple form with two input fields and a submit button.

<!DOCTYPE html>
<html>
  <head>
    <title>My Form</title>
  </head>
  <body>
    <form>
      <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>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Output:

HTML practice exercises with solutions

3. Create a HTML webpage with a table have three columns and three rows.

<!DOCTYPE html>
<html>
  <head>
    <title>My Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
      </tr>
      <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
        <td>Row 3, Column 3</td>
      </tr>
    </table>
  </body>
</html>

Output:

HTML webpage with a table

4. Add a dropdown menu with three options in HTML webpage.

<!DOCTYPE html>
<html>
  <head>
    <title>My Dropdown Menu</title>
  </head>
  <body>
    <label for="dropdown">Choose an option:</label>
    <select id="dropdown" name="dropdown">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </body>
</html>

Output:

HTML dropdown menu

5. Write a code for a hyperlink that opens a new tab when clicked.

<!DOCTYPE html>
<html>
  <head>
    <title>My Hyperlink</title>
  </head>
  <body>
    <a href="https://www.eyehunts.com" target="_blank">Visit EyeHunts.com</a>
  </body>
</html>

There are many more HTML elements and attributes to explore and experiment with.

Do comment if you have any doubts or suggestions on this HTML basic code.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published. Required fields are marked *