Hyperlink HTML Bookmark Code
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.
Hyperlink HTML Bookmark Code
Insert the following HTML code into the part of the web document you want to bookmark.
Code - Bookmark Target Destination
<a id="top"></a>
Now make a hyperlink that points to the bookmark:
Code - Go-To Target Hyperlink
<a href="#top">Top of Page</a>
Output
Example Bookmark Layouts
The following bookmark layout displays the links in a list. Useful for placing at the top of long documents.
Code - Bookmark Target Destination
<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>
Code - Go-To Target Hyperlink
<ul>
<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>
</ul>
Output
Code - Example Horizontal Layout
<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>
</p>
Output
Top of Page | Hyperlink Bookmark Code | Example Bookmark Layout | Another Example Layout
Hyperlink Articles
- How to make a hyperlink.
- How to make underline hover effects.
- How to open a hyperlink in a new window.
- How to hyperlink bookmark on the same page.
- How to change hyperlink color.
- How to remove hyperlink underline.
- How to make an image hyperlink.
- How to change hyperlink underline color.
- How to make email address hyperlink.
- How to make a link button.
Advertisement
