`<optgroup label="...">` visually groups options inside a `<select>`. Renders as a non-selectable header in every browser; screen readers announce the group as context.
HTML
<label for="lang">Language</label>
<select id="lang" name="language">
<option value="">— pick a language —</option>
<optgroup label="Compiled">
<option value="rust">Rust</option>
<option value="go">Go</option>
<option value="cpp">C++</option>
<option value="c">C</option>
</optgroup>
<optgroup label="JVM">
<option value="java">Java</option>
<option value="kotlin">Kotlin</option>
<option value="scala">Scala</option>
</optgroup>
<optgroup label="Scripting">
<option value="python">Python</option>
<option value="ruby">Ruby</option>
<option value="js">JavaScript</option>
<option value="ts">TypeScript</option>
</optgroup>
</select>
<!-- Multi-select with Ctrl/Cmd + click -->
<label for="tags">Tags</label>
<select id="tags" name="tags" multiple size="6">
<option>web</option>
<option>cli</option>
<option>data</option>
<option>devops</option>
</select>Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.