Html links

The HTML Link Element (<link>) specifies relationships between the current document
and an external resource. Possible uses for this element include defining a relational
framework for navigation. This Element is most used to link to style sheets.
A webpage can contain various links that take you directly to other pages and even specific
parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words,

phrases, and images. Thus you can create hyperlinks using text or images available on
a webpage.

Attribute Values

Value Description
The URL of the link.

Possible values:

 An absolute URL - points to another web site (like

href="http://www.example.com/default.htm")
URL  A relative URL - points to a file within a web site (like
href="default.htm")
 Link to an element with a specified id within the page (like
href="#top")
 Other protocols (like https://, ftp://, mailto:, file:, etc..)
 A script (like href="javascript:alert('Hello');")

Types of URL in HTML

Absolute URLs
An absolute URL is the entire address from the protocol (HTTPS) to the domain name
(www.example.com) and includes the location within the website in the folder system
(/foldernameA or /foldernameB) names within the URL. Basically, it's the full URL of
the page that you link to.

An example of an absolute URL is:

<a href = http://www.example.com/xyz.html>

1
An absolute link defines the location of the document in total including the protocol
required to get the document, the server to get it from, the directory it is located in and
then the name of the document itself.

Relative URLs
The relative URL, on the other hand, does not use the full web address and only contains
the location following the domain. It assumes that the link added is on the same site and
is part of the same root domain. The relative path starts with the forward slash and leads
the browser to stay within the current site.

An example of a relative URL is:

<a href = "/xyz.html">

HTML absolute and relative path/links

All HTML links are divided into external and internal. External links are links that lead
from one site to another site or a file located on another site. Internal links are links that
link from one page of a site to another page on the same site or to sections of the same
page.

All external links in the href attribute of the <a> tag contain the absolute path to the
document they reference. Internal links, in turn, can contain both an absolute path and a
relative path (in this case it depends on your personal preferences).

All links can also be conditionally divided into relative and absolute. Relative links are
HTML links that contain relative paths, relative links can only be internal. Absolute
links are links containing absolute paths, absolute links can be both external or internal.

Relative path

The relative path means that the path to the file or page of the site is specified relative to
the directory in which the current page is located, or relative to the root directory of the
site. Consider the parts from which the relative path can consist:

Parts of Description Values example

2
the path

If you specify only the file name as an

attribute value, this means that the desired
file_name page.html
file is in the same folder as the page with
the link.

If the file to which you want to specify the

path is located in the child directory
relative to the file with the link, this means
that we need to go down one level (to the
child folder of the current directory), in
which case the path starts with the name of
the child directory, after it name is the
direct slash "/", it is used to separate parts
of the path, after it the name of the file we
directory/page.html
need is specified.
directory/
directory1/directory2/page.html
Note: You can go down exactly as
many folders down as you created
them. For example, if you created a
folder 10 levels below the root
folder, you can specify a path that
takes you down to 10 folders.
However, if you have so many
levels, this most likely means that
the organization of your site is
unnecessarily inconvenient.

If you want to specify that the file you are ../page.html

referring to is in the parent folder, use the
symbols .. (two dots), they mean to go up ../../page.html
one level (to the parent folder of the
../ current directory). Next, we specify a ../../../dir1/dir2/page.html - go up from
forward slash "/" to divide the parts of the the current folder to the three folders
path, and write the name of our file. above and from there we go down two
levels below to the required file
Note: characters .. you can use as
3
 many times as you like, using them,
you go up one folder each time.
However, you can go up until you
reach the root folder of your site.
Above this folder you can not climb.

A relative path does not have to always

start relative to the current directory where
the pages with the link are located, and it
can also start relative to the site's root
directory. For example, if the desired file is
in the root directory, the path can start with /page.html
/ the "/" character, after which you only
need to specify the name of the file that is /dir1/dir2/car.png
located in the root directory.

Note: When the "/" is indicated first,

it means the beginning of the path
from the root directory.

Absolute path

An absolute path is usually used to specify the path to a file that is located on another
network resource. It is a complete URL to a file or page. In the absolute path, the protocol
is first specified, followed by the domain name (site name). For
example: http://www.example.com - this is how the absolute path to a particular website
looks. http:// is a data transfer protocol, and www.example.com is the name of the site
(domain).

The absolute path can also be used on your own site. However, within the site, it is
recommended to use the relative path as the value of the links.

Reasons for using Absolute linking.

 They are much easier to manage as there is less chance of broken links
appearing when moving documents or pages around.
 There are many more occurrences of full domain name in the source code,
which can only be good.
4
  They are much more recognizable to the visitors who are then more likely to
bookmark the site.
 Search engines can't miss or mess up any links when crawling the site

The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

Linking Documents

The Internet hosts millions of electronic documents that are often similar in content and
targeted to the same user audience. Switching to other documents would seem difficult
and tedious if it were not possible to link HTML documents together using hypertext
links.

In fact, any hypertext link is an address in the global network, where you can instantly
navigate through the browser window. A successful link is possible in two cases: if the
document referenced by the document exists, and if the syntax of the hyperlink is correct
from the HTML point of view.

The <a> tag

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between
the opening <a> tag and the closing </a> tag becomes part of the link and a user can click
that part to reach to the linked document. Following is the simple syntax to use <a> tag.

5
The href attribute as its value contains the address (relative or absolute) to which the link
will be referenced. When the link is clicked, the browser receives and displays the
document whose address is specified in the href attribute:

1 <p><a href="page.html">Link</a></p>

2 <p><a href="https://puzzleweb.ru">Link</a> to the page in Internet.</p>

The result of this example in the browser window:

How to remove underline from link

All HTML links are displayed underlined. This kind of reference is specified in the styles
used by browsers by default. To remove the underline of a link, you need to change the
style for it, you can do this in two ways.

The first way is to add a style attribute to the link that you want to remove underline with
the value text-decoration:none;:

1 <a href="page.html" style="text-decoration: none;">Link without underline</a>

The second way will be suitable in case when it is necessary to remove underline at once
at all references in the HTML document. In CSS styles, we assign for all <a> elements
a text-decoration property with a value of none:

1 a { text-decoration: none; }

Example
<!DOCTYPE html>
<html>
<head>
6
 <title>Hyperlink Example</title>
<base href="http://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm" target="_blank">Opens in New</a> |
<a href="/html/index.htm" target="_self">Opens in Self</a> |
<a href="/html/index.htm" target="_parent">Opens in Parent</a> |
<a href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>
This will produce following result, where you can click on different links to understand the
difference between various options given for target attribute.

Click any of the following links

Opens in New |Opens in Self |Opens in Parent |Opens in Body
Use of Base Path
When you link HTML documents related to the same website, it is not required to give a
complete URL for every link. You can get rid of it if you use <base> tag in your HTML
document header. This tag is used to give a base path for all the links. So your browser will
concatenate given relative path to this base path and will make a complete URL.
Linking to a Page Section
You can create a link to a particular section of a given webpage by using name attribute. This is
a two step process.

First create a link to the place where you want to reach with-in a webpage and name it using
<a...> tag as follows:

<h1>HTML Text Links <a name="top"></a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach:

<a href="/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to
reach to the top of the HTML Text Link tutorial.

Go to the Top

7
 Setting Link Colors
You can set colors of your links, active links and visited links using link, alink and vlink
attributes of <body> tag.

Example
Save the following in test.htm and open it in any web browser to see how link, alink and
vlinkattributes work.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/html/index.htm" target="_blank" >HTML Tutorial</a>
</body>
</html>
This will produce following result. Just check color of the link before clicking on it, next check
its color when you activate it and when the link has been visited.
Click following link

HTML Tutorial
Download Links
You can create text link to make your PDF, or DOC or ZIP files downloadable as follows:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<a href="http://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>
This will produce following link and will be used to download a file.

Download PDF File

File Download Dialog Box
Sometimes it is desired that you want to give an option where a user will click a link and it will
pop up a "File Download" box to the user instead of displaying actual content. This is very easy
and can be achieved using an HTTP header in your HTTP response.

8
Attribute definitions

name = cdata This attribute names the current anchor so that it may be the destination of
another link. The value of this attribute must be a unique anchor name. The scope of this
name is the current document. Note that this attribute shares the same name space as the
id attribute.
href = uri
This attribute specifies the location of a Web resource, thus defining a link
between the current element (the source anchor) and the destination anchor defined
by this attribute.
hreflang = langcode
This attribute specifies the base language of the resource designated by href and
may only be used when href is specified.
type = content-type
This attribute gives an advisory hint as to the content type of the content available
at the link target address. It allows user agents to opt to use a fallback mechanism
rather than fetch the content if they are advised that they will get content in a
content type they do not support.
rel = link-types
This attribute describes the relationship from the current document to the anchor
specified by the href attribute. The value of this attribute is a space-separated list of
link types.
rev = link-types
This attribute is used to describe a reverse link from the anchor specified by the
href attribute to the current document. The value of this attribute is a space-
separated list of link types.
charset = charset
This attribute specifies the character encoding of the resource designated by the
link.
Section Names

Page jumps are just links (they use the same <a> element as all links), but links that point
to a certain part of a document. This is done by assigning names to parts of your page,
and then making the link by referring to that section.

9
Page jumps are done by using the name attribute of the a element. So, say you wanted a
link to the top of your page, you would add an anchor like this near the top of your
document (inside the <body> element, of course):

<a name="top"></a>

There doesn’t need to be anything between the opening and closing tags. Then, in the
place you want to place the link, put

<a href="#top">link to top</a>

Notice the hash mark (#). This tells the browser that it’s a section of a page it’s looking
for, and not a separate page or folder.

So just make a link to the section you named earlier (you can name the link to the top
anything you want, but keeping it memorable and simple always works out best) by
putting a # in front of whatever name you gave it. Always remember, the # goes in the
href attribute’s value, not in the name.

Linking to parts of other documents

You can target specific sections of other pages by adding the #name bit on to the end of
the href. The part after the hash mark is known as a “fragment identifier.” For instance,
to link to the first section of this tutorial from somewhere else, you would write

<a href="http://www.yourhtmlsource.com/
text/internallinks.html#section-names">

Naming Sections with id

The id allows links to be pointed at arbitrary parts of the page is to use the id attribute,
which can be applied to any HTML element. This means you don’t need to keep setting
up new empty a elements throughout your page; you can simply add a unique id value to
an existing element.

For example, here’s how you set up a link using the charming old ways:

<a name="original"></a>
<h2>Original style, using named links.</h2>

Instead of introducing that superfluous a element, the new ways allow us to simply add
an id attribute to our pre-existing heading element. Observe:

<h2 id="modern">Modern style, using id values.</h2>

10
 HTML Linking Tags

Learn how to create links on your web page. Links allow you to jump from one page to
another by clicking on the link text. You can also jump to places on the same page (called
fragments), to different sections of your site, or to another web site alltogether.

Basic Link - <a href="url">link text</a>

There are two main parts to a link tag:

 the text a user can click,

 web address they go to if they click it.

The bit between the <a> and </a> tags is the link text, and is generally displayed in blue
and underlined by web browsers. The href="url" part is the web address, where url can be
set in several ways:

href="example.html" - another page in the current directory

href="example/page.html" - a relative location

href="http://www.example.com/page.html" - a full address (URL).

Link to a Fragment - <a href="#fragment">link</a>

It is often usefull to link to other places on the same webpage, such as other sections or
chapters further down the page. The technical term for this is linking to a Fragment,
where browsers will automatically try and scroll to that part of the page.
Fragments first need to be defined somewhere in a webpage by giving them a name, for
example

<a name="fragment_name">, then links to this fragment are created by using the hash
(#) character:

<a href="#fragment_name">Link</a>.

To link to a fragment on another page you would simply append the fragment name to the
address, for example: href="example.html#fragment_name".

Target Window - <a href="url" target="???">link</a>

11
You may not always want to link to a page and have it load up over the one you are
currently viewing. Thats where the target attribute comes in handy. By setting the
target="_BLANK" the page you link to will load up in a new window (or new tab in
some newer browsers). Similary, "_self", "_parent", or "_top" will open the link in the
current window, the parent window (used with frames) or the top level window,
respectively.

Image as a Link - <a href="url"><img ...></a>

The <img> tag

Many sites use different pictures as links, which by the principle of work are no different
from text links. To replace a plain text link to an image, you need to place an <img> tag
inside the <a> element, which indicates the path to the image. By placing an image tag
between the <a> and </a> tags, you can turn an image into a link, and clicking on that
image will then load the referenced page. You may notice that the image gets a blue
border just as link text became underlined.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
</head>
<body>

<p>Visit our website by clicking on the picture:

<a href="httрs://puzzleweb.ru">
<img src="logo.png" alt="link">
</a>
</p>

</body>
</html>

Email Link - <a href="mailto:email"></a>

A special kind of link, the mailto notation link instructs the browser to compose and
email to the specified address using the default email program.

<a href="mailto:[email protected]?Subject=Linking">email me</a>. You may

notice that I have used this type of link over on the contact me page.
12
13