HTML receipt index project: landmarks, links, tables, and a bounded image

Use it for a real task

The page can render meaningful information before styling or scripting. A small logo has an empty alt because the adjacent text already names the site. A table presents actual records; each ID is a link whose target must be served by the application.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Receipt index | AI Trove</title></head>
<body>
  <a href="#content">Skip to receipts</a>
  <header><p><img src="/media/aitrove-mark.svg" alt="" width="24" height="24"> AI Trove</p></header>
  <main id="content">
    <h1>Receipt index</h1>
    <table>
      <caption>Current review queue</caption>
      <thead><tr><th scope="col">Receipt</th><th scope="col">State</th></tr></thead>
      <tbody><tr><th scope="row"><a href="/receipts/R-47">R-47</a></th><td>Pending</td></tr></tbody>
    </table>
  </main>
</body>
</html>

What the markup guarantees

The logo and record route are owned assets/endpoints that must exist. Add responsive CSS when shipping the complete page; the viewport declaration cannot repair a fixed-width design by itself.

Cost and limits

The HTML is inexpensive for a short queue. For thousands of records, paginate on the server rather than pushing a huge table into one response.

Common Mistakes

• Do not treat a broken route as a valid example of navigation.
• Keep the linked image's text alternative empty only because site text is adjacent.
• Do not let a long table substitute for filtering and pagination.

Connected lessons

• HTML document skeleton: declare language, encoding, and a real title
• HTML landmarks: give navigation, main content, and page edges clear owners
• HTML data tables: name row and column relationships explicitly
• HTML image alt text: describe function or information, not pixels alone