First time visitor? The tutorials start here.

xHTML id attribute

While the same class can be used repetitively within the same page (see my previous article on the <div> tag where I have more than one class="box"), you can only have one occurrence of each id per page.

Unlike classes, an id is a unique identifier, such as a passport number, driver’s license number, social security number, etc. Of all these things, no two people should ever have the same id.

As with class names, you can make up whatever name (or “value”) you want for each id, but you should always choose a name that makes sense. For example:

<div id="container">

<div id="header">
     Page header goes here.
</div><!-- end header -->

<div id="content">
     Main content of the page goes here.
</div><!-- end content -->

<div id="footer">
     Footer goes here.
</div><!-- end footer -->

</div><!-- end container -->

This page has one header, one main content area, and one footer. Just as easily, I could have given these sections the ids of “wrapper,” (the outer <div> in this example contains or wraps around everything else on the page) “top,” “main,” and “bottom,” or any other names that would adequately describe what will go into each section.

Although I showed you how to make hidden comments in xHTML, this is the first time I’m showing you in practice, because this is when it really starts to come in handy. Without the xHTML comments I added in this example, it could be very difficult to tell which <div> is being closed off when you are nesting divs inside each other and see </div> in the code all by itself.

It’s important to know which <div> you are closing, so I will stress the benefit of labeling each </div> with an xHTML comment so you can keep track of them.

I’ll get into styling ids shortly, but first I want to cover another simple use for them. If you have been following links within these posts, you may notice that some of them take you to specific areas of the page.

Not only can you target ids for styling, but you can also target them with links. To demonstrate how this works, make sure the paragraph you are currently reading is at the bottom of the page. Is this paragraph at the bottom now? Good. Now when you click on this link, the “Jump to…” heading will be at the top of the page.

The code for the “Jump to…” heading looks like this:

<h2 id="links">Jump to...</h2>

To jump to that heading from the same page, the anchor link would look like this:

<a href="#links">

Follow that tag with whatever text or image you want people to click on, then close it as you would any other anchor link, with:

</a>

Look at the address in your browser’s address bar and you’ll see that it now ends with #links because you clicked on that link. If you want to take people to a specific part of a different page, you would use the url of the page (it can be absolute, relative, or root relative, depending on the circumstances), then follow that url with # and the id value (the name you used for the id).

For this example, I’ll show you how to link to the “Proper Nesting” section on the “xHTML Basics” page.

That page is located here:

http://ifyoucodeittheywill.com/2009/03/xhtml-basics/

Since we are already at ifyoucodeittheywill.com, we can use a relative URL or a root-relative URL. Since I prefer root-relative over relative to the current page, I will use
/2009/03/xhtml-basics/ as the url.

Here is the xHTML for the “Relative URLs” heading on that page:

<h2 id="relative-urls">Relative URLs</h2>

Putting those together to form our anchor link (don’t forget the # sign to specify that “relative-urls” is an id) and making “Relative URLs” the text we want people to click on, you get:

<a href="/2009/03/xhtml-basics/#relative-urls">Relative URLs</a>

When you think about it, this would not work if you had more than one id="relative-urls" on the page. If there was more than one “relative-urls,” then which “relative-urls” would it jump to? Again, I stress the importance of having only one of each id on a page, because that’s what an id is… a unique identifier.

Anchor links are not the only situation where “id” and “#” have a direct relationship. Conveniently, CSS uses “#” to specify ids as well. In my next article, I will show you how to style ids with CSS…

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.