HIOX Free Tutorial - HTML anchor tag, href, email mailto/link

Tutorials

Topic

How to make the links within the page and add a link with attributes?
What is <a> anchor tag?

Explanation

<a> - Anchor tag

The anchor tag is used to create links to other web pages or documents and also links within the same page. Anything that appears between this tag will take you to that address when clicked.

Attributes

href - stands for hyperlink reference. It refers the address of the destination you want to go.

mailto - creates email link. The email address is listed after this attribute.

name - names the bookmarks that will be referenced later to link to it in the same page.

target - using this attribute users can specify where the new document to be displayed.

Hyperlink or Anchor - Link to a location on a page

The anchor tag is also used to make the links within the web page which will take you to the specified part of the web page.

Example code:

<html>
<title>Hyperlink or Anchor - link to a location on a page
</title>
<body>
<p>
   <a href="#C1">See also Chapter 1.</a><br>
   <a href="#C2">See also Chapter 2.</a><br>
   <a href="#C6">See also Chapter 6.</a><br>
   <a href="#C12">See also Chapter 12.</a><br>
</p>
  <h3><a name="C1">Chapter 1</a></h3>
  <p>This chapter explains about html. </p>

  <h3><a name="C2">Chapter 2</a></h3>
  <p>This chapter explains advanced html tutorial.</p>

  <h3>Chapter 3</h3>
  <p>This chapter explains anchor tag.</p>

  <h3>Chapter 4</h3>
  <p>This chapter explains meta tag.</p>

  <h3>Chapter 5</h3>
  <p>This chapter explains css tutorial.</p>

  <h3><a name="C6">Chapter 6</a></h3>
  <p>This chapter explains about javascript.</p>

  <h3>Chapter 7</h3>
  <p>This chapter explains about image tag.</p>

  <h3>Chapter 8</h3>
  <p>This chapter explains about mapping image.</p>

  <h3>Chapter 9</h3>
  <p>This chapter explains more about meta tag.</p>

  <h3>Chapter 10</h3>
  <p>This chapter explains about multimedia.</p>

  <h3>Chapter 11</h3>
  <p>This chapter explains about frame.</p>

  <h3><a name="C12">Chapter 12</a></h3>
  <p>This chapter explains about iframe.</p>

  <h3>Chapter 13</h3>
  <p>This chapter explains more on anchor tag.</p>

  <h3>Chapter 14</h3>
  <p>This chapter explains about FAQ's.</p>

</body>
</html>

Click here to see the Result

Here let us see few examples with different attributes.

Syntax:

<a href="mailto:emailaddress@host">Name</a>
This attribute takes us to the mailpage.

<a href="#nogo">Dont go any where</a>
This code refers to the same page.

<a href="URL" Target=_blank>a new window</a>
Opens the link in a new window.

<a href="URL"><img src="your-image"></a>
The specified image(your-image) will act as a link to the specified URL.

<a href="#anchor_name"> hscripts.com </a>
Link to a location in the same document.

<a href="URL">hioxindia.com</a>
Link to another file or resource.

<a href="URL#anchor_name">hiox.com</a>
Link to a target location in another document.

HTML Anchor Tag