Services

Tutorials Cheat Sheets Quizzes/Tests Resources Site Map Contact

Featured Sites

24K Music Videos

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

<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="basic-html-links.php#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>

Image Maps

Image maps are images that have clickable portions mapped out on them by making use of the element with tags.


            <img src="goat.gif" width="150" height="150" usemap="#mapofgoat">
            <map name="mapofgoat">
                <area shape="rect" coords="0,0,75,75" href="http://www.phpforkids.com/css/css-tutorial-table-of-contents.php" alt="CSS Tutorial">
                <area shape="circle" coords="125,150,75" href="http://www.phpforkids.com/php/php-tutorial-table-of-contents.php" alt="PHP Tutorial">
            </map>

Will result in:

Base URL

The <base> tag is used to define the base URL for all relative (without a complete path of their own) URLS in an HTML document. It is place between the head tags.


            <head>
                <base href="https://www.w3schools.com/images/" target="_blank">
            </head>

← Previous

Table of Contents