selected

The selected attribute in HTML designates a default option in a <select> dropdown, improving user experience by automatically choosing a frequently selected item.

selected attribute

The selected attribute in HTML is used within <option> elements to indicate the default option in a <select> dropdown. It enhances user experience by pre-selecting a recommended choice when the page loads. Only one <option> can be marked as selected at a time, streamlining user input.

Syntax

The selected attribute is a boolean attribute, meaning it doesn't need a value. Including it in the <option> tag automatically activates it.

index.html
<option selected>Option Text</option>

Example

Here’s an example showing how to implement the selected attribute in a <select> dropdown featuring a list of fruits:

index.html
<label for="fruits">Choose a fruit:</label>
<select id="fruits">
  <option value="apple" selected>Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Values

  • The selected attribute is a boolean attribute, meaning it does not have any associated values.

Applies To

The selected attribute can be applied to the following HTML elements.

Conclusion

The selected attribute in HTML designates a default choice in a <select> dropdown, improving user experience by automatically selecting a preferred option. Only one <option> can be marked as selected at any given time. This helps streamline the selection process when the page loads.