Login | Contact Us | Site Map | Resources

Basic HTML

Home > HTML Tutorial > HTML Links

HTML Text Links

How did you get here? Well, chances are you didn't drive, so you probably clicked on something called a hyperlink, or link, that brought you to this page. Links are HTML elements that, when clicked, will redirect you to another file, usually another webpage.

Links are very simple. They have an opening anchor tag, <a>, and a closing anchor tag, </a>, between which you place the text that will be seen on the webpage as a link. The hypertext reference, or "href" attribute defines the address of the link, or where you will go if you click on the link. The code looks like this:

<a href="http://www.phpforkids.com/">PHP For Kids.com</a>

And results in this: PHP For Kids.com

HTML Image Links

Images can be linked as well, simply by placing the image tag in between the link tags, without additional spaces. In order to prevent a big blue border from appearing around your linked image, the border attribute can be used in the image tag. The code is:

<a href="../index.php"><img src="/images/animals/dog-spotted.gif" border="0"></a>

The code's result is:

HTML Email Links

Email links are formatted the same as text links, but the hypertext reference, or "href" attribute does not lead to another file. Using "mailto:", you can specify the email address to send to, as well as the subject and body of the email to be sent.

<a href="mailto:an-email@a-domain.com?subject=Test&body=It works!">Email Me</a>

The result is: Email Me

Be warned; using this method, anyone on the web can find your email, and you will eventually get a lot of spam. My suggestion? Learn PHP and make a form that sends the email to you without anyone seeing your email address!

HTML Link Anchors

Have you ever clicked on a link that sent you to a different part of the same page that you were already on? The name attribute is used, as an anchor, to produce this phenomenon. The anchor says "Here I am, jump here!" in response to a link that seeks it out.

Anchor With Name Attribute: <a name="email"></a>
Link to Anchor: <a href="#email">HTML Email Links</a>

The link looks normal to your visitor: HTML Email Links. When you click on the link, it takes you to the anchor, which does not, in this case, have text between the opening and closing tags, but is located up against the text that was jumped to, as the following example demonstrates.

HTML Email Links<a name="email"></a>

This way the anchor location is identified without the anchor text looking and acting like a link.

HTML Download Links

Download links are normal text or image links that lead to a file that does not have a normal webpage file extension, usually prompting an immediate download of the file, depending on the visitor's browser settings.

<a href="http://www.phpforkids.com/references/cheat-sheets/HTML-Cheat-Sheet.pdf">Download Our HTML Cheat Sheet</a>