<optgroup> and <option> Tags — HTML Technical Interview Questions & Answers

Grouping and defining choices inside a <select>.

<optgroup> and <option> Tags

  • Grouping and defining choices inside a <select>.
  • <optgroup> is the <optgroup> HTML element. HTML uses this tag so the browser (and screen readers) know what the piece is, not only how it looks.
  • Board: <optgroup>…</optgroup> 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: <optgroup>: the <optgroup> HTML element. Example: <optgroup>…</optgroup>

Code Examples for <optgroup> and <option> Tags

<optgroup> and <option> Tags — working example

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required autocomplete="username" />
    <label for="password">Password</label>
    <input id="password" name="password" type="password" required autocomplete="current-password" />
    <label>
      <input type="checkbox" name="remember" value="1" />
      Remember me
    </label>
  </fieldset>
  <button type="submit">Sign in</button>
</form>

<optgroup> and <option> Tags — forms POST sensitive data; label+id (or wrapping label) ties text to controls for accessibility.

How to Explain <optgroup> and <option> Tags to an Interviewer

What is the <optgroup> tag?

the <optgroup> HTML element <optgroup>…</optgroup>

One common mistake?

wrong nesting or missing a required attribute