• HTML
  • React
  • Knowledge Base
  • HTML
  • React
  • Knowledge Base
  • HTML Tutorial
  • HTML Styles – CSS
  • Link to an Email Address
  • HTML Introduction
  • HTML Editors
  • HTML Basic Examples
  • HTML Elements
  • HTML Attributes
  • HTML Headings
  • HTML Paragraphs
  • HTML Styles
  • HTML Text Formatting
  • HTML Quotation and Citation Elements
  • HTML Comments
  • HTML Colors
  • HTML RGB and RGBA Colors
  • HTML HEX Colors
  • HTML HSL and HSLA Colors
  • CSS Colors, Fonts and Sizes
  • CSS Padding
  • CSS Border
  • CSS Margin
  • Link to External CSS
  • HTML Style Tags
  • HTML Links
  • HTML Links – The target Attribute
  • Absolute URLs vs. Relative URLs
  • HTML Links – Use an Image as a Link
  • Button as a Link
  • Link Titles
  • Absolute URLs and Relative URLs
  • HTML Link Tags
  • HTML Links – Different Colors
  • Link Buttons
  • HTML Links – Create Bookmarks
  • The alt Attribute
  • HTML Images
  • Image Size – Width and Height
  • Image Width and Height, or Style
  • Images in Another Folder
  • HTML Images on Another Server/Website
  • HTML Animated Images
  • Image as a Link
  • Image Floating
  • Common Image Formats
  • HTML Image Tags
  • The render Method

HTML Links - Create Bookmarks

5 views 0

Written by admin
April 15, 2023

In HTML, you can create bookmarks or anchor links that allow users to jump to specific sections of a web page. To create a bookmark, you need to use the id attribute to give the section a unique identifier, and then create a link to that identifier using the href attribute.

Here’s an example:

<h2 id="section1">Section 1</h2>
<p>This is the content of section 1.</p>

<h2 id="section2">Section 2</h2>
<p>This is the content of section 2.</p>

<a href="#section1">Jump to Section 1</a>
<a href="#section2">Jump to Section 2</a>

In this example, we have created two sections with unique identifiers using the id attribute. We then created two links that use the href attribute to point to the section identifiers. When the user clicks on one of the links, the browser will scroll to the corresponding section of the page.

Note that the id attribute must be unique within the web page. If you have multiple elements with the same id, the bookmarks will not work correctly.

You can also use bookmarks to create a table of contents for your web page. Simply create links to each section of the page and format them as a list:

<h1>My Web Page</h1>

<ul>
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
</ul>

<h2 id="section1">Section 1</h2>
<p>This is the content of section 1.</p>

<h2 id="section2">Section 2</h2>
<p>This is the content of section 2.</p>

In this example, we have created a table of contents as an unordered list, with links to each section of the page. When the user clicks on one of the links, the browser will scroll to the corresponding section of the page.

Was this helpful?

Yes  No
Related Articles
  • The render Method
  • HTML Image Tags
  • Common Image Formats
  • Image Floating
  • Image as a Link
  • HTML Animated Images

Didn't find your answer? Contact Us

Leave A Comment Cancel reply

Previously
Link Buttons
Up Next
The alt Attribute
Copyright 2022 k-window. All Rights Reserved