YouTip

## HTML `` selected Attribute The `selected` attribute is a boolean attribute used within the HTML `` element. It specifies that a particular option in a drop-down list (``) should be pre-selected when the page loads. By default, the first option in a `` drop-down list is selected. The `selected` attribute allows developers to override this behavior and define a different default choice. --- ## Quick Example Below is a simple drop-down list where "Audi" is pre-selected on page load: ```html Volvo Saab VW Audi ``` --- ## Browser Support The `selected` attribute is universally supported across all modern and legacy web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer * Safari * Opera --- ## Definition and Usage * **Boolean Attribute:** The `selected` attribute is a boolean attribute. Its presence on an `` tag indicates that the option is active/selected by default. * **User Experience:** The pre-selected option is what the user will see displayed in the drop-down box before they click to expand it. * **Dynamic Control:** While it sets the initial state in HTML, the selected state can be read or modified dynamically after the page loads using JavaScript. --- ## Syntax ### HTML5 Syntax In standard HTML5, you can write the attribute in its minimized form: ```html Option Text ``` ### XHTML Syntax In XHTML, attribute minimization is forbidden. The attribute must be fully defined with its value: ```html Option Text ``` --- ## HTML 4.01 vs. HTML5 There are no functional differences in how the `selected` attribute behaves between HTML 4.01 and HTML5. --- ## Practical Examples ### 1. Basic Pre-selection In this example, we set "Saab" as the default selected option: ```html Choose a car: Volvo Saab Mercedes Audi ``` ### 2. Controlling Selection with JavaScript You can dynamically change or check the selected option using JavaScript. ```html Apple Banana Orange Select Orange ``` --- ## Key Considerations 1. **Multiple Selection:** If the `` element has the `multiple` attribute enabled, you can apply the `selected` attribute to multiple `` elements to pre-select more than one item. 2. **Form Resets:** If a user changes the selection and then submits or resets the form (using an ``), the drop-down list will revert to the option containing the `selected` attribute.