- Page Index
- Anchor Tag for Clickable Links
- Anchor Tag for Bookmarks
- Linking to Bookmarks
- Back to Top / Top of Page
The ANCHOR tag, or the A tag, may be the most famous of all the tags. It is the tag that makes clickable links to other HTML pages or Internet resources, which may be the most useful feature of the World Wide Web.
The anchor tag actually has two uses. The first one, as mentioned above, is to make clickable links. The other use is to create an anchor, or a place within a document that you can click to. These anchors are also commonly called bookmarks. However, they have nothing to do with using your browser to bookmark a page.
Anchor Tag for Clickable Links
Using the anchor tag to make links to other pages is the most common and famous use of the anchor tag. To make a clickable link, you’ll need to use the
href attribute within the anchor tag. The
href attribute takes a URL of some webpage, an anchor, or some other resource on the Internet. (I haven’t discussed URLs in detail yet, but, for now, just now they let the browser know where something is located out on the Internet.) Let’s look at an example of how to make a clickable link to Google.
|Example of a Clickable Link|
|code||<a href="http://www.google.com">click here to go to Google</a>|
|results||click here to go to Google|
Anchor Tag for Bookmarks
Bookmarks are sections within a page that can be linked to. They are great for making a page index (a list of links that link to important sections within the same page). Please note that bookmarks — in this sense — are not the same as when you bookmark an entire web page so that you can easily visit it later. Remember, here I am talking about sections within a page that can be linked to.
Actually, using the anchor tag is NOT the best way to make bookmarks or internal page links, but it is a widely-used way, so I’m going to show it to you. Afterwards, I will show you a better way that’s also easier and neater looking.
Old, Bad Way to Make Bookmarks: Use Anchor Tag
To make a bookmark with the anchor tag, you will need to use the anchor tag’s
name attribute (and you would NOT use its
href attribute). The
name can be anything that you want it to be, just make sure that you use the name only once in a particular webpage. Below I will show you code to make an anchor for the section of this page that describes anchors.
|Example of Making Anchors|
|code to make anchor||<a name="anchor-tag-for-bookmarks">Anchor Tag for Bookmarks</a>|
You can put these bookmark-type anchors around any set of words within a webpage, or even around other in-line HTML elements (as opposed to block elements) as I’ve done in the example above. A common use is to put the name anchor inside a pair of heading tags (
h2, etc.) around the text of the heading. This makes a heading you can click to within your document.
|Using the name anchor inside a heading element|
|<h2><a name="anchor-tag-for-bookmarks">Anchor Tag for Bookmarks</a></h2>|
Bookmark-type anchors don’t generally affect the appearance of the text except possibly when you hover your mouse over the text (it may underline and change color). If you have any appearance issues, you can take care of them with CSS styling rules.
New, Improved Way to Make Bookmarks: Use
So, basically, any element that has an
id attribute already IS a bookmark. So, just put an
id in any element you wish to be a bookmark (headings are particularly well-suited for this). Below is the same example as the one above except that it uses an
id attribute in the
h2 element to create the bookmark.
|<h2 id="anchor-tag-for-bookmarks">Anchor Tag for Bookmarks</h2>|
Linking to Bookmarks
Whether you use an anchor tag with a name element or use the
id attribute, when you want to link to a bookmark, you will need to use the anchor tag with the
href attribute (just like when creating any other link).
When creating a link that navigates to a bookmark, you need to add a pound sign (#) plus the name of the bookmark on to the end of the page’s URL in the
href attribute. If the bookmark is in the same page as the link to the bookmark, the
href can simply be the pound sign (#) plus the bookmark name. If you’re linking to the bookmark from a different page in the same site or a different site altogether, it gets a little more complicated, but I think it will be clearer to see an example. Let’s consider how we would link to this very section (Linking to Bookmarks) of this very page.
|Examples of Links That Point to Bookmarks|
|Link from same page||<a href="#linking-to-bookmarks">Linking to Bookmarks</a>|
|Link from a different page but same site||<a href="/html-tutorials/anchor-tag/#linking-to-bookmarks">Linking to Bookmarks</a>|
|Link from a different site||<a href="http://www.htmltutorialforbeginners.com/html-tutorials/anchor-tag/#linking-to-bookmarks">Linking to Bookmarks</a>|
In the above three examples, the first two are examples of relative URLs while the third is an example of an absolute URL. The pound-sign (#) is the beginning of what’s called a fragment, which is a part of a URL.
To see what it is like to navigate to a bookmark within a page click here (it will return you to the top of this very section).
Back to Top / Top of Page
Every webpage has a built-in bookmark, which is #top. This is great for making those “back to top” links that you’ll sometimes see in really long webpages. So, you never have to define #top with an anchor tag, but you can always link to the top of a webpage by using the built-in #top anchor or bookmark.
|Example of the Built-in #top Bookmark|
|code||<a href="#top">back to top</a>|
|results||back to top|
Well, our next lesson is on the image tag. But this wraps up our lesson on the anchor tag.