HTML and CSS Reference
In-Depth Information
Would it go to the first link defined or would it go to the last? Would it favor the element
using the
id
over the
name
regardless of position in the document? It's better not to leave
such issues to chance but rather to assume that
name
and
id
are in the same namespace, at
least when linking is concerned.
With form elements, the choice of using
name
and
id
can be more confusing. The
name
attribute lives on and must be used to specify name/value pairs for form data:
<input type="text" name="username">
However, the
id
attribute also is applied to form controls for style purposes and overlap
for scripting duties, so it is not uncommon to see
name
and
id
used together with the same
value:
<input type="text" name="username" id="username">
Generally, this is an acceptable practice except when the purpose of
name
serves secondary
duty, such as in the case of radio buttons:
<label>
Yes:
<input type="radio" name="yesno" id="yesno" value="yes">
</label>
<label>
No:
<input type="radio" name="yesno" id="yesno" value="no">
</label>
In the preceding markup, the radio buttons must share the
name
value, but the
id
values
should be unique for CSS and JavaScript usage. A simple rewrite like this makes it work, but
shows that
name
and
id
are not quite synonymous:
<label>
Yes:
<input type="radio" name="yesno" id="yesno-yeschoice" value="yes">
</label>
<label>
No:
<input type="radio" name="yesno" id="yesno-nochoice " value="no">
</label>
Given such chance for confusion, you are encouraged to pick a naming strategy and use
it consistently.
style
This attribute specifies an inline style associated with an element, which determines the
rendering of the affected element. Because the
style
attribute allows style rules to be used
directly with the element, it gives up much of the benefit of style sheets that divide the
presentation of a markup document from its structure. An example of this attribute's use is
shown here:
<strong style="font-family: Arial;
font-size: 18px;">
Important text
</strong>
