Where to put <label> around other html element or not?

Question

Hi,

Where to put around other html element or not?

Option1- put around input element :

<label>Url:
        <input type="text" size="350"/>
</label>

Option2:

<label>Url:</label>
<input type="text" size="350"/>

Thanks

Answer 1

The latter. This way you can set style, width etc. without affecting <input>. It's also better semantically: The label is a label, and input is an input.

Answer 2

Firstly, in the first example the <label> is automatically linked to the <input>, while in the second example they are not (you must set the for and id attributes to emulate the former's behaviour).

Other than that, it's a matter of situation and preference. Personally I usually go for the former as there's less markup needed.

Answer 3

The second is definitely better, it allows you to style separately.

You can also use the "for" attribute to bind it to an input field:

http://www.w3schools.com/tags/att_label_for.asp