<optgroup label='-------'></optgroup> gives xhtml validation eror

Question

Error: End tag for 'optgroup' which is not finished. You have probably failed to 
include a required child element. Hence the parent element is "not finished",
 not complete. 

I want to achieve something like this in select options.

USA
UK
--
Afghanistan

I want to put few important countries on top and then a non-selectable divider and then ordered list of remaining countries.

I put this divider using empty 'optgroup'. While it works perfectly in all browser, I get validation error.

What could be other approaches to implement this?

Answer 1

Don't use an optgroup for this. Just put this <option val="-">--</option> in your code

Answer 2

You didn't post any code, but I bet you have something like:

<select>
    <option>USA</option>
    <option>UK</option>
    <optgroup label="---"></optgroup>
    <option>Afghanistan</option>
    <option>...</option>
</select>

This is invalid because your optgroup contains no option elements. You need to use something like:

<select>
    <option>USA</option>
    <option>UK</option>
    <optgroup label="---">
        <option>Afghanistan</option>
        <option>...</option>
    </optgroup>
</select>

Answer 3

Similar to what @ZippyV wrote, you can just use an <option> and make it be disabled:

<option disabled='disabled'>--</option>

That won't be selectable. Also if it were me I'd use an m-dash and not two hyphens:

<option disabled='disabled'>&mdash;</option>