/    Sign up×
Community /Pin to ProfileBookmark

optgroup tag order

Copy linkTweet thisAlerts:
Dec 09.2014

In the WW3 tutorial “Try it” page for the optgroup tag (See: [url]http://www.w3schools.com/tags/tag_optgroup.asp[/url] )
the code is:

[code]
 <select>
<optgroup label=”Swedish Cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
</optgroup>
<optgroup label=”German Cars”>
<option value=”mercedes”>Mercedes</option>
<option value=”audi”>Audi</option>
</optgroup>
</select>
[/code]

However, when the tags are NOT grouped around the various options, it appears to work the SAME.

[code]
<!DOCTYPE html>
<html>
<body>

<select>
<optgroup label=”Swedish Cars”> </optgroup>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>

<optgroup label=”German Cars”> </optgroup>
<option value=”mercedes”>Mercedes</option>
<option value=”audi”>Audi</option>
</select>

</body>
</html>
[/code]

Is this two different ways to accomplish the same thing or is one code definitely better than the other?
?

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@DarkMoriaDec 09.2014 — You would want to wrap the optgroup around the option tags, yes you can do it both ways, but it doesn't mean it will show up the same way in different browsers with the second method. The second method isn't closed properly "by standards"
Copy linkTweet thisAlerts:
@rtretheweyDec 11.2014 — They may appear to be similar, but you should note that in the first example, the actual option values are indented slightly to denote their membership in the optgroup. In the second example, the list appears with no indentations because the optgroup's are empty.
Copy linkTweet thisAlerts:
@JMRKERauthorDec 11.2014 — They may appear to be similar, but you should note that in the first example, the actual option values are indented slightly to denote their membership in the optgroup. In the second example, the list appears with no indentations because the optgroup's are empty.[/QUOTE]

Yes, that is what I had noted.

But the question remains, is there any FUNCTIONAL difference

or it is like a <label> tag and may stand alone around another element?
Copy linkTweet thisAlerts:
@Sup3rkirbyDec 11.2014 — I've never really used the [B]<optgroup>[/B] tag, so there may be something I'm missing, but the biggest benefit (in terms of functionality) to using the first method you presented would be the use of the [I][B]disabled[/B][/I] attribute. It seems like the [B]<optgroup>[/B] tag could provide a way to easily enable to disable an entire set of options with less code. And I guess in that regard, the same concept would apply to any of the other global attributes supported by the tag.

Not to deviate from the true question though, no, I don't know that there's any functional difference as far as the HTML markup goes. I can just see it serving a purpose in scripting. Maybe there's a difference in browser accessibility as well, in cases where readers are used.
Copy linkTweet thisAlerts:
@rtretheweyDec 11.2014 — Kudos to Sup3rKirby for coming up with an example of a functional difference. The point I was going to make is that using the proper mark-up would make a semantic difference that might affect things like readers and, perhaps someday, search engines. I would also agree that, in the grand scheme of things, it's a pretty esoteric issue.
Copy linkTweet thisAlerts:
@JMRKERauthorDec 11.2014 — Thank you both for the insights.

My plan is to use it as suggested by the W3school's code,

but it appeared to me that the tag nesting could be done either way (I have found no errors so far)

and for some simplicity in the creation of the heading/groups of the tag in a drop-down using JS,

the second method could be beneficial as well.

As a test, I created a 'disabled' group in the <select> tag. It appears to work well.
<i>
</i>
&lt;select&gt;
&lt;optgroup label="Swedish Cars"&gt;
&lt;option value="volvo"&gt;Volvo&lt;/option&gt;
&lt;option value="saab"&gt;Saab&lt;/option&gt;
&lt;/optgroup&gt;
&lt;optgroup label="American Cars" disabled&gt;
&lt;option value="chrysler"&gt;Chrysler&lt;/option&gt;
&lt;option value="ford"&gt;Ford&lt;/option&gt;
&lt;option value="gm"&gt;GM&lt;/option&gt;
&lt;/optgroup&gt;
&lt;optgroup label="German Cars"&gt;
&lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
&lt;option value="audi"&gt;Audi&lt;/option&gt;
&lt;/optgroup&gt;
&lt;/select&gt;
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...