Can I Anchor a Div?

by Sara Williams

Anchors have long been used to link to specific parts of Web pages. An anchor consists of a hyperlink created by anchor tags and an element -- headings, paragraphs, images and divs, to name a few examples -- that contains an ID. As long as a div has an ID, it is usable as an anchor.

HTML Anchors

An HTML anchor uses the “<a>” anchor tags to link to any element by its “name” or “ID” attribute. Though “name” was used in the past, use of “ID” is considered a best practice since “name” is now a deprecated -- not current -- attribute in HTML 4 and above. Instead of creating a link that points to a file path, you can create a link pointing to any HTML element's ID or name.

Uses of Anchors

Anchors are typically used on Web pages that contain large amounts of text. On a Web page that has many sections with sub-headings, you can create a list of links that act as a table of contents. Each link would point to a heading tag or div by its ID. Another use of anchors is to create “jump” links that take the user back to the top of a long Web page, which reduces the need for scrolling. It is also possible to link to a specific part of another page.

Anchoring a Div

Adding an ID to a div will allow you to link to it using “<a>” tags: <div id=”my_stuff”> Content... </div> The ID is now accessible by anchor tags, style sheets and JavaScript. If you have a div that already contains an ID, you will need to use that ID.

Linking to a Div Anchor

The method for creating a link to an anchored element involves setting the “href” attribute of a pair of “<a>” tags to the ID name, prefixed by a hash symbol: <a href=”#my_stuff”>Go to My Stuff</a> <a href=”page2.html#mystuff”>Go to My Stuff on Page 2</a> The first link will send the user to the element with an ID of “my_stuff,” so long as it is on the same page that is being viewed in the browser. The second link will load a different page in the browser and jump to the “my_stuff” div.

About the Author

Sara Williams lives in western New York, where she is a freelance Web designer and content writer. She specializes in Web design, development and computer-hardware topics. Williams holds an Associate of Applied Science in computer information systems.