This page shows the HTML code for making hyperlink bookmarks within the same page. This is achieved by using two different hyperlink codes.

These hyperlink codes work together in pairs. One is the Go-To Target hyperlink and the other is the Destination Bookmark. Example layouts are also provided.

Insert the following HTML code into the part of the web document you want to bookmark.

<a id="top"></a>

Now make a hyperlink that points to the bookmark:

<a href="#top">Top of Page</a>

Top of Page

The following bookmark layout displays the links in a list. Useful for placing at the top of long documents.

<a id="top"></a>

<a id="bookmark"></a>
<h2>Hyperlink Bookmark Code</h2>

<a id="example"></a>
<h2>Example Bookmark Layout</h2>

<a id="example2"></a>
<h2>Another Example Layout</h2>

<li><a href="#top">Top of Page</a></li>
<li>a href="#bookmark">Hyperlink Bookmark Code</a></li>
<li><a href="#example">Example Bookmark Layout</a></li>
<li><a href="#example2">Another Example Layout</a></li>

<p style="text-align: center; width: 95%; padding: 15px;">
<a href="#top">Top of Page</a> |
<a href="#bookmark">Hyperlink Bookmark Code</a> |
<a href="#example">Example Bookmark Layout</a> |
<a href="#example2">Another Example Layout</a>

Top of Page | Hyperlink Bookmark Code | Example Bookmark Layout | Another Example Layout

Play around with the style property values such as colors, padding, width, border sizes and box-shadow to achieve different effects.

Web Design