It's a simple matter convert your internal navigation structure to use IDs. Just replace the NAME attribute with ID and that particular element automatically becomes an anchor. Like this:
<h2 id="history">Sea Otter History</a>
<h2 id="diet">Sea Otter Diet and Habits</h2>
<h2 id="pets">Sea Otters as Pets</h2> |
Uses For IDs
That's not all: the ID attribute can be a real workhorse on a Web page. Because it's targeted to a single page element (a particular paragraph, list, etc.), you can use the ID attribute as a multi-purpose tool.
- Applying Styles Using IDs
This is the most common use for the ID attribute. It's used to apply CSS properties to a particular page element. As with page anchors, setting this up is a two-step process:
- Add the ID attribute to the page element.
- Define a style property
|
So let's go back to our Sea Otter page and apply a style to the first H2 element. We've already finished step one:
| <h2 id="history">Sea Otter History</a> |
Now, jump up to the HEAD section of the page and define the ID's style properties inside the opening and closing STYLE tags:
<style type="text/css">
#history{background-color:navy; color:white;}
</style> |
Note the presence of the "#" sign in the style definition!
That creates a section header that has a navy background with white text and is an internal page link. Instead of using both a NAME attribute and an ID attribute, you get two uses from one attribute.
- Refine your CSS rules: In CSS, you can apply styles to HTML tags so that (for instance) every H3 tag looks just like every other H3 tag. You can also create a CLASS: CSS properties that can be applied to a group of page elements. Finally, there's the ID, which can only be applied to a single page element.
You may have all your links styled in a particular way, but you want the one that links to your hot sale items to really stand out. Style it differently using the ID attribute.
- Trigger JavaScript events: When you're creating dynamic HTML pages (mixing CSS and JavaScript for page layout and to create special effects), you'll use the ID attribute a lot. DHTML uses layers: objects that are created when an ID attribute is added to a DIV tag. Then the objects are manipulated using JavaScript functions.
Data processing: Different user agents use IDs to extract data from the HTML code and save it to a database or extract it for use in other programs.
|
The cool thing about ID is that a single ID attribute can be used for all this: page anchors, CSS, JavaScript, and data processing.
CSS 