In HTML, anchors are used to create hyperlinks within a webpage that allow users to navigate to different sections of the same page or to external pages.

To create an anchor link in HTML, use the <a> tag with the href attribute pointing to the ID of the target element:

  <a href="#section1">Go to Section 1</a>

Target Section with ID

To define a target section within the same page, use an element (like <div>, <section>, or even headings <h1>, <h2>, etc.) with an id attribute:

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

Complete Example

Putting it all together, here’s how you create an anchor link that jumps to a specific section on the same page:

  <!-- Anchor Link -->
<a href="#section1">Go to Section 1</a>

<!-- Target Section with ID -->
<section id="section1">
    <h2>Section 1</h2>
    <p>This is the content of section 1.</p>
</section>

Explanation:

  • <a href="#section1">: Defines a link (<a> tag) with href attribute pointing to #section1, which is the ID of the target section.
  • <section id="section1">: Defines a section (<section> tag) with id attribute set to section1, making it the target of the anchor link.

Summary:

  • Anchors in HTML (<a> tags) are used to create hyperlinks that navigate within the same webpage or to external pages.
  • Using href="#id" allows you to link directly to specific sections of a webpage by referencing the id attribute of the target element.
  • This technique is commonly used for creating table of contents, navigation menus, and internal links within long webpages.