<map> and <area> Tags — HTML Technical Interview Questions & Answers

Clickable regions over an image (image maps).

<map> and <area> Tags

  • Clickable regions over an image (image maps).
  • <map> is the <map> HTML element. HTML uses this tag so the browser (and screen readers) know what the piece is, not only how it looks.
  • Board: <map>…</map> Put it in body. Check it in the browser. Attributes go on the opening tag.
  • Trap: wrong nesting or missing a required attribute. CSS can still style it — don’t pick a tag only because of default italics.
  • Interview: name the tag, one attribute if it has a famous one (href, src, alt, for, type), one mistake.

Technical Interview Tip: <map>: the <map> HTML element. Example: <map>…</map>

Code Examples for <map> and <area> Tags

<map> and <area> Tags — working example

<img src="/campus.png" alt="Campus map" usemap="#spots" width="400" height="240" />
<map name="spots">
  <area shape="rect" coords="20,20,120,80" href="/lab" alt="Computer lab" />
  <area shape="circle" coords="300,150,40" href="/cafe" alt="Cafe" />
</map>

<map> and <area> Tags — image maps link regions of an image; every area needs an alt description.

How to Explain <map> and <area> Tags to an Interviewer

What is the <map> tag?

the <map> HTML element <map>…</map>

One common mistake?

wrong nesting or missing a required attribute