1. Introduction to HTML Links

HTML links play an important role in navigating from one web page to another. They allow users to jump from page to page according to their need. Also links are found in almost every web page. HTML links has following features:

  • HTML links are also called hyperlinks
  • We can define links by <a> element
  • Links often appear in different color than normal text of web page
  • Links often appear as clickable elements
  • HTML links usually change the cursor to pointer on hovering
  • HTML links may contain text, image or any other HTML element as link
  • Most importantly, HTML links also gets underlined on hovering
  • Also we can design the display and appearance of HTML links by using css styles

Tutorial Contents:

  1. What are HTML Links?
  2. What is the Syntax of HTML Liks?
  3. How to Create Local HTML Liks?
  4. Using Hyperlinks with HTML Images
  5. Creating Bookmarks With HTML Links
  6. Attributes of HTML Links

2. Syntax of HTML Links

Example

Usually we denote hyperlinks by following syntax:
<a href="url" target="_blank">Link Text</a>

Try in CodeLab

Example

See the below example to understand the use of links properly:
<a href="www.tutsinsider.com" target="_blank">Tuts Insider</a>

Try in CodeLab

In the above example:

  • The HTML link element <a> defines the link with href attribute
  • The href attribute has a url, which is the source of the link
  • Also after the first tag, the written text will appear as a link
  • On Clicking the link text will open the page with href address
  • Also in above example, the link will open in the same tab
  • To understand more about links, try in codelab

Consider This:

If you do not add a forward slash at the end of the link url, the server will generate two requests. Most often a server automatically adds a forward slash and initiates the request to open the required link.

3. Local HTML Links

Local links is another type of HTML links. It has following features:

  • Any relative url will be considered as a local link
  • Usually we specify relative urls with <base> element
  • Local links do not have absolute url path
  • Also local links only contain the final part of the resource, like pie_images.php
  • Try in codelab to understand the below example clearly

Example

<a href="pie_image.php" target="_top">Pie Images</a>

Try in CodeLab

For Information:

We can style hyperlinks by using CSS styles. CSS allow us to style the hyperlinks on the basis of normal, hover, active and visited link. For complete tutorial about links styling, visit CSS Links styling tutorial.

4. HTML Image Hyperlinks

Interestingly, HTML allow us to add links to HTML images. In this way an image will appear as a clickable HTML element. Learn more about images in HTML Images tutorial. See the below example to understand the usage of HTML image as a link.

Example

<a href="www.tutsinsider.com/codelab"><img src="Rasberries.jpg" alt="Rasberries"></a>

Try in CodeLab

5. HTML Links as Bookmarks

Interestingly we can use hyperlinks as a bookmark to a specific HTML element on the same page. Below are the details about HTML bookmarks:

  • HTML bookmarks allow the users to jump to a specific section or element within the same page
  • Bookmarks are helpful in long web pages and documents
  • We can easily define a bookmark by adding an id attribute, that must also be unique
  • After that, on a certain section of the page, we add a link to that bookmark
  • But, instead of writing the absolute url, we will write the id name in href
  • Most importantly, the id name must have a Hash(#) before the id name
  • See the below example and also try it in codelab to clear the knowledge

Example

The links to the bookmarks on the page:
<a href="#html">Learn HTML</a>
<a href="#css">Learn CSS</a>
<a href="#js">Javascript Tutorial</a>
<a href="#wp">WordPress Theme Development</a>

Try in CodeLab

Example

Bookmarks to where the links will jump on clicking
<h3 id="html">Learn HTML</h3>
<h3 id="css">Learn CSS</h3>
<h3 id="js">Javascript Tutorial</h3>
<h3 id="wp">WordPress Theme Development</h3>

Try in CodeLab

Also you can add a bookmark to another page. You can specify this by following method.

Example

<a href="www.tutsinsider.com/html/html-types#html-types">HTML types</a>

Try in CodeLab

6. HTML Links Attributes

Also HTML hyperlinks can have multiple attributes other than the main href attribute.

6.1. HTML Title Attribute

Whenever we need to provide some information about the link on hovering, we use title attribute. Usually this information is displayed as a tooltip.

Example

<a href="https://www.tutsinsider.com/html" title="This link will take you to HTML tutorial main page.">HTML Learning</a>

Try in CodeLab

6.2. HTML Target Attribute

Usually hyperlinks open in the same tab on clicking. But sometime we need to open the link in separate tab or window, we define these properties by following way, using target attribute.

  • _self: Usually this is the default behaviour and it will opens the link in the same tab
  • _blank: This will opens the link in a new tab
  • _parent: Onclick the link opens in the parent frame
  • _top: Opens the link in full body of the window
  • framename: The link will opens in a named frame

Example

<a href="https://www.tutsinsider.com/html" target="_self">Learn HTML</a>

Try in CodeLab

Check The Below Tutorials Also
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us