Links and Navigation

anchor tag

Anchor tag is used to define hyperlinks. Hyperlinks are used for connecting different documents so that one can navigate from one page to another.

Anchor tags are heart of the web world. Without anchor tag internet wouldn't be possible. How can someone navigate from one page to other if there are no links?

Syntax of defining anchor tag is as follows:

<a href="resultpage.html" target="_blank">Click Me</a>

Here we have used two attributes of anchor tag. One is href attribute and the other is target attribute.

  • href attribute

    href attribute specifies what page should be opened on clicking the link.
    Example:

    <a href="resultpage.html">Click Me</a>

    Clicking on the 'Click Me' link will open the resultpage.html.

  • target attribute

    target attribute specifies where to open the link in the html document.
    Possible values of target attribute are:

    • _blank
      opens the linked page in a new tab
    • _parent
      opens the linked page in the parent frame
    • _self(default)
      opens the linked page in the same frame in which it was clicked
    • _top
      opens the linked page in the topmost frame
    • frame name
      opens the linked page in the custom named frame.

Internal Links

Internal link is a link within a same page. Internal links can take you from one place to another within same page. Often a page contains a lot of data. When someone has to read a specific topic, it may require a lot of scrolling on the page to reach that specific point. To overcome this problem you can use internal links.

For internal linking, you have to define two things. One the link and other the content. For content, use a tag with name attribute and put your content within anchor tag. For link, use anchor tag with href attribute. The href value should be same as name attribute value followed by '#' sign.

Syntax for using internal links:

<a href="#mylink">Click Me</a>
<a name="mylink">Content</a>

Here's a simple example. Note that internal links are used where there is a lot of data/content. For this example I'm using lot of <br /> tag to get a scroll bar on the side of browser.

<!DOCTYPE html>
<html>
<head>
<title>Internal Links</title>
</head>
<body>
<a href="#mylink">Click Me</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="mylink">So you finally reach here.</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

Sending emails using mailto link

It is possible to send emails using mailto inside href.

Syntax for using mailto is as follows:

<a href="mailto:emailaddr1@gmail.com,emailaddr2@gmail.com">
Send</a>

Things to do

  • Open notepad++.
  • Write the following code:
    <!DOCTYPE html>
<html>
<head>
	<title>Links and Navigation</title>
</head>
<body>
<a href="working with text.htm" target="_blank">
Link with target=blank</a><br />

<a href="working with text.htm" target="_parent">
Link with target=parent</a><br />

<a href="working with text.htm" target="_self">
Link with target=self</a><br />

<a href="working with text.htm" target="_top">
Link with target=top</a><br />

<a href="working with text.htm" target="myframe">
Link with target=frame_name</a><br />

<iframe name="myframe"></iframe><br />

<a href="mailto:support@syntaxpage.com">
Click here to send an email to support@syntaxpage.com</a>
</body>
</html>
  • Save the file as "links_and_nav.htm" and open it in a browser.
  • Open the source code again and do some experiment.
<< Frames Adding Multimedia >>