Table of contents

HTML <optgroup> Tag

What is HTML <optgroup> Tag?

The HTML optgroup tag is used to group related options inside a dropdown list created with the select tag. It helps organize long lists of options into categories, making the form more readable and easier to use.

When you use the optgroup tag, each group has a label attribute that defines its title. This label appears as a non-selectable heading inside the dropdown menu. The optgroup tag is especially useful in forms where users need to choose from many related items, such as countries, cities, or product categories.

Syntax of the HTML <optgroup> Tag

plaintext
<select>
  <optgroup label="Group Name">
    <option>Option 1</option>
    <option>Option 2</option>
  </optgroup>
</select>

The select tag defines the dropdown list. Inside it, the optgroup tag groups related options together using the label attribute to describe the group.

Examples of HTML <optgroup> Tag

Example 1: Basic HTML Optgroup Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <h2>Select Your Favorite Subject</h2>

  <select>
    <optgroup label="Science Subjects">
      <option>Physics</option>
      <option>Chemistry</option>
      <option>Biology</option>
    </optgroup>
    <optgroup label="Arts Subjects">
      <option>History</option>
      <option>Literature</option>
      <option>Philosophy</option>
    </optgroup>
  </select>

</body>
</html>

In this example, the subjects are grouped into two categories: Science and Arts. Each optgroup tag creates a section with related options, making the dropdown menu more organized.

Example 2: SEO-Optimized HTML Optgroup Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <h2>Choose a Course Category - Scholar247</h2>
   <select name="courses">
    <optgroup label="Web Development Courses">
      <option>HTML and CSS Basics</option>
      <option>JavaScript for Beginners</option>
      <option>Full Stack Development</option>
    </optgroup>
    <optgroup label="Digital Marketing Courses">
      <option>SEO Optimization</option>
      <option>Social Media Marketing</option>
      <option>Content Strategy</option>
    </optgroup>
  </select>

</body>
</html>

This example shows an SEO-friendly dropdown where course names include keywords like “Web Development Courses” and “Digital Marketing Courses.” Such descriptive labels improve user experience and help search engines understand the structure of your form.

Attributes of the HTML <optgroup> Tag

The HTML optgroup tag supports the following attributes:

• label: Defines the visible title for the group of options. (Required attribute)
• disabled: Disables all options inside the group, preventing users from selecting them.

The optgroup tag does not support any other attributes beyond these two.

Best Practices for HTML <optgroup> Tag

• Always use clear and descriptive labels for each group.
• Avoid having too many options under one group; divide them logically.
• Use the disabled attribute to temporarily hide unavailable categories.
• Keep option text concise and meaningful.
• Use consistent naming and structure across different dropdowns.

FAQs About the HTML <optgroup> Tag

What is the purpose of the HTML optgroup tag?

The optgroup tag is used to group related options within a select element, making large dropdown lists easier to read and navigate.

Can we use multiple optgroup tags in one select element?

Yes, you can include multiple optgroup tags inside a single select tag to create different categorized sections.

Is the label attribute required in the optgroup tag?

Yes, the label attribute is mandatory. Without it, the browser will not display a proper category name for that group.

Can options exist outside an optgroup tag?

Yes, you can place individual option tags directly under a select element, even if other options are grouped using optgroup.

Does the optgroup tag affect SEO?

Indirectly, yes. Well-structured and descriptive dropdowns improve accessibility and user experience, which can positively influence SEO

HTML

Related Articles