HTML Examples and Exercises

These HTML examples and exercises bring together everything from the tutorial. Study the profile page below, run it, then try the exercises to change and extend it.

Project: Personal Profile Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ayesha Malik | Web Developer</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 640px; margin: auto; padding: 16px; line-height: 1.6; }
    header { text-align: center; }
    img { border-radius: 50%; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 6px; text-align: left; }
    label { display: block; margin-top: 8px; }
  </style>
</head>
<body>
  <header>
    <img src="https://picsum.photos/id/64/120/120" alt="Portrait of Ayesha" width="120" height="120">
    <h1>Ayesha Malik</h1>
    <p>Frontend developer from <strong>Karachi</strong></p>
    <nav><a href="#skills">Skills</a> | <a href="#projects">Projects</a> | <a href="#contact">Contact</a></nav>
  </header>
  <main>
    <section id="skills">
      <h2>Skills</h2>
      <ul><li>HTML and CSS</li><li>JavaScript</li><li>Accessibility</li></ul>
    </section>
    <section id="projects">
      <h2>Projects</h2>
      <table>
        <thead><tr><th>Project</th><th>Year</th></tr></thead>
        <tbody>
          <tr><td>Recipe finder</td><td>2025</td></tr>
          <tr><td>Weather dashboard</td><td>2026</td></tr>
        </tbody>
      </table>
    </section>
    <section id="contact">
      <h2>Contact</h2>
      <form>
        <label for="n">Name</label><input id="n" name="name" required>
        <label for="e">Email</label><input id="e" type="email" name="email" required>
        <p><button>Send</button></p>
      </form>
    </section>
  </main>
  <footer><p>&copy; 2026 Ayesha Malik</p></footer>
</body>
</html>

What This Example Uses

• Head with charset, viewport, title and internal CSS
• Semantic header, nav, main, section and footer
• An image with alt text, headings in order and a bulleted list
• A table with thead and tbody
• A form with labels and validation
• In-page anchor links and an HTML entity

Exercises

• Change the name, city and photo to your own
• Add a fourth skill and make it a nested list of tools
• Add a "Link" column to the projects table with links that open in a new tab
• Add a message textarea and a select dropdown for the enquiry type to the form
• Wrap each project in an <article> instead of a table row
• Add a meta description and check the page in a phone-sized window

Validate Your HTML

Paste your code into the W3C Markup Validation Service (validator.w3.org) to catch missing end tags and invalid attributes. Fixing validator warnings is one of the best ways to improve your HTML skills. Next, continue with the CSS tutorial to make your pages look great.

Frequently asked questions

What are good HTML projects for beginners?

A personal profile page, a recipe page, a restaurant menu, a product landing page and a simple blog layout are all great first projects.

How can I practice HTML online?

Use the Try it Yourself editor on each lesson, or online playgrounds like CodePen. Rebuilding pages you like is excellent practice.

What should I learn after HTML?

Learn CSS next for styling and layout, then JavaScript for interactivity.