HTML optgroup Tag
BLUF: Mastering HTML optgroup Tag is a fundamental step in becoming a web developer. This guide covers the structure, syntax, and best practices for using this HTML element effectively.
Key Lesson: HTML optgroup Tag
Web structure starts with solid HTML. Learn how HTML optgroup Tag contributes to accessible and semantic web pages in the tutorial below.
HTML <optgroup> tag is used to group related <options> in a drop down list within <select> element.
Utilizing the <optgroup> tag in combination with <select> simplifies the process of navigating through a dropdown menu, particularly when the list contains a significant amount of options.
Syntax
Example
<optgroup label=" ">........</optgroup>
Here are some details regarding the HTML <optgroup> element:
| Display | Inline |
|---|---|
| Start tag/End tag | Both Start and End tag |
| Usage | Forms and Inputs |
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Optgroup Tag</title>
<style>
body{
text-align: center;
}
select{
font-size:20px;
font-weight:bold;
color:green;
}
</style>
</head>
<body>
<h2>Example of optgroup tag</h2>
<label>Select your favourite brand</label><br>
<select>
<optgroup label="Laptop Maufacturur">
<option value="dell">Dell</option>
<option value="hp">HP</option>
<option value="lenovo">Lenovo</option>
<option value="acer">Acer</option>
</optgroup>
<optgroup label="Mobile Manufacturer">
<option value="apple">Apple</option>
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="coolpad">Coolpad</option>
</optgroup>
</select>
</body>
</html>
Output:
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | If it is set then options of that optgroup will be disabled. |
| label | text | It defines the label for the group which will be displayed in the drop-down list. It is required attribute. |
Global attribute:
HTML <optgroup> element allows the utilization of global attributes within an HTML document.
Event attribute:
The <optgroup> tag enables the utilization of event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<optgroup> |
Yes | Yes | Yes | Yes | Yes |
