The <option> tag represents a selectable item in a dropdown menu. It must be inside a <select> or <optgroup> element. The text content of the option is what users see and can select.

<option

Step 2: Lesson Content

The <option> tag can have a value attribute that differs from the displayed text. This is useful when you want to send a different value to the server than what the user sees. The selected attribute marks an option as pre-selected. The disabled attribute makes an option non-selectable.

<select>
  <option value="1">Apple</option>
  <option value="2" selected>Banana</option>
  <option value="3">Cherry</option>
</select>

Step 3: Lesson Content

Common use cases: dropdown menus for forms, country/state selectors, category filters, and any list where users need to choose one option. Options can be grouped with <optgroup> for better organization. Each option represents one choice in the dropdown.

<select>
  <option>Choose...</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Step 4: Lesson Content

In the browser, options appear as selectable items in the dropdown. When clicked, the select element shows the selected option's text. The value attribute is sent to the server when the form is submitted, not the displayed text.

<select>
  <option>Apple</option>
  <option>Banana</option>
</select>

Step 5: Knowledge Check

Checkpoint: Which element represents a selectable item in a dropdown?

<select>
  <option>Option</option>
</select>

Step 6: Lesson Content

Correct! The <option> tag represents a selectable item in a dropdown menu. It must be inside a <select> or <optgroup> element. Each option represents one choice that users can select.

<select>
  <option>Option</option>
</select>

Step 7: Lesson Content

Now it's your turn. Options are the building blocks of dropdown menus. Complete the challenges below to master the <option> tag!

option.html

1 / 7

✅

Tutor:The <option> tag represents a selectable item in a dropdown menu. It must be inside a <select> or <optgroup> element. The text content of the option is what users see and can select.

⭐ 0 EXP

Option Mastery

Unlock nodes by learning option and select structure.

Concept 1: The Option Tag

The <option> tag represents a selectable item in a dropdown menu. It must be inside a <select> or <optgroup> element. The text content of the option is what users see and can select.

System Check

Which element represents a selectable item in a dropdown?

Community Holo-Net

Share Option Designs

Created effective dropdowns? Share your code and option strategies.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <option> Tag

Pascual Vila

Frontend Instructor.

The <option> tag represents a selectable item in a dropdown menu. It must be inside a <select> or <optgroup> element. The text content of the option is what users see and can select.

Attributes

The <option> tag can have a value attribute that differs from the displayed text. This is useful when you want to send a different value to the server than what the user sees. The selected attribute marks an option as pre-selected. The disabled attribute makes an option non-selectable.

Common Use Cases

Common use cases include: dropdown menus for forms, country/state selectors, category filters, and any list where users need to choose one option. Options can be grouped with <optgroup> for better organization. Each option represents one choice in the dropdown.

Best Practices

Use <option> inside <select> or <optgroup> elements. Provide meaningful text content that users can understand. Use the value attribute when the submitted value should differ from the displayed text. Use selected for default selections. Consider grouping related options with <optgroup> for better UX.

Option Tag Glossary

<option>: HTML element that represents a selectable item in a dropdown menu. Must be inside <select> or <optgroup>. The text content is what users see and can select.
value Attribute: Optional attribute on <option> that specifies the value sent to the server when the form is submitted. Can differ from the displayed text. If omitted, the text content is used as the value.
selected Attribute: Boolean attribute on <option> that marks the option as pre-selected when the page loads. Only one option should be selected by default in a single-select dropdown.
disabled Attribute: Boolean attribute on <option> that makes the option non-selectable. Useful for placeholder options or temporarily unavailable choices. The option appears grayed out.
<select>: HTML element that creates a dropdown menu. Contains <option> or <optgroup> elements. The option must be inside a select element.

📖 INDEX