- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <optgroup> Tag
HTML <optgroup> is used in the <select> element to group together relevant
Syntax
<optgroup label= "..."></optgroup>
Attribute
HTML optgroup tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.
Attribute | Value | Description |
---|---|---|
disabled | disabled | Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. |
label | text | Defines a label to use when using <optgroup>. |
Examples of HTML optgroup Tag
Bellow examples will illustrate the usage of optgroup tag. Where, when and how to use it to create optgroup and how we can style that optgroup using CSS.
Creating Optgroup Element
In the following program, we are using the HTML <optgroup> tag to create a single group of options with the "select" element in an HTML.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML optgroup Tag</title> </head> <body> <!--create optgroup element--> <select> <optgroup label='Fruits'> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> <option value="grapes">Grapes</option> </optgroup> </select> </body> </html>
Nested Option in Optgroup
Following is another example of the HTML <optgroup> tag. Here, we are using the <optgroup> tag to create multiple groups of options within the "select" element in an HTML.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML optgroup Tag</title> </head> <body> <!--create optgroup element--> <select> <option value="">Choose your option</option> <optgroup label='States'> <option value="uttarpradesh">Uttar Pradesh</option> <option value="punjab">Punjab</option> <option value="bihar">Bihar</option> <option value="jharkhand">Jharkhand</option> </optgroup> <optgroup label='Related Cities'> <option value="lucknow">Lucknow</option> <option value="jalandhar">Jalandhar</option> <option value="patna">Patna</option> <option value="ranchi">Ranchi</option> </optgroup> </select> </body> </html>
Disable Particular Optgroup
In this example, we are using the HTML <optgroup> to create a grouping option within the "select" element in an HTML. We use the "disabled" attribute to disable the created group.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML optgroup tag</title> </head> <body> <!--create optgroup tag--> <select> <option value="">Choose your option</option> <optgroup label='Group 1'> <option value="opt1.1">Option 1.1</option> <option value="opt1.2">Option 1.2</option> </optgroup> <optgroup label='Group 2'> <option value="opt2.1">Option 2.1</option> <option value="opt2.2">Option 2.2</option> </optgroup> <optgroup label='Group 3' disabled> <option value="opt3.1">Option 3.1</option> <option value="opt3.2">Option 3.2</option> </optgroup> </select> </body> </html>
Styling Optgroup
Following is the example, where we are creating a grouping of options within the "select" element using the HTML <optgroup> tag in an HTML. We use CSS to style the "optgroup".
<!DOCTYPE html> <html lang="en"> <head> <title>HTML optgroup tag</title> <style> optgroup { color: green; background-color: aquamarine; } </style> </head> <body> <!--create optgroup tag--> <select> <option value="">Choose your option</option> <optgroup label='Frontend'> <option value="html">HTML</option> <option value="css">CSS</option> <option value="javascript">JavaScript</option> </optgroup> <optgroup label='Backend'> <option value="java">Java</option> <option value="php.2">PHP</option> </optgroup> </select> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
optgroup | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google