Dropdown menus are everywhere — country selectors, size pickers, category filters. They save screen space by hiding a list of options inside a collapsible menu. HTML gives you the <select> and <option> tags to build them.
Basic Select Dropdown
<select> wraps the whole dropdown. Each choice is an <option> with a value attribute that gets sent to the server. The text between the option tags is what the user sees.
<select name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="jp">Japan</option>
</select>
The Optgroup Tag
When you have a lot of options, grouping them makes the dropdown easier to navigate. Use <optgroup> with a label attribute to create visual group headers that the user cannot select.
<select name="browser">
<optgroup label="Popular">
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
</optgroup>
<optgroup label="Other">
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</optgroup>
</select>
The Multiple Attribute
Add multiple to a <select> and suddenly the dropdown becomes a list where users can pick more than one option by holding Ctrl (or Cmd on Mac). It turns into a scrollable list box instead of a dropdown.
<select name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="python">Python</option>
</select>