PrevNext

AnchorTag

Links are fundamental to navigating the web. In HTML, links are created using the <a> tag, also known as the Anchor tag.

Key Characteristics of HTML Links

  • Specified by the <a>tag.
  • Also known as hyperlinks.
  • Used to link one document to another.
  • Includes a closing tag </a>.

Syntax of HTML Links

app/page.tsx
1<!DOCTYPE html>
2<html>
3<head>
4  <title>My Webpage</title>
5</head>
6<body>
7
8  <!-- Link at the top -->
9  <a href="#gardening-tips">Go to Gardening Tips</a>
10
11  <!-- Some content -->
12  <p>Here is some other content...</p>
13
14  <!-- Gardening Tips Section -->
15  <h2 id="gardening-tips">Gardening Tips</h2>
16  <p>This section provides tips on how to garden...</p>
17
18</body>
19</html>

Essential Attributes of the Anchor Tag

HTML links primarily use two attributes:

  • href attribute: Defines the URL the link points to.
  • target attribute: Specifies where to open the linked document.

Target Attribute Values

  • _blank: Opens the linked document in a new window or tab.
  • _top: Opens document in the full body of the window.
  • _self: Opens document in the same window or tab (default behavior).
  • _parent: Opens the linked document in the parent frame.

Linking to Specific Page Sections

To link to a specific section of a webpage, you can:

  • Use the name or id attribute of the target section.
  • Use a hyperlink with a hash (#) followed by the target id or name.

Example

Let's say you have a long webpage with multiple sections, and you want to create a link at the top that, when clicked, takes the user directly to a specific section further down the page. You can do this using HTML links that target specific sections.

Link Colors

Links typically appear in different colors based on their state:

  • Active: Displayed in red and underlined like this sentence
  • Visited: Appears purple and underlined like this sentence
  • Unvisited: Shown as blue and underlined like this sentence

You can customize these colors using CSS to better match the style of your website.

PrevNext