HTML Links


Links are embeded in all web pages. It allows users to visit multiple pages. HTML links are hyperlinks. You can click on a link and jump to another page or website. When you move the mouse over a link, the cursor changes. A link does not necessarily have to be text. It can be an image or any other HTML element.

In HTML, links are defined with the <a> tag which are underlined and displayed in a different color by browsers as default style.

HTML Links - Syntax

<a href="url">content to be displayed as link</a>

The href attribute defines the destination web address of the link whereas the content placed inside the <a></a> is the only content visible in the web page.

Example

HTML Inroduction

Absolute URL

<a href="https://www.webtrickshome.com/content/html-introduction">HTML Inroduction</a>

The example above shows an URL starting from the http base of a web page which is termed as an absolute URL. This type of URL is required to be added to a link when you need to link pages of another websites in your web page.

Relative URL

<a href="html-images.html">HTML Images</a>

Relative URLs are the links to web pages within the same website and are generally located in the same directory as the page from where they are being linked. If those pages are located in a different directory or sub-directory, then, those directories or sub-directories are also required to be included in the URL path.

<a href="pages/html-images.html">HTML Images</a>

HTML Link Colors

Links are styled by browsers by default as follows:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can change the way links appear in your web page using CSS which you will learn later.

HTML Links - The target Attribute

HTML links open on the same window on which you clicked the link by default. You can open the link in the same window or on a new window or an iframe using target attribute. The options from which you can choose one to add as the value for the target are listed below.

  • _self - Opens the linked document in the same window/tab where it was clicked.
  • _blank - Opens the linked document in a new window or tab
  • _parent - Opens the linked document in the parent frame
  • framename - Opens the linked document in a named frame
  • _top - Opens the linked document in the full body of the window which is useful when the content is being loaded on a frame.

Example

<a href="https://www.webtrickshome.com/content/html-introduction" target="_blank">HTML Inroduction</a>

HTML Links - The title Attribute

The title attribute can also be added to a link which will display information as tool tip when the mouse is moved over the link element.

Example

HTML Inroduction

<a href="https://www.webtrickshome.com/content/html-introduction" target="_blank" title="Go to HTML Introduction Lesson">HTML Inroduction</a>

HTML Links - Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page which is highly useful in cases where the web page is too long.

You can add some links on the page and display them on some convenient location from where the users can scroll to a specific content section within the page easily instead of jumping to other pages or websites.

You can easily create such bookmarks using the id attribute.

<a href="#lesson4">Lesson 4</a>
<p id="lesson4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

The bookmark link can be placed on the top of the page while the bookmarked section can be placed anywhere within the page in the logical sequence.

Once the bookmark link is clicked, the browser will automatically gets scrolled to the bookmarked lesson 4 section.

Example

Click here to go to the top of this page.