HTML and CSS Reference
In-Depth Information
Bookmarks
Most links on our website will lead us from one page to another. When we click on a link
and a new page is loaded, by default we are taken to the top of the indicated page, but the
link doesn't always have to point to the top. We can also create links to specific parts of a
page. This is particularly useful when we want to direct the user to a particular segment of
a long, scrolling page. The position on the page to which we send the user is a specific tag
called a fragment. We can create links to fragments on the current web page or to a specific
fragment on another web page.
Creating a link that points to a fragment is a two-step process:
First we identify the tag to which we will point by extending the tag with the id attribute.
The id attribute assigns a unique name to any HTML element. For instance, let us say that in
our CV sample we want to create a navigation menu that will point to different fragments of
the CV. And let us assume that we want these fragments to be defined at each <h2> heading:
Personal Information, Education, Skills and Portfolio. We need to identify the headings that
we want to point to and we will do this as follows:
<h2 id="education">Education</h2>
By placing an id attribute in the <h2> heading, we have effectively created a bookmark.
Second, we create a link that points to this bookmark. To do this, we add the number-sign
symbol (#) followed by the bookmark name in the href attribute of an <a> element. For ex-
ample:
<a href="#education">Education</a>
We can also create a link to a bookmark on a different page. All we need to do is append the
bookmark to the end of the URL. For example:
<a href="sample_cv.html#education">Education</a>
When users click on this link the browser will first take them to the sample_cv.html page
and then scroll them down until they reach the #education bookmark.
Search WWH ::
Custom Search