HTML Coding Questions

Write markup for a skip-to-content link.

<a class="skip-link" href="#main">Skip to main content</a>
<main id="main">...</main>

Mark up an article preview with heading, time, and excerpt.

<article>
  <h2><a href="/post">Post title</a></h2>
  <time datetime="2026-07-18">July 18, 2026</time>
  <p>Short excerpt of the article.</p>
</article>

Build a labeled login form with required fields.

<form action="/login" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <label for="password">Password</label>
  <input id="password" name="password" type="password" required />
  <button type="submit">Sign in</button>
</form>

Add a responsive image with meaningful alt text.

<img
  src="/images/hero.webp"
  alt="Developer reviewing interview questions on a laptop"
  width="1200"
  height="630"
  loading="lazy"
/>

Create a primary nav with aria-current.

<nav aria-label="Primary">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/tutorials/">Tutorials</a></li>
  </ul>
</nav>

Use details/summary for FAQ content.

<details>
  <summary>What is semantic HTML?</summary>
  <p>Semantic HTML uses meaningful elements to describe content structure.</p>
</details>

Build an accessible data table.

<table>
  <caption>Interview readiness by topic</caption>
  <thead>
    <tr><th scope="col">Topic</th><th scope="col">Questions</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">HTML</th><td>50</td></tr>
  </tbody>
</table>

Wrap media with figure and figcaption.

<figure>
  <img src="/diagram.png" alt="DOM tree diagram" />
  <figcaption>A simplified DOM tree for a blog page.</figcaption>
</figure>

Mark up breadcrumbs with ordered list.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/interview-questions/">Interview Questions</a></li>
    <li aria-current="page">HTML</li>
  </ol>
</nav>

Create a native dialog with close button.

<dialog id="confirm">
  <form method="dialog">
    <p>Delete this item?</p>
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

Show interview prep progress with meter.

<label for="prep">Prep progress</label>
<meter id="prep" min="0" max="100" value="72">72%</meter>

Group related radio options with fieldset.

<fieldset>
  <legend>Preferred difficulty</legend>
  <label><input type="radio" name="level" value="junior" /> Junior</label>
  <label><input type="radio" name="level" value="senior" /> Senior</label>
</fieldset>

Embed video with track captions.

<video controls>
  <source src="/intro.mp4" type="video/mp4" />
  <track kind="captions" src="/intro.vtt" srclang="en" label="English" default />
</video>

Create a search form with role and label.

<search>
  <form role="search" action="/search">
    <label for="q">Search</label>
    <input id="q" name="q" type="search" />
    <button type="submit">Go</button>
  </form>
</search>

Associate an input error with aria-describedby.

<label for="username">Username</label>
<input id="username" aria-invalid="true" aria-describedby="username-error" />
<p id="username-error">Username is required.</p>