HTML Links: href, Relative URLs, Absolute URLs and Page Fragments

HTML links are created with the <a> element and its href attribute. The link text tells the user where the link leads.

<a href="https://www.plus2net.com/">Visit plus2net</a>

In this example, https://www.plus2net.com/ is the destination URL and Visit plus2net is the linked text.

Use meaningful link text. Text such as "HTML form tutorial" is more useful than vague text such as "click here" because it helps users understand the destination before following the link.

Show Table of Contents

Basic Link Syntax
Destination URL and Link Text
Relative URLs
Link to a Parent or Sibling Directory
Root-relative URLs
Absolute URLs
File-system Paths Are Not Web URLs
External Links
target and rel
Link to a Section of Another Page
Link Within the Same Page
Style Links with CSS
Useful Anchor Attributes
Exercises
Video Tutorial
Related Tutorials
Common Link Mistakes
FAQs

Basic Link Syntax Top ↑

<a href="destination.html">Link text</a>

The opening <a> tag starts the link and the closing </a> tag ends it.

Destination URL and Link Text Top ↑

<a href="https://www.plus2net.com/">More on plus2net</a>

href="https://www.plus2net.com/" gives the destination.
More on plus2net is the visible link text.

The linked text is often called anchor text. It should describe the destination or action clearly.

Relative URLs Top ↑

A relative URL points to a resource based on the location of the current document.

If test1.htm is in the same directory:

<a href="test1.htm">Go to test1.htm</a>

Relative URLs are useful for links between pages that move together as part of the same website.

Link to a Parent or Sibling Directory Top ↑

../ moves one directory level up from the current document.

<a href="../test1.htm">Go to test1.htm</a>

To move up two levels and then into another directory:

<a href="../../another_dir/test1.htm">Go to test1.htm</a>

The path is resolved relative to the URL of the current page.

Root-relative URLs Top ↑

A URL beginning with / starts from the root of the current website.

<a href="/html_tutorial/html_form.php">HTML Form Tutorial</a>

This is different from a local disk path. The browser resolves it from the current site's origin.

Absolute URLs Top ↑

An absolute URL includes the scheme and host, so it identifies the destination independently of the current page's directory.

<a href="https://www.plus2net.com/html_tutorial/html_form.php">HTML Form Tutorial</a>

Absolute URLs are commonly used when linking to another website. They can also be used for links on the same site when a fully qualified URL is needed.

For normal internal navigation, relative or root-relative URLs are often easier to maintain because they are not tied to one protocol and hostname in every link.

File-system Paths Are Not Web URLs Top ↑

The previous version of this tutorial used a Windows path such as:

H:\html_files\my_dir\test1.htm

That is a local file-system path, not a normal website URL. A web page served through HTTP or HTTPS should link with URLs such as:

<a href="/my_dir/test1.htm">Go to test1.htm</a>

or:

<a href="https://www.example.com/my_dir/test1.htm">Go to test1.htm</a>

Do not build website navigation from drive-letter paths such as C:\ or H:\. Those paths describe one computer's file system and are not portable web addresses.

External Links Top ↑

An external link uses the URL of another website:

<a href="https://www.google.com/">Visit Google</a>

The same anchor element is used for both internal and external links. The difference is the destination URL.

target and rel Top ↑

By default, a normal link opens in the current browsing context.

<a href="page-demo.php">Open demo</a>

If there is a genuine reason to request a new tab or window, use target="_blank":

<a
  href="https://www.example.com/"
  target="_blank"
  rel="noopener"
>Open external site</a>

rel="noopener" prevents the opened page from using window.opener to control the source page in browsers where that relationship would otherwise exist.

Do not force every link to open in a new tab. Let normal links behave normally unless a new browsing context has a clear purpose.

Link to a Section of Another Page Top ↑

Give the destination element an id:

<h2 id="installation">Installation</h2>

Then append the fragment identifier after # in the link:

<a href="targetPage.html#installation">Go to Installation</a>

The browser loads targetPage.html and attempts to move to the element whose id is installation.

Modern HTML: the old pattern <a name="targetloc"> should be replaced by an id on the actual destination element.

Link Within the Same Page Top ↑

To jump to another section of the current document, link directly to that element's id:

<a href="#faq">Go to FAQs</a>

<h2 id="faq">Frequently Asked Questions</h2>

A common example is a "Back to top" link:

<h1 id="top">Page Title</h1>
<a href="#top">Back to top</a>

See linking to different parts of the same page.

Style Links with CSS Top ↑

The old HTML attributes link, alink and vlink are obsolete. Link appearance should be controlled with CSS.

a {
  color: #0056b3;
}

a:visited {
  color: #6f42c1;
}

a:hover,
a:focus {
  text-decoration: underline;
}

a:active {
  color: #b02a37;
}

See styling hyperlinks with CSS.

Useful Anchor Attributes Top ↑

Attribute	Purpose
`href`	Specifies the destination URL or fragment.
`target`	Chooses the browsing context, such as `_blank` when a new context is intentionally requested.
`rel`	Describes the relationship between the current page and the linked resource; commonly paired with certain target or external-link behaviors.
`download`	Suggests downloading the linked resource instead of navigating to it, subject to browser and origin rules.
`hreflang`	Indicates the language of the linked resource.
`type`	Provides a hint about the MIME type of the linked resource.

Obsolete HTML: link, alink and vlink are not attributes of the <a> element. Older HTML used similarly named presentation attributes on <body>. Use CSS instead.

Exercises Top ↑

Create a page named search.htm with three links that point to Google, Yahoo and Bing. Use descriptive link text for each destination.

Create test1.htm, test2.htm and test3.htm. Each page should contain links to the other two pages. Use relative URLs so the three files can be moved together without rewriting every link.

Video Tutorial Top ↑

HTML Hyper links to navigate between web pages using address or URLs in networks

Link Within the Same Page Using Buttons as Hyperlinks HTML Page Demo CSS Styles for Links Image Maps Email Links

Common Link Mistakes Top ↑

Writing an anchor tag without href Top ↑

For normal navigation, put the destination in the href attribute of the <a> element.

Using a drive-letter path as a website URL Top ↑

Paths such as H:\html_files\... describe one computer's file system. Use relative, root-relative or absolute web URLs.

Using name anchors for modern fragment navigation Top ↑

Give the destination element an id and link to that id with #fragment.

Using link, alink or vlink to change colours Top ↑

These old presentational attributes should be replaced with CSS pseudo-classes such as :link, :visited, :hover, :focus and :active.

Using vague anchor text Top ↑

Prefer text that identifies the destination or purpose instead of repeating "click here" across a page.

Forcing every external link into a new tab Top ↑

Use normal navigation by default. Request a new browsing context only when it has a clear reason.

Frequently Asked Questions Top ↑

Q1: Which HTML element creates a hyperlink?

Use the anchor element, <a>, with an href attribute that contains the destination URL or fragment.

Q2: What is the difference between a relative URL and an absolute URL?

A relative URL is resolved from the current document or site path. An absolute URL includes the scheme and host, such as https://www.plus2net.com/.

Q3: How do I link to a section on the same page?

Give the destination element an id and link to it with href="#id-value".

Q4: Should I use the name attribute on an anchor as a page target?

For modern HTML, use an id on the destination element instead.

Q5: How do I change link colours?

Use CSS. Do not use obsolete link, alink or vlink presentational attributes.

Q6: What does target="_blank" do?

It requests that the linked document open in a new browsing context, commonly a new tab. Use it only when that behavior is intentional.

Q7: Can I use a Windows file path such as C:\folder\page.html as a website link?

No. A website served over HTTP or HTTPS should use web URLs rather than local drive-letter paths.

HTML Images HTML Headings Using Buttons as Hyperlinks Links Within a Page HTML Tutorials

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

HTML Links with <a> and href