Links, Images, and Tables: Interview Q&A

1. What is the difference between an anchor and a button?#

An anchor navigates to a resource or location. A button performs an action on the current page, such as submitting a form, opening a dialog, or applying a filter. Use <a href="/pricing/">Pricing</a> for navigation and <button type="button">Show details</button> for an action. Do not use a clickable div as a substitute for either control.

2. Why is href important on an anchor?#

The href gives the anchor a destination and makes it a real link. Without it, an anchor does not provide normal link navigation or the same keyboard and context-menu behavior. Use a button when there is no destination and the user is asking the page to do something.

3. What is the difference between an empty alt and a missing alt?#

An empty alt="" tells assistive technology that the image is decorative or redundant and can be skipped. A missing alt may cause a screen reader to announce the filename or URL, which is rarely helpful. Informative images need a concise alternative that conveys their relevant purpose. Decide based on the information the image adds in that context.

4. What is the difference between srcset/sizes and picture?#

Use srcset and sizes when the browser can choose among different resolutions or widths of the same image for the available display size. Use picture when you need art direction, such as a different crop on a narrow screen, or when offering alternative formats. A source inside picture provides a candidate; the img remains the fallback and carries the alt text.

<picture>
  <source media="(max-width: 600px)" srcset="portrait-crop.webp">
  <source type="image/avif" srcset="landscape.avif">
  <img src="landscape.jpg" alt="A cyclist crossing a mountain pass"
       width="1200" height="800">
</picture>

5. Why should image dimensions be specified?#

Providing width and height gives the browser an aspect ratio before the image downloads. The browser can reserve space, reducing unexpected layout movement. CSS can still make the image responsive with max-width: 100%; height: auto.

6. When should an image be inside figure?#

Use figure when the image is a self-contained item that is referred to by the surrounding content or benefits from a caption. Use figcaption for the caption. A small icon inside a button or a decorative background image usually does not need a figure.

7. How do you make a data table more accessible?#

Use caption to name the table when useful, th for header cells, and td for data cells. Add scope="col" or scope="row" when it clarifies header relationships. For complex tables, use a deliberate header structure and test with assistive technology. Do not use spacing or bold text alone to imitate table headers.

<table>
  <caption>Support requests by month</caption>
  <thead>
    <tr><th scope="col">Month</th><th scope="col">Requests</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">April</th><td>42</td></tr>
    <tr><th scope="row">May</th><td>37</td></tr>
  </tbody>
</table>

8. What does target="_blank" do, and what should you consider?#

It asks the browser to open the destination in a new browsing context, often a new tab. New tabs can surprise users, so use this behavior only when there is a good reason and make it clear in the link text or nearby text. Modern browsers treat _blank links as having noopener protection, but explicitly writing rel="noopener" remains understandable and compatible with older expectations. Use noreferrer only when you also intend to suppress the referrer information.

9. How do you make a link's purpose clear?#

Write link text that makes sense out of context. “Read the API authentication guide” is more useful than “click here”. When an icon is the only visible content, provide an accessible name, for example with visually hidden text or an appropriate aria-label on the link.

10. Should every image have descriptive alt text?#

Every img should have an alt attribute, but not every image should have a descriptive value. Informative images need a useful text alternative. Decorative images should normally use an empty value. If an image contains text or acts as a control, the alternative must communicate the text or action that matters.