This page shows the HTML code for making hyperlink bookmarks within the same web 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.

Publii static website generator automatically builds bookmarks into web pages. I have put some bookmarks on the page as a demo. See post to try it out.

Drag and Drop Online Shop