Hypertext links

Internal Links

A hyper text link allows a browser of the document to navigate either: to a new point in the document or to navigate to a different document.
Internal links allows a browser to a named point in a document which is specified with the attribute ID. For example:

<p id="marker"> here </p>

To effect a transfer to a named anchor point, the HREF form of the anchor tag is used. For example:

<a href="#marker"> Transfer to anchor </a>

The # before the name of the hypertext link tells the browser that the link is to a named point in a document. As no document name is specified before the # the hypertext link is to a point in the current document. It is usual for the browser to visibly highlight the hypertext link.

External (Absolute) Links

Hypertext links may also link to other documents, in which case the href component names the document. If the file is held on another machine then a URL (Uniform Resource Locator) is used to describe the location of the document. For example:

For example:

To go to a named point in a file the format of the anchor is:

Relative Links

A relative link in HTML is a hyperlink that refers to a file or resource relative to the current document's location. Unlike absolute links, which include the full URL (e.g., https://example.com/page.html), relative links only specify the path relative to the current page.

Why Use Relative Links?
• Shorter and easier to manage than absolute URLs.
• Works well within the same website (e.g., linking between pages in the same project).
• More flexible when moving files between different domains

Types of Relative Links

Types of Relative Links	HTML markup Required
Linking to a File in the Same Directory If about.html and index.html are in the same folder structure: you can link to about.html like this →	<a href="about.html">About Us</a">
Linking to a File in a Subdirectory If contact.html is inside a subfolder (pages/), like the following file structure: you can link to about.html like this →	<a href="pages/contact.html">Contact Us</a">
Linking to a File in the Parent Directory If the current file (about.html) is inside a folder, like the following file structure: and you need to link back to index.html, use ../ (go up one level) to link to index.html like this →	<a href="../index.html">Back to Home</a">
Linking to a File in a Higher-Level Directory If a file is two levels up, like the following file structure: use ../../ (move up twice) to link to home.html like this →	<a href="../../home.html">Go to Home</a">
Linking to an Image Using a Relative Path If an image is saved in folder with similar structure like this: then you need to direct the browser to look for logo.png inside the images/ folder like this →	<img src="images/logo.png" alt="Website logo">

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame (it makes sense to use when you are using iframe).
• _top - Opens the document in the full body of the window (it makes sense to use when you are using iframe).

Using <nav>

The <nav> is a HTML5 semantic element used to declare a major block of navigation links (such as menus and tables of contents) in a HTML document. Links in a <nav> element may point to other webpages or to different sections of the same webpage.

Although it does not change the display, by using <nav> as a way to label our navigation links it helps screen reading software to correctly identify primary navigation areas in the HTML document.

In this example, a <nav> block is used to contain an unordered list (<ul>) of links. With appropriate CSS, this can be presented as a navigation bar:

<nav>
   <ul>
     <li>link1</li>
     <li>link2</li>
     <li>link3</li>
   </ul>
</nav>

Look also the example in lists for navigation

URL (Uniform Resource Locator)

The URL is used to specify the location of a file held on a remote machine. This is composed of several distinct components. For example, the URL http://host/file.html is composed of the following components.

Inserting an e-mail address

An e-mail address may be inserted into the document using a special form of the anchor markup tag. A user selecting this will be presented with a form on which to prepare their message for eventual sending in this case to the e-mail address: coloma@westminster.ac.uk

<a href="mailto:coloma@westminster.ac.uk"
aria-label="Send an email to Coloma">Mail me</a>

Automatic redirect

A page may contain a meta tag that will cause an automatic redirection to another URL after a specific time interval. For example, the tag

<meta http-equiv="refresh" content="3;url=http://domain/directory/file.html">

Insertion of iFrames

An iFrame is used to display a Web page within another Web page.

<iframe src="file.html" width="300" height="150" title="Embedded tutorial 3 content"></iframe>

For example, here's an iframe showing the tutorial 3: