|
HTML Tip:
Identify Your Page Elements
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
When you're trying to slim down your HTML pages, every character counts. They also count when you're coding or maintaining a page: one misspelling in your HTML code may break the page! So why use two attributes when one will do? Consider using the ID attribute to replace the NAME attribute on your page anchors.
Internal Page Navigation
Page anchors are used to define internal page links for long or complex Web pages. They're usually placed near or at the top of a Web page so that visitors can easily skip to a particular section or article that's far down on the page. It's a way to keep important content "above the fold" on a Web page.
Page anchors have two parts: the link to the Web page section and the identifying attribute in the page section itself. Before you set up a working page anchor, you have to give the section a unique name using the NAME attribute.
Suppose your Sea Otter Web page has 3 major sections defined by H2 tags. By giving each a unique NAME attribute, you can design an internal page navigation structure:
<h2 name="history">Sea Otter History</a>
<h2 name="diet">Sea Otter Diet and Habits</h2>
<h2 name="pets">Sea Otters as Pets</h2> |
Then, when you're coding page anchor links, refer to that name inside the anchor tag:
| <a href="#history">Sea Otter History | <a href="#diet">Diet and Habits | <a href="#pets">Otters as Pets</a> |
Note how the "#" sign goes in front of the NAME value in the anchor tag. That flags the browser to look for the section inside the current Web page instead of requesting another Web page from the server.
Replace NAME With ID
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> |
The anchor tag code doesn't change at all.
So what's the big deal? Making the change only saves two characters each time. No visitor is going to notice much - if any - difference.
But you might. Unlike the NAME attribute, a single ID attribute has multiple uses.
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.
Other 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.
- 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.
Be Careful With Names!
Like everything in CSS and HTML, there are rules you have to follow.
- No beginning numbers. Never begin an ID name with a number. Explorer will handle it ok, but Netscape will ignore it entirely.
All browsers would recognize this:
<h1 id="pageTitle">Page Header</h1>
While Netscape would ignore this:
<h1 id="1pageTitle">Page Header</h1>
- No reserved words. Because you may want to use the ID to execute JavaScript functions, never use a JavaScript reserved word to name an ID. Here's a list of JavaScript reserved words in case you need a refresher.
|
Both of these naming issues will cause problems that will be hard to find and fix. That's because some browsers may display the pages as you expect, while other browsers break the layout. Always test your pages in multiple browsers and browser versions to make sure that your visitors have the best experience possible.
And have the best testing experience possible by using NetMechanic's Browser Photo tool. You'll see actual screen shots of your page in 16 different browser, screen resolution, and operating system combinations. It's like having a full-featured testing lab on your desktop.
|
