Learn HTML – Part 42 – option Tag – Dropdown Options

The HTML option tag is used to define individual options inside a dropdown list.

It works together with the select element to allow users to choose from multiple choices.

What is the option Tag?

The option tag represents a selectable item inside a dropdown menu.

Each dropdown list contains multiple option elements.

Basic Syntax

<select>

   <option>Option 1</option>
   <option>Option 2</option>

</select>

Example – Dropdown Options

<form>

   <label for="city">Select City:</label><br>

   <select id="city">
      <option>New York</option>
      <option>London</option>
      <option>Tokyo</option>
   </select>

</form>

Output:

Important option Attributes

Example – Selected Option

<select>

   <option>HTML</option>
   <option selected>CSS</option>
   <option>JavaScript</option>

</select>

Output:

HTMLCSSJavaScript

Example – Using value Attribute

<select>

   <option value="html">HTML</option>
   <option value="css">CSS</option>
   <option value="js">JavaScript</option>

</select>

Why Use option?

• Defines selectable choices in dropdown lists
• Works with the select element
• Helps organize form selections
• Improves user input accuracy

The option tag represents each selectable choice in a dropdown list.

Common Mistakes Beginners Make

• Using option elements outside select
• Forgetting to specify the value attribute
• Using unclear option labels

Conclusion

The HTML option tag is used to define selectable options inside dropdown lists.

It works with the select element to provide users with multiple choices in forms.

What’s Next?

Now that you understand the option tag, the next step is learning about the button tag, which is used to create clickable buttons in HTML forms.

Next: Learn HTML – Part 43 – button Tag – HTML Buttons →

Series: Learn HTML Series