What's the Error in this Code Snippet

HTML-CSS
1

Posted in error. Another post asks my question.

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

1 Like
3

In the code snippet below, the online validator says there is a problem: “Element “option” without attribute “label” must not be empty.”

I’ve searched and cannot find an explanation I understand. What is missing or superflous?

           <label for="suffix">&nbsp;&nbsp;&nbsp;&nbsp;Suffix:&nbsp;
              <select name="suffix" id="suffix">
                <option selected value=""></option>
                <option value="Jr.">Jr.</option>
                <option value="Sr.">Sr.</option>
                <option value="II">II</option>
                <option value="III">III</option>
                <option value="IV">IV</option>
                <option value="V">V</option>
              </select>
            </label>
4

do not open duplicate topics, you just opened a topic with this code snippet

5

Hi @ahraitch

The first option element is causing the problem.

You could either remove it, or add a &nbsp; for the value attribute value, and also between the option opening and closing tag.

Happy coding

6

“Element “option” without attribute “label” must not be empty.”

Maybe that element can’t be empty. Did you try putting some text in there?

I don’t think it’s a good idea to try to learn HTML by trial and error in a validator and then posting the results here.

If you need to ask here then the validator isn’t working for you.

I think you’d be well served by learning to code through a course:
https://www.freecodecamp.org/learn/full-stack-developer/

It will answer a lot of the questions that you have

1 Like
7

if you remove your post people can’t help you

8

I would add that just because a validator doesn’t like it doesn’t necessarily mean it won’t work.

1 Like
9

Hi @ahraitch

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

Thanks.

1 Like
10

I thought I had abandoned the bad thread without posting it. I didn’t realize until after I had created the question I wanted to ask that it had posted. I couldn’t find a way to delete it. If you will tell me how to do that, I shan’t make duplicate posts in future.

11

Just use the thread and add to it.

1 Like
12

I’ve been through a couple of books and at least three online tutorials. I’ve written a few hundred lines - maybe a lot more - of HTML and CSS. Before hosting the code, I try to validate it first for errors. That’s how I got here.

I don’t understand the error the validator reported. I tried searching online and in my books for something that would explain it, without success.

I had hoped that someone here would see the error - if there is one - and help me learn my pointing it out.

Apparently I was wrong.

13

You were told about at least one issue with your code above.

14

Nothing I found useful. I was given advice about other things to try but if I was told anything about my question, it went over my head.

15

If you did not understand something, I recommend asking questions about what was said that you specifically did not understand.

16

this sentence seems to be it

if the validator says that the element can’t be empty, add text to it

17

4.10.10 The option element

Content model:
If the element has a label attribute and a value attribute: Nothing.
If the element has a label attribute but no value attribute: Text.
If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
If the element has no label attribute and is a child of a datalist element: Text.

If the element is empty, it must have a label attribute.

Besides, having a blank option doesn’t make much sense from a user experience perspective. Usually, if you want the first option to be an inert information element, you would give some text or a label and select and disable it.

<select name="suffix" id="suffix">
  <option selected disabled>Suffix</option>
  <option value="Jr.">Jr.</option>
  <option value="Sr.">Sr.</option>
  <option value="II">II</option>
  <option value="III">III</option>
  <option value="IV">IV</option>
  <option value="V">V</option>
</select>
18

Thank you, for all the responses.

I think I stumbled onto the answer as I was making some other changes to my HTML code.

<label for="suffix">&nbsp;&nbsp;Suffix:&nbsp;</label>
              <select name="suffix" id="suffix">
                <option value="n/a">&nbsp;</option>
                <option value="Jr.">Jr.</option>
                <option value="Sr.">Sr.</option>
                <option value="II">II</option>
                <option value="III">III</option>
                <option value="IV">IV</option>
                <option value="V">V</option>
              </select>
19

you can keep the empty value, but you may want to use a text of something like --- choose an option ---

1 Like