Internal page links



Internal page links is the term used to describe links to locations within a page, rather than links into the page from another page or website.

For example, if you have a sub section of a page which displays a subheading, you can direct visitors directly to that part of the page.

This can be done either from an internal link within the page, such as from a menu located near the top of the page, or from a link on an external page, or even from a link displayed on an external website.

Within this website, the About page which is linked to in the left-hand navigation menu, displays several internal text links in the right-hand column of the page.

Clicking the second internal page link, directs visitors to the About the author heading on the page, while clicking the third internal page link directs visitors to the About SBI heading on the page.

The html code used to create the first of those links and create the anchor points adjacent to the headings that clicking the links jumps to is displayed on this page below the video.

Within SBI's BB2 website editor, html code can be added to individual pages or across multiple page by dragging raw html blocks to the appropriate locations in the page. The video shown below provides a visual guide to using html blocks within SBI's BB2 editor.

Click the button below to play the video.


Video copyright © SBI.

Introduction videos

The destination anchor is that part of the html code which is placed adjacent to the location you want to send visitors to on the page.

The link is that part of the html code that is clicked on to send visitors to the location of the destination anchor.

Typical destination anchor code is shown below.

<a id="about-the-author"></a>

Typical link code which creates a link that a visitor would click on is shown below.

<a href="#about-the-author">About the author</a>

The hash symbol # identifies that the following is the id of the destination anchor within the page.

You can change the id to anything you want, except that id's cannot contain spaces or other non standard text characters

Location id's can contain letters (which I suggest should always be lower case), plus numbers, hyphens and underscores.

The destination anchor code and link code with a new id displayed is shown below.

<a id="new-id"></a>

The code that creates a link for visitors to click on is shown below.

<a href="#new-id">Link to a new location</a>

Note that internal page links will not work correctly in the BB2 Preview window. Although will work correctly when your page is built and viewed in a regular browser window.

The id's displayed in the destination anchor code and in the link code must be identical, otherwise the anchor link will not work.

Test creating an anchor link in your test.html page by copying, pasting and modifying id in the code shown above. Build the page and test that the link works correctly in a regular browser window.

Then, copy both parts of the code to a text editor such as Notepad++.

Next, edit the page you want to use the anchor link in. Create the two html blocks that you will need for the two parts of the code, and paste the relevant code into the relevant blocks, then build the page.

Always check the final page in a regular browser window to ensure that the internal page links each work correctly and send visitors to the appropriate location on the page. If a link works OK in one web browser, then it should work OK in all web browsers

By creating a link on an external page, or even on another website using code similar to that displayed below, with website URL, the page URL, the hash and the anchor name included in the URL, visitors who click the link will be sent directly to the appropriate page, and to the appropriate location on the page.

<a href="http://www.making-websites-made-simple.com/about.html#about-sbi">About SBI</a>

Return to the top of the internal page links page.

Return to the website technology page.




















































































Article by ©