HTML <option> Tag

What You’ll Learn

The <option> tag defines individual choices in dropdown menus. This guide covers syntax, key attributes, common form patterns, and how option works with select and optgroup.

What Is the <option> Tag?

The <option> tag is an essential HTML element used within the <select> element to define individual options in a dropdown menu. It allows users to choose from a list of predefined values when filling out a form.

Options can also appear inside <optgroup> for categorized menus, or inside <datalist> to suggest values for text inputs.

📝 Syntax

Place <option> inside <select>. Each option represents a single dropdown item:

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <!-- Add more options as needed -->
</select>

Syntax Rules

• Parent must be select, optgroup (inside select), or datalist.
• Use value for the submitted data; visible text is the element content.
• Only one option should have selected in a single-select menu.
• Self-closing <option> is valid when there is no inner text.

⚖️ <option> vs <select>

Examples Gallery

Build basic dropdowns and control default and disabled options in HTML forms.

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<select>
  <option value="option1" selected>Default Option</option>
  <option value="option2" disabled>Disabled Option</option>
</select>

♿ Accessibility

• Label the select — Associate <label for="id"> with the parent select, not individual options.
• Meaningful option text — Write clear labels users can understand without context.
• Don’t rely on value alone — Visible text should describe the choice; use value for server codes.
• Placeholder pattern — Use disabled selected on a prompt option so users must pick actively.

💡 Best Practices