ID Attribute and How It's Used

Use ID Attribute as Link Destination in HTML

The id attribute is best used as a locator for an intradocument Link in HTML

Here's how to use the id attribute for linking.

Did you try it?

Here's the code.
We place a unique id in the h2 header tag at the bottom of the page that looks like this:
<h2 id="freetools">Free Tools We Recommend</h2>

The link that jumps to that location looks like this:
<a href="#freetools">Click this Link</a>

The link that jumps back to the top looks like: <a href="#topid">Back To Top</a>
and its destination <h1 id="topid">ID Attribute and How It's Used</h1>

See also: Intra-document Links for more detailed information.

ID Attribute or Class Attribute

Though using the id attribute in the manner explained here is acceptable, the better option is using the class attribute for defining style settings.
See: 'When to Use Class' and 'IDs for Linking' below.

The ID attribute can be used with all HTML tags in HTML 5. It can be used with paragraph tags, division tags, table tags and form tags to name a few. Use it to create variations in similar code structures.

The attribute is placed in the tag as shown
Code:
<div id="site-head">
To assign style sheet settings to the division which carries the site-head ID, you would place the following code in the style sheet.

#site-head { color :#FF0000;background-color :#FFFFFF}

Now if we had more than one division on the page only the text placed in the division site-head would be displayed in red text.

The code shown here would place a border around the left-body division.
#left-body { border: solid #000000 1px }

The id attribute is of great value when the goal is to produce HTML pages with very concise code. You could actually control the entire page diagramed below using a linked style sheet.

<body>
<div id="site-head"></div>
<div id="main-body">
<div id="left-body"></div>
<div id="right-body"></div>
</div>
<div id="footer"></div>
</body>

We don't recommend using the id attribute in this manner! Use the class attribute for building your style sheet.

When to Use Class

You might be tempted to over use the id attribute for naming elements on your web page.

If you are going to use the same element on the web page more than once, use class instead of the id attribute.

For example, if you name a division main, don't use the main division more than once on the same page.

If you have a particular configuration for an element that you want to use several times on the same page use class.

Suppose we wanted a section of our page to have a light yellow background color.

In the style sheet we might use:
div.yellow { background-color: #ffff00}

In the html code we would specify the division as <div class="yellow"></div>

If you wanted to have some of your paragraphs on a page displayed in bold underline, you would create a class.

Style sheet:
p.boldunderline { font-weight: 700; text-decoration: underline }

Html code:
<p class="boldunderline"></p>

Using id for an element used several times on a page, may work, but it will play havoc with your W3C validation. Multiple use of the same id will not validate.

Note: Never make these mistakes:
<h1 id="topsection" class="topsection">Section Header Text</h1>.
or this
<div id="site-head"></div>
<h1 id="site-head">Section Header Text</h1>

IDs must be UNIQUE!

See also: Class Attribute