HTML Lesson 6: Text Links

2
17

Introduction to Text Links

Text links, Hyperlinks or simply a link allow visitors to navigate between Web pages by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a web page. Hyperlinks don’t always link to other pages, but in addition they can link to different parts of the same web page! A good example of this is F.A.Q. pages where the questions at the top of the page link to different parts of the F.A.Q. page corresponding to the question. The tag for creating a link is the <a> tag. Located between the opening and the closing tag is the text that you would like to appear as a link.

So for the example the below code will create a hyperlink:

Source Code Output

I want This to be a link

This is a simple demonstration of a link. But on clicking the text, it is not taking you to next page. Surprised? It is because we need an href attribute where we will put web page URL to create a link path.

href – attribute

The href attribute is used to define the destination of the link. This can either be a different web page or a different part of the current page.

Source Code Output
This is a link

Now click on the text. You will see that it will take you to another page.

Link States

Hyperlinks possess different states, each one styled different by default. Theses states include

  • unvisited link – underlined blue text
  • visited link – underlined purple text
  • hover link – not set by default
  • active link – underlined red text

It is possible to change the colors and format of these different states. Here is an example

Source Code Output


You can change the default colors of links

Link

Link Targets

The target attribute is not required, use can use it to define a target location for the link to open whether it be in new window, a new tab or to replace the page. Effective use of link target make web page easy for readers.

Source Code Output
This is a link

List of Link Targets

Following is a list of Link Targets

Target name Description
_blank Opens the link in new tab/window
_self Opens the link in existing window
_parent Opens the link into a parent frame
_top Opens the link file into full body of existing window
framename Opens the linked document in a named frame

Anchors

The id attribute can be used to create anchors in a webpage. The anchors can then be called upon by using a pound sign ( # ) in the href attribute. This is how to navigate to different part of the same page with links. Check it out:

In addition, you can jump to a specific part of a different page by including the anchor at the end of the link in the href attribute. Let’s take a look:

As mentioned previously, HTML Anchors are useful for creating F.A.Q.s and any other page that has a table of content. For example the Table of Contents on this page uses anchors to bring you to the section you click on! Amazing right?

Default Link

Sometime links get bugged. To address this scenario it is possible to define a default tag and use the home page as the default URL. Normally it is used in the <head> part of the document. Here is an example of the default link in action.

Please Note: You can have only one default link in a whole webpage.

Summary

  • Links/hyperlinks can be text, elements and images.
  • HTML uses the <a> element to define a link.
  • HTML href include the URL or web-address.
  • Links can be colored and styled.
  • Anchors are used to navigate to certain parts of a page via links
  • HTML target attribute is used to define the link path.

Next Lesson

Hopefully you have got enough understanding of how to create text links. But links are not limited to text only. In the next lesson you will learn basics about image and how to add links it. Cool isn’t it? So let move to our next lesson which is HTML Images.

2 COMMENTS

  1. […] Its been quite a long lesson for you. Have a little break and in the next lesson we will learn about HTML Text links. […]

  2. […] visited, hover, and active. You’ve learned about the links and their usage as text in HTML Lesson 6 Text Links. But in CSS we’ll teach you how to design the […]

Leave a Reply