HTML Practical Exercises – 15 Coding Challenges with Solutions

Exercise 1 – HTML Boilerplate from Memory

Task: Write a complete, valid HTML5 document from scratch. Include: DOCTYPE, html with lang attribute, head with charset, viewport, title, and body with a single h1.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Exercise 2 – Heading Hierarchy

Task: Mark up an article about HTML with a proper heading hierarchy: one h1 (page title), two h2 sections (History, Benefits), and two h3 sub-sections under History (Early HTML, HTML5).

HTML

<article>
  <h1>A Guide to HTML</h1>
  <p>HTML is the foundation of every web page.</p>

  <h2>History of HTML</h2>
  <p>HTML was created by Tim Berners-Lee in 1991.</p>

    <h3>Early HTML</h3>
    <p>The first versions were simple, supporting only text and links.</p>

    <h3>HTML5</h3>
    <p>HTML5 introduced semantic elements, canvas, video, and more.</p>

  <h2>Benefits of HTML</h2>
  <p>HTML is easy to learn, universally supported, and accessible.</p>
</article>

Exercise 3 – Navigation Menu

Task: Build a navigation bar with links to: Home, About, Courses, Blog, and Contact. Use the correct semantic element. Mark the current page (About) appropriately for accessibility.

HTML

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html" aria-current="page">About</a></li>
    <li><a href="/courses.html">Courses</a></li>
    <li><a href="/blog.html">Blog</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

Exercise 4 – Image Gallery

Task: Create an image gallery with 6 images inside a container div. Each image must have a meaningful alt text. Use figure and figcaption for each image.

HTML

<div class="gallery">
  <figure>
    <img src="images/html-structure.jpg" alt="HTML document tree diagram showing nested elements" loading="lazy">
    <figcaption>HTML Document Structure</figcaption>
  </figure>
  <figure>
    <img src="images/css-box-model.jpg" alt="CSS box model with content, padding, border, and margin layers" loading="lazy">
    <figcaption>CSS Box Model</figcaption>
  </figure>
  <figure>
    <img src="images/js-event-loop.jpg" alt="Diagram of the JavaScript event loop with call stack and callback queue" loading="lazy">
    <figcaption>JavaScript Event Loop</figcaption>
  </figure>
  <figure>
    <img src="images/responsive-grid.jpg" alt="Responsive grid layout showing 4 columns on desktop and 1 on mobile" loading="lazy">
    <figcaption>Responsive Grid Layout</figcaption>
  </figure>
  <figure>
    <img src="images/flexbox-axes.jpg" alt="Flexbox main axis and cross axis diagram" loading="lazy">
    <figcaption>Flexbox Axes</figcaption>
  </figure>
  <figure>
    <img src="images/git-workflow.jpg" alt="Git branching diagram with main, feature, and hotfix branches" loading="lazy">
    <figcaption>Git Workflow</figcaption>
  </figure>
</div>

Exercise 5 – Contact Form

Task: Build a contact form with: name (text), email (email), message (textarea), and a submit button. All fields required. Use proper labels with for attribute. Add a placeholder only as a supplement, not as a replacement label.

HTML

<form action="/contact" method="POST">
  <div>
    <label for="name">Full name</label>
    <input type="text" id="name" name="name"
           placeholder="e.g. Jane Smith"
           required autocomplete="name">
  </div>
  <div>
    <label for="email">Email address</label>
    <input type="email" id="email" name="email"
           placeholder="e.g. jane@example.com"
           required autocomplete="email">
  </div>
  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="6"
              placeholder="Write your message here…"
              required></textarea>
  </div>
  <button type="submit">Send message</button>
</form>

Exercise 6 – Two-Column Comparison Table

Task: Create a table comparing HTML and Markdown with at least 4 rows. Use thead, tbody, th (with scope), and td.

HTML

<table>
  <caption>HTML vs Markdown Comparison</caption>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">HTML</th>
      <th scope="col">Markdown</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Syntax</th>
      <td>Verbose — angle brackets and attributes</td>
      <td>Minimal — symbols like # and **</td>
    </tr>
    <tr>
      <th scope="row">Rendered by</th>
      <td>Web browsers directly</td>
      <td>Parser converts to HTML first</td>
    </tr>
    <tr>
      <th scope="row">Accessibility control</th>
      <td>Full — ARIA, roles, attributes</td>
      <td>Limited — depends on parser</td>
    </tr>
    <tr>
      <th scope="row">Use case</th>
      <td>Web pages, apps, email templates</td>
      <td>Documentation, README files, blogs</td>
    </tr>
  </tbody>
</table>

Exercise 7 – Semantic Blog Post Layout

Task: Mark up a blog post page using the correct semantic elements: header (with nav), main wrapping an article, a sidebar aside, and a page footer.

HTML

<header>
  <a href="/"><img src="/logo.png" alt="ylearner"></a>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>Understanding the HTML Box Model</h1>
      <p>By <a href="/author/jane">Jane Smith</a> ·
         <time datetime="2026-05-10">10 May 2026</time></p>
    </header>

    <section>
      <h2>What is the Box Model?</h2>
      <p>Every HTML element is a rectangular box with content, padding, border, and margin.</p>
    </section>

    <section>
      <h2>Box-sizing: border-box</h2>
      <p>Setting box-sizing to border-box makes width calculations more intuitive.</p>
    </section>

    <footer>
      <p>Tags: <a href="/tag/css">CSS</a>, <a href="/tag/html">HTML</a></p>
    </footer>
  </article>

  <aside aria-label="Related articles">
    <h2>Related</h2>
    <ul>
      <li><a href="/blog/css-flexbox">CSS Flexbox Guide</a></li>
      <li><a href="/blog/css-grid">CSS Grid Layout</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2026 ylearner. <a href="/privacy">Privacy Policy</a></p>
</footer>

Exercise 8 – Registration Form with All Input Types

Task: Build a form using at least 8 different input types: text, email, password, number, date, checkbox, radio, and select.

HTML

<form action="/register" method="POST">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="20">

  <label for="reg-email">Email</label>
  <input type="email" id="reg-email" name="email" required>

  <label for="reg-password">Password</label>
  <input type="password" id="reg-password" name="password" required minlength="8">

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="13" max="120">

  <label for="dob">Date of birth</label>
  <input type="date" id="dob" name="dob">

  <label for="country">Country</label>
  <select id="country" name="country">
    <option value="">-- Select country --</option>
    <option value="gb">United Kingdom</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </select>

  <fieldset>
    <legend>Preferred learning style</legend>
    <label><input type="radio" name="style" value="visual"> Visual</label>
    <label><input type="radio" name="style" value="reading"> Reading</label>
    <label><input type="radio" name="style" value="practice"> Hands-on practice</label>
  </fieldset>

  <label>
    <input type="checkbox" name="terms" required>
    I agree to the <a href="/terms">Terms of Service</a>
  </label>

  <button type="submit">Create account</button>
</form>

Exercise 9 – Accessible vs Decorative Image

Task: Write two images: (1) an informative screenshot of code that needs description, (2) a purely decorative divider. Apply correct alt text in each case.

HTML

<!-- Informative image: describe what it shows and why it matters -->
<figure>
  <img
    src="images/html-form-example.png"
    alt="Screenshot of an HTML contact form with name, email, and message fields, showing a validation error on the email field reading 'Please enter a valid email address'"
    width="600"
    height="400"
  >
  <figcaption>HTML5 form validation in action</figcaption>
</figure>

<!-- Decorative image: empty alt so screen readers skip it entirely -->
<img
  src="images/wave-divider.svg"
  alt=""
  aria-hidden="true"
  width="1200"
  height="60"
>

Exercise 10 – Product Card with figure/figcaption

Task: Build a product card for a programming book. Use figure/figcaption for the book cover, include the title (h3), price, a brief description, a list of features, and an "Add to cart" button.

HTML

<article class="product-card">
  <figure>
    <img src="images/html-css-book.jpg"
         alt="Cover of 'HTML &amp; CSS: Design and Build Websites' by Jon Duckett"
         width="200" height="280" loading="lazy">
    <figcaption>HTML &amp; CSS by Jon Duckett</figcaption>
  </figure>

  <div class="product-details">
    <h3>HTML &amp; CSS: Design and Build Websites</h3>
    <p class="price"><strong>£24.99</strong></p>
    <p>A full-colour introduction to HTML and CSS for beginners, with beautifully designed double-page spreads and clear explanations.</p>

    <ul>
      <li>480 pages, full colour</li>
      <li>Covers HTML5 and CSS3</li>
      <li>Beginner-friendly — no prior experience needed</li>
      <li>Includes real project walkthroughs</li>
    </ul>

    <button type="button">Add to cart</button>
  </div>
</article>

Exercise 11 – FAQ Accordion with details/summary

Task: Create a 3-item FAQ accordion using only HTML (no JavaScript). Use the correct native HTML elements that support expand/collapse natively.

HTML

<section aria-label="Frequently Asked Questions">
  <h2>FAQ</h2>

  <details>
    <summary>Do I need to know programming to learn HTML?</summary>
    <p>No prior programming experience is required. HTML is a markup language, not a programming language. Most people can write their first HTML page within an hour of starting. It is the ideal starting point for anyone interested in web development.</p>
  </details>

  <details>
    <summary>How long does it take to learn HTML?</summary>
    <p>You can learn the fundamentals of HTML in a weekend. Mastering advanced topics like accessibility, SEO meta tags, and semantic structure takes a few weeks of regular practice. The best way to learn is to build real projects while reading documentation.</p>
  </details>

  <details>
    <summary>Is HTML enough to get a job?</summary>
    <p>HTML alone is not enough. You will need CSS for styling and JavaScript for interactivity. Together, HTML + CSS + JavaScript form the core front-end skill set. Many developers then add a framework (React, Vue, or Angular). Strong HTML and CSS fundamentals make everything else easier.</p>
  </details>
</section>

Exercise 12 – Progress Indicator

Task: Create a course progress display showing 7 of 12 lessons completed. Use the correct HTML element for scalar progress, with a visible text fallback.

HTML

<div class="course-progress">
  <h3>Your Progress: HTML Fundamentals</h3>

  <label for="lesson-progress">7 of 12 lessons completed</label>
  <progress id="lesson-progress" value="7" max="12">
    58% complete
  </progress>

  <p>You have completed <strong>7 of 12 lessons</strong> (58%).
     Keep going — only 5 lessons left!</p>
</div>

<!-- meter element for a contextual value with min/max/low/high/optimum -->
<div class="skill-level">
  <label for="html-skill">HTML skill level</label>
  <meter id="html-skill"
         value="0.75" min="0" max="1"
         low="0.3" high="0.7" optimum="0.9">
    75% proficiency
  </meter>
  <span>Advanced (75%)</span>
</div>

Exercise 13 – Embed a YouTube Video

Task: Embed a YouTube video correctly. Use the proper embed URL format, include a meaningful title attribute, disable related videos from other channels, make it keyboard accessible, and add lazy loading.

HTML

<div class="video-wrapper" style="position:relative; padding-bottom:56.25%; height:0;">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&cc_load_policy=1"
    title="HTML Tutorial for Beginners – Full Course (ylearner)"
    width="560"
    height="315"
    style="position:absolute; top:0; left:0; width:100%; height:100%;"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    loading="lazy">
  </iframe>
</div>

Exercise 14 – Complete Meta Tags for SEO and Social Sharing

Task: Write a complete <head> section for a blog post about CSS Grid. Include: charset, viewport, title, meta description, canonical, Open Graph (4 required + description + image dimensions), Twitter Card, and one JSON-LD Article schema.

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>CSS Grid Layout – Complete Beginner's Guide | ylearner</title>
  <meta name="description" content="Learn CSS Grid from scratch. Master grid-template-columns, grid-template-rows, grid-area, auto-fill, and responsive grid layouts with real examples.">
  <meta name="robots" content="index, follow">

  <link rel="canonical" href="https://ylearner.org/css/grid-layout.html">

  <meta property="og:type" content="article">
  <meta property="og:url" content="https://ylearner.org/css/grid-layout.html">
  <meta property="og:title" content="CSS Grid Layout – Complete Beginner's Guide">
  <meta property="og:description" content="Learn CSS Grid from scratch with real examples.">
  <meta property="og:image" content="https://ylearner.org/assets/og/css-grid.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="ylearner">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="CSS Grid Layout – Complete Beginner's Guide">
  <meta name="twitter:description" content="Learn CSS Grid from scratch with real examples.">
  <meta name="twitter:image" content="https://ylearner.org/assets/og/css-grid.jpg">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "CSS Grid Layout – Complete Beginner's Guide",
    "description": "Learn CSS Grid from scratch with real examples.",
    "image": "https://ylearner.org/assets/og/css-grid.jpg",
    "author": {"@type": "Organization", "name": "ylearner"},
    "publisher": {"@type": "Organization", "name": "ylearner"},
    "datePublished": "2026-04-20",
    "dateModified": "2026-06-04"
  }
  </script>
</head>

Exercise 15 – Full Semantic Portfolio Layout

Task: Write a complete single-page HTML portfolio using all major semantic elements: header with nav, main with multiple sections (hero, about, projects, contact form), aside, and footer. No CSS needed — focus on correct semantics only.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jane Smith – Front-End Developer</title>
  <meta name="description" content="Portfolio of Jane Smith, a front-end developer specialising in accessible HTML and CSS.">
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to content</a>

  <header>
    <a href="/"><img src="logo.svg" alt="Jane Smith – Portfolio"></a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <section id="hero" aria-label="Introduction">
      <h1>Jane Smith</h1>
      <p>Front-End Developer specialising in accessible, semantic HTML and modern CSS.</p>
      <a href="#projects">View my work</a>
    </section>

    <section id="about" aria-labelledby="about-heading">
      <h2 id="about-heading">About Me</h2>
      <img src="jane.jpg" alt="Jane Smith smiling at a desk with code on a screen behind her">
      <p>I build fast, accessible web experiences with 5 years of experience in HTML, CSS, and JavaScript.</p>
    </section>

    <section id="projects" aria-labelledby="projects-heading">
      <h2 id="projects-heading">Projects</h2>
      <article>
        <h3>ylearner.org</h3>
        <p>A multi-course coding platform built with semantic HTML, accessible forms, and JSON-LD structured data.</p>
        <ul>
          <li>HTML</li><li>CSS</li><li>JavaScript</li>
        </ul>
        <a href="https://ylearner.org" rel="noopener noreferrer">View project</a>
      </article>
      <article>
        <h3>AccessiDash</h3>
        <p>An accessibility audit dashboard with WCAG 2.1 scoring and automated issue reports.</p>
        <ul>
          <li>React</li><li>TypeScript</li><li>ARIA</li>
        </ul>
        <a href="https://github.com/jane/accessidash" rel="noopener noreferrer">View on GitHub</a>
      </article>
    </section>

    <section id="contact" aria-labelledby="contact-heading">
      <h2 id="contact-heading">Contact</h2>
      <form action="/contact" method="POST">
        <label for="c-name">Name</label>
        <input type="text" id="c-name" name="name" required autocomplete="name">
        <label for="c-email">Email</label>
        <input type="email" id="c-email" name="email" required autocomplete="email">
        <label for="c-msg">Message</label>
        <textarea id="c-msg" name="message" rows="5" required></textarea>
        <button type="submit">Send message</button>
      </form>
    </section>
  </main>

  <aside aria-label="Latest articles">
    <h2>Latest Articles</h2>
    <ul>
      <li><a href="/blog/wcag-checklist">WCAG 2.1 Practical Checklist</a></li>
      <li><a href="/blog/css-container-queries">CSS Container Queries Guide</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2026 Jane Smith. All rights reserved.</p>
    <nav aria-label="Footer navigation">
      <ul>
        <li><a href="/privacy">Privacy</a></li>
        <li><a href="/sitemap.xml">Sitemap</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

📋 Summary

Exercises 1–5 cover the absolute basics: boilerplate, headings, navigation, images with alt text, and forms.
Exercises 6–10 build on core skills: tables with scope, semantic page layout, all input types, accessible images, and product cards.
Exercises 11–14 target interview-relevant skills: native accordion, progress/meter, YouTube embeds, and complete meta tags.
Exercise 15 combines everything into a full portfolio page demonstrating semantic HTML mastery.
Always write the exercises from scratch before looking at the solution — that is the only way coding skills are built.

FAQ

Where should I write and run these HTML exercises?

The simplest approach: create a new .html file in a folder, write the code in VS Code (free), and open the file in a browser. Install the "Live Server" VS Code extension so the browser auto-refreshes when you save. Alternatively use online editors like CodePen, JSFiddle, or the MDN Playground — no installation needed.

How do I know if my HTML is valid?

Use the W3C Markup Validation Service at validator.w3.org. Paste your HTML or provide a URL and it will report any validation errors with line numbers. Valid HTML is not the same as accessible HTML — also run the axe DevTools browser extension for accessibility checks.

Are these exercises enough to be interview-ready?

These exercises cover the HTML fundamentals that most front-end interviews test. Combine them with the Interview Questions page on this site and build at least one complete project (portfolio, landing page, or registration form from the Projects section) to consolidate your skills. Most interviewers care more about your reasoning — why you chose a semantic element, why you added an aria-label — than whether you memorised every attribute.