Closing HTML <input> tag issue
These are void elements. This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have — a closing tag in HTML.1
However, they can have a <label>
associated with them:
<input id="my_id" type="radio" name="radio_name">
<label for="my_id">Radio Label</label>
Radio buttons by nature can't contain text anyway, so it wouldn't make sense for them to accept text or other elements as content. Another issue with a control that does accept text as input: should its textual content then be its value, or its label? To avoid ambiguity we have a <label>
element that does exactly what it says on the tin, and we have a value
attribute for denoting an input control's value.
1XHTML is different; by XML rules, every tag must be opened and closed; this is done with the shortcut syntax instead of a </input>
tag, although the latter is equally acceptable:
<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>
The origin is in the empty element concept in SGML, and the idea was that some elements act as placeholders for content that will be inserted from an external source or by the environment.
This is why img
and input
, for example, were declared as empty in HTML, or, more exactly, as having EMPTY
declared content (i.e., no content is possible, as the opposite to elements that just casually has empty content). For a longer explanation, see my page Empty elements in SGML, HTML, XML, and XHTML.
The implication is that the start tag for such an element acts as the closing tag, too. Software that processes SGML or HTML documents is expected to know from the Document Type Definition (DTD) which tags have this property. In practice, such information is built-in in web browsers. Using an end tag like </input>
is invalid, but browsers just skip unrecognized or spurious end tag.
In XML, hence in XHTML, things are different, because XML is a strongly simplified variant of SGML, intended to be processed simplistically. Software that processes XML must be able to do all the parsing without any DTD, so XML requires closing tags for all elements, though you can (and, for compatibility, mostly should) use special syntax like <input />
as shorthand for <input></input>
. But XHTML still allows no content between the tags.
So you cannot specify the label for an input element inside the element itself, as it cannot have any content. You can use the title
, value
, or (in HTML5) placeholder
attributes to associate texts with it, in different senses, but to have normal visible content as a label, it needs to be in a different element. As described in other answers, it is advisable to put it in a label
element and define the association with id
and for
attributes.
<input>
is an empty tag, in that it's not designed to have any content or a closing tag. For compliance, you can signify the end of the tag by using it like this:
<input type="text" value="blah" />
which is the XHTML compliant way to close a tag which has no content. The same goes for the <img>
tag.
To label a radio button, you're probably best off using the <label>
tag as BoltClock's answer describes.