IDs in Action

As we saw earlier, there can only be one unique ID per page (even if its attributed to two different elements). The following XHTML snippits would both be invalid:

<div id="navigation">Some text.</div> <div id="navigation">Some more text.</div>

Or:

<div id="navigation">Some text.</div> <ul id="navigation">Some more text.</ul>

Using IDs to Refer to Structural Parts of a Document

IDs are most powerfully employed when marking up the parts of a document using the <div> tag. Remember that <div> tags can contain any other tags, including other <div>s.

So in building a page with solid structure, we might have something like this:

<div id="pagecontainer"> <div id="pageheader"></div> <div id="navigation"></div> <div id="pagecontent"> <div id="summary"></div> <div id="fulltext"></div> </div> <div id="footer"></div> <div>

In the example above, everything is nested inside of <div id="pagecontainer">, and we have further nexting of <div id="summary"> and <div id="fulltext"> inside of <div id="pagecontent">.

Regardless, it should be fairly obvious what types of information each of these divs contain.

Using IDs in URLs

Some people like to give unique IDs to items like headers, for the convenience of directing users to specific parts of longer pages. For example, if we had a <h2 id="structuralparts">, as the <h2> tag does above (Using IDs to Refer to Structural Parts of a Document), we can refer to this in the URL by adding a pound sign to the URL: http://www.multimediawriting.com/resources/598/#structuralparts.

We'd use a similar technique to direct mouseless and text-only users to the content of our page. In the example code above, we might have a link at the very beginning of the <div id="navigation"> tag that says "Skip Navigation," e.g.,

<div id="pagecontainer"> <div id="pageheader"></div> <div id="navigation"> <a class="noshow" href="#pagecontent"> Skip Navigation</a></div> <div id="pagecontent"> <div id="summary"></div> <div id="fulltext"></div> </div> <div id="footer"></div> <div>

We even augmented it with a class="noshow" like we saw earlier in the Classes in Action section to use CSS to hide the "skip navigation" link from sighted users.

Updated on Mon. Feb. 27 2006 at 12:35PM