Skip to content
Laviyx Learn

Try

Semantic HTML and Accessibility Practice

Practise semantic page structure, landmarks, accessible images, links and buttons, and built-in interactive elements. Each solution is rendered live.

Intermediate6 problemsUpdated

Review first: Semantic HTML, Page Layout Elements, Accessibility, ARIA Basics, details, summary and dialog

  1. 1.A page with landmarks

    Intermediate

    Mark up a blog page with a header containing the site name and a navigation menu (Home, Blog, About) as a list of links, a main area with one article (heading, date and paragraph), and a footer with a copyright line.

    Show hint

    Use <header>, <nav> with a <ul>, <main>, <article> with <time>, and <footer>.

    Show solution
    HTML
    <header>
  <strong>Asha's Notes</strong>
  <nav aria-label="Main">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Why I learned HTML first</h1>
    <p><time datetime="2026-10-20">20 October 2026</time></p>
    <p>Every framework produces HTML in the end, so I started there.</p>
  </article>
</main>
<footer>
  <p>&copy; 2026 Asha's Notes</p>
</footer>
    Result

  2. 2.Replace div soup

    Intermediate

    Rewrite this with meaningful elements:

    HTML
    <div class="product">
  <div class="name">Wireless Mouse</div>
  <div class="price">Price: 599</div>
  <div class="buy" onclick="addToCart()">Add to cart</div>
</div>
    Show hint

    A product card is self-contained. A clickable action is a button.

    Show solution
    HTML
    <article class="product">
  <h2>Wireless Mouse</h2>
  <p>Price: ₹599</p>
  <button type="button">Add to cart</button>
</article>
    Result

    <article> marks a self-contained item, the name is a heading, and the action is a real <button>, which works with the keyboard and is announced correctly. (The cart behaviour itself would be added with JavaScript.)

  3. 3.Alt text for different images

    Beginner

    Add three images using /lesson-assets/mango.svg (80 by 80): one that is a link to a "Mango recipes" page, one that is purely decorative, and one that is informative in an article about fruit.

    Show hint

    A linked image's alt describes the destination; a decorative image gets an empty alt.

    Show solution
    HTML
    <p><a href="/recipes/mango"><img src="/lesson-assets/mango.svg" alt="Mango recipes" width="80" height="80"></a></p>
<p><img src="/lesson-assets/mango.svg" alt="" width="80" height="80"></p>
<p><img src="/lesson-assets/mango.svg" alt="A ripe yellow mango with a green leaf" width="80" height="80"></p>
    Result

  4. 5.An accessible icon-only button

    Intermediate

    Create a close button that shows only the "✕" symbol but is announced as "Close" by screen readers, and a "Delete" button that has a decorative trash emoji before its text that screen readers should ignore.

    Show hint

    Use aria-label for the icon-only button and aria-hidden="true" on the decorative emoji.

    Show solution
    HTML
    <button type="button" aria-label="Close">✕</button>
<button type="button"><span aria-hidden="true">🗑️</span> Delete</button>
    Result

  5. 6.An exclusive FAQ accordion

    Intermediate

    Build an FAQ with three questions using details and summary, where opening one question closes the others, and the first question starts open.

    Show hint

    Give all the details elements the same name attribute, and add open to the first.

    Show solution
    HTML
    <details name="faq" open>
  <summary>Is the course free?</summary>
  <p>Yes, every lesson is free.</p>
</details>
<details name="faq">
  <summary>Do I need to install anything?</summary>
  <p>Only a text editor and a browser.</p>
</details>
<details name="faq">
  <summary>How long does it take?</summary>
  <p>Most people finish in a few weeks.</p>
</details>
    Result
← All practice setsLearn HTML course →