Purpose and content model
Select offers a set of choices represented by option elements. Optgroup groups related options with a label. A conventional select can show one choice or allow multiple choices. It provides native keyboard behavior that is difficult to reproduce well with a collection of generic div elements.
Selectedcontent belongs to the newer customizable-select model. It appears inside the select's first child button and reflects the chosen option's content in supporting implementations. It is present in the current HTML Standard, but MDN reports limited browser availability. Treat standardization and cross-browser readiness as separate questions.
Syntax and working example
<label for="level">Workshop level</label>
<select id="level" name="level" required>
<option value="">Choose a level</option>
<option value="beginner">Beginner</option>
<option value="advanced">Advanced</option>
</select>Supported attributes and behavior
Select uses name, multiple, size, required, disabled, form, and autocomplete. Option uses value, label, selected, and disabled. Optgroup uses label and disabled. If an option lacks value, its text participates in its value calculation; explicit stable values are easier to maintain. Selectedcontent uses globals and browser-managed cloned content. The traditional option text model and newer customizable content model have different restrictions; do not assume rich option markup works everywhere.
Another practical pattern
<label for="branch">Library branch</label>
<select id="branch" name="branch">
<optgroup label="North district"><option value="oak">Oak Street</option><option value="river">River Road</option></optgroup>
<optgroup label="South district"><option value="garden">Garden Lane</option></optgroup>
</select>Accessibility and browser notes
Give the select a visible label and avoid submitting the form immediately when a choice changes unless the user expects that behavior. A multi-select can be unfamiliar on desktop and mobile; check whether a checkbox group would be clearer. Customizable selects still require accessibility and keyboard testing.
Common mistakes
Selected marks an initial selection, not a security constraint. A disabled option is not a substitute for server-side validation of allowed values. Do not label an empty placeholder option as a valid business choice. Do not assume selectedcontent works simply because ordinary select does.
Verify your implementation
Test arrow keys, typing-to-select, Escape, touch interaction, and form submission. Verify the submitted values remain stable after translating labels. If adopting customizable select, keep an understandable conventional fallback and review current compatibility data for every target browser.
Standard status and sources
Standard; browser availability must be checked independently of specification status.