You are here: Reference > HTML > attributes > id

id attribute

Browser support:
Sets a unique identifier for the object.
The value of the id attribute must be unique within the entire document. Only alphanumeric characters and the underscore (_) character can be used for the string and the first character must be a letter.
You can assign style settings to the object with the id attribute (#id {color:red;}). See Example 1 for details.
The value of the id attribute can be used for the href attribute. In that case, the element is the target of the link. See the page for the href attribute or Example 2 for details.
Or you can use the identifier in the for attribute of the label element to attach information to controls.
JavaScript page for this attribute: id. You can find other example(s) there.

Possible values:

String that sets the identifier of the object.
Default: this attribute has no default value.

Example HTML code 1:

This example illustrates the contact of the id attribute and the style settings:
<head>
    <style>
        #sampleID {color:red;}
    </style>
</head>
<body>
    <span id="sampleID">The color of this text is red.</span>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the id attribute for link targets:
Table of contents:
<ul>
    <li><a href="#section1">1. Section</a></li>
    <li><a href="#section2">2. Section</a></li>
    <li><a href="#section3">3. Section</a></li>
</ul>

<b><span id="section1">1. Section</span></b><br />
First line in the section.<br />...<br />...<br />...<br />
Last line in the section.<br /><br />

<b><span id="section2">2. Section</span></b><br />
First line in the section.<br />...<br />...<br />...<br />
Last line in the section.<br /><br />

<b><span id="section3">3. Section</span></b><br />
First line in the section.<br />...<br />...<br />...<br />
Last line in the section.<br /><br />
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the id and the for attribute:
<form>
    <input type="checkbox" id="chBox" />
    <label for="chBox">You can change the checkbox state by clicking on this text</label>
</form>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content