Home » Exercises » HTML Exercises » HTML Top Exercises

HTML Top Exercises

Steps to Create a Webpage in HTML using Notepad

Description: Create a web page in HTML using Notepad, save it, and open it in a browser.

Hint:

  • Open Notepad, write the HTML code and save the file as index.html with the type “All Files”.
  • Double-click the file to open it in the browser.

HTML code for the web page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This page was created using Notepad.</p>
</body>
</html>

Output in the browser:

Output in the browser

Welcome to My Page

This page was created using Notepad.

How it works

  • Step 1: Open Notepad and type the code above.
  • Step 2: Click File, then Save As. Name the file index.html, set “Save as type” to All Files and the encoding to UTF-8.
  • Step 3: Double-click the saved file. It opens in your default browser.
  • Step 4: To change the page, edit the file, save it and refresh the browser (F5).

A detailed guide with pictures is in HTML First Program using Notepad.

Program to see difference between paragraphs & normal text with line break

Description: Write a program that shows the difference between two paragraphs and a single text with line breaks.

Hint:

  • Use two <p> tags for the paragraphs.
  • Use the <br> tag inside one paragraph for the line break.

Paragraphs and line break program

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Paragraph vs line break</title>
</head>
<body>
  <h3>Two paragraphs</h3>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>

  <h3>One paragraph with a line break</h3>
  <p>This is the first line.<br>This is the second line.</p>
</body>
</html>

Output in the browser:

Output in the browser

Two paragraphs

This is the first paragraph.

This is the second paragraph.

One paragraph with a line break

This is the first line.
This is the second line.

How it works

  • Each <p> adds a space above and below, so the paragraphs look separate.
  • <br> only moves the text to the next line. The lines stay close, as they are still one paragraph.
  • Use paragraphs for separate ideas, and <br> for things like an address or a poem.

Read HTML Paragraphs.

Write an HTML program to create a registration form

Description: Create a registration form that takes name, email, password, gender, hobbies and country, and has a Register button.

Hint:

  • Use the form tag with method="post".
  • Connect every label to its field with for and id.
  • Radio buttons of the same group must have the same name.

HTML registration form

<form action="register.php" method="post">
  <p><label for="name">Name:</label>
     <input type="text" id="name" name="name" required></p>
  <p><label for="email">Email:</label>
     <input type="email" id="email" name="email" required></p>
  <p><label for="pass">Password:</label>
     <input type="password" id="pass" name="password" required></p>

  <p>Gender:
    <input type="radio" id="m" name="gender" value="male"><label for="m">Male</label>
    <input type="radio" id="f" name="gender" value="female"><label for="f">Female</label></p>

  <p>Hobbies:
    <input type="checkbox" id="h1" name="hobby" value="reading"><label for="h1">Reading</label>
    <input type="checkbox" id="h2" name="hobby" value="music"><label for="h2">Music</label></p>

  <p><label for="country">Country:</label>
    <select id="country" name="country">
      <option value="india">India</option>
      <option value="usa">USA</option>
    </select></p>

  <button type="submit">Register</button>
</form>

Output in the browser:

Output in the browser

Gender:

Hobbies:

How it works

  • The required attribute stops the form from being sent when the field is empty.
  • type="email" checks the email format, and type="password" hides the typed text.
  • The form data goes to register.php with the POST method. That file must be made with a server language like PHP.

Read HTML Forms and HTML Input Types.

Write an HTML program to create a page layout with semantic elements

Description: Create a web page layout with a header, a navigation bar, a main area with an article and a sidebar, and a footer.

Hint:

  • Use header, nav, main, article, aside and footer.

HTML page layout with semantic tags

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Blog</title>
</head>
<body>
  <header>
    <h1>My Blog</h1>
  </header>

  <nav>
    <a href="/">Home</a> | <a href="/about">About</a>
  </nav>

  <main>
    <article>
      <h2>Learn HTML</h2>
      <p>This is the main article.</p>
    </article>
    <aside>
      <h3>Related links</h3>
      <p>Links go here.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>
</body>
</html>

Output in the browser:

Output in the browser

My Blog

Learn HTML

This is the main article.

© 2025 My Blog

How it works

  • Each semantic tag tells the meaning of its part of the page.
  • Without CSS they all stay one below another. With CSS (Flexbox or Grid) you can put the aside next to the article.

Read HTML Semantic Elements. A div based version is in Basic HTML page layout using div tags.