Usually I used label tag for pointing input tag like this

<label for='firstname'>First Name:</label>
<input type='text' id='firstname' />

Now I have this

<label for='firstname'>First Name:</label>
<label id='firstname'></label>

Since I haven't crossed anything like this before, is it possible to have label tag for a label. Will it work, when I apply Javascript because I have to update the values? or this is a valid w3c pliance?

I'm confused whether to use it or not.

Usually I used label tag for pointing input tag like this

<label for='firstname'>First Name:</label>
<input type='text' id='firstname' />

Now I have this

<label for='firstname'>First Name:</label>
<label id='firstname'></label>

Since I haven't crossed anything like this before, is it possible to have label tag for a label. Will it work, when I apply Javascript because I have to update the values? or this is a valid w3c pliance?

I'm confused whether to use it or not.

• javascript
• html

• Have you tested it with validator.w3 ? – Matthew Layton Commented Aug 30, 2013 at 15:25
• 1 Maybe that's why you're confused. You seem to be fundamentally misunderstanding the purpose of the label element. – BoltClock Commented Aug 30, 2013 at 15:25
• Why would you want to? – j08691 Commented Aug 30, 2013 at 15:25
• According to this JSFiddle (jsfiddle/r9zx9) it should work. I've given the first label an ID aswell so it can be accessed by Javascripts document.getElementByID – Bjorn Smeets Commented Aug 30, 2013 at 15:25
• The label element is monly used to focus an element, usually input... is there any other use that I don't know, or why would you want to focus a label? – André Leria Commented Aug 30, 2013 at 15:25

5 Answers 5

It's invalid according to the W3C validator.

The for attribute of the label element must refer to a form control.

No. Label elements label (primarily) form controls (<input>, <button>, etc), not arbitrary elements.

See the HTML specification:

Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.

button, input (if the type attribute is not in the hidden state), keygen, meter, output, progress, select, textarea

As others have answered, the label element must refer to a control, such as input, so it must not refer to another label element, even syntactically. This restriction is present even in HTML5.

This means that if you read user input using elements other than controls, you can still use labels for them, but you must not use label markup for the label. Normally, text data like names is best read using input type=text. If you cannot use it, or another control, for some reason, then the approach remended in ARIA specifications is to a semantically neutral element, normally span, and use the ARIA attribute aria-labelledby to specify the connection between a label and the span. Example:

<span id=firstnameLabel>First Name:</span>
<span role=textbox id=firstname aria-labelledby=firstnameLabel></span>

The ARIA attributes are primarily meant for assistive or otherwise accessibility-aware software. They are probably ignored by mainstream browsers.

Label for label is non-conforming. Probably HTML5 output element is what you want?

The Label "For" attribute has to point to a valid ID attribute of a "control" element, http://www.w3/TR/REC-html40/interact/forms.html#h-17.2 lists valid control elements as buttons, checkboxes, radio buttons, menus, file select, hidden controls, object controls.

It might work in JS, but it would be invalid HTML