When you are working with long, content-heavy webpages, it is always good practice to give the user the option of jumping to different spots within that webpage.  This method insures the user does not become overwhelmed by all of content on the page, and speeds up accessibility of the page.

How does the ID attribute work?

Using the ID attribute to create an in-page link (also known as an anchor link) involves a two-step process. First, you must embed the ID attribute in the document.  The ID attribute (id=”value”) marks the location in the document that you will jump to.  For example, let’s say we have a heading (“h” tag) in the middle of our html document, to mark this heading, we will place the ID attribute right next to the opening tag. So in the opening tag, we will have ‘h2 id=”value’ in the tag.

Notice that in id=”value”, value is the actual name attributed to the ID.  In the next step, when the hyperlink is created, the name of the ID will be used to associate both the ID attribute (marked location) and the hyperlink to create the in-page link.

Once a location within the page has been marked, a hyperlink must be created so the user can jump to the marked location.  The syntax for the hyperlink is opening “a” tag with ‘href’ equal to some value. Jump to the value closing “a” tag.

The hyperlink looks similar to any other hyperlink used in HTML, however there is a subtle difference.  If you notice, there is a pound (#) sign just before the name of the ID attribute.  This pound sign is crucial as it calls the marked id in the first step. It is very important to point out that each ID name you create must be unique.  If you use the same name more than once, the browser will use the first occurrence of the ID name, and will ignore all others.

The HTML

The HTML sample is rather lengthy, as to demonstrate the use of an ID attribute in a long, content rich page:

The hyperlink is located at the top of the page, and the ID attribute is attached to the <h3> tag at the bottom of the page.

A Few Last Words…

As you can see, using the ID attribute can be very useful for creating in page links to skip over large amounts of information. You will see prime examples of this technique in indexed webpages such as directories, or listings that are comprised of large amounts of information.  Using the ID attribute wisely lets users find the information they are looking for quickly and efficiently. This is also a way to insure that a user does not get frustrated trying to find specific information and can retain more traffic to your longer pages. Join us next time for additional HTML tutorials!
Download Source Files