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 “” 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 “” tags:

Content...

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 “” tags to the ID name, prefixed by a hash symbol:

Go to My Stuff Go to My Stuff on Page 2

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.

Writer Bio